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