@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
908 lines (907 loc) • 29 kB
JavaScript
import { defineComponent as hl, useSlots as pl, ref as d, reactive as lt, toRef as vl, computed as g, provide as He, watch as S, nextTick as T, onMounted as bl, onBeforeUnmount as gl, renderSlot as O, openBlock as u, createElementBlock as b, normalizeClass as f, normalizeStyle as $, unref as l, withDirectives as $e, createElementVNode as ze, Fragment as De, renderList as ot, createBlock as K, mergeProps as Fe, vShow as Ae, createVNode as m, withCtx as z, createCommentVNode as y, createSlots as _e } from "vue";
import "../native-scroll/index.mjs";
import "../renderer/index.mjs";
import "../scrollbar/index.mjs";
import yl from "./table-column.mjs";
import wl from "./table-column-group.mjs";
import Sl from "./table-summary.mjs";
import "./table-head.vue.mjs";
import "./table-body.vue.mjs";
import "./table-foot.vue.mjs";
import { useProps as xl, useNameHelper as kl, useLocale as Rl, emitEvent as p } from "@vexip-ui/config";
import { debounceMinor as rt, isDefined as V, isValidNumber as Cl, getLast as Tl, debounce as El, toNumber as Hl, nextFrameOnce as Be, listToMap as at, removeArrayItem as $l, noop as zl } from "@vexip-ui/utils";
import { useSetTimeout as Dl } from "@vexip-ui/hooks";
import { tableProps as Fl } from "./props.mjs";
import { useStore as Al } from "./store.mjs";
import { DropType as D, TABLE_STORE as _l, TABLE_ACTIONS as Bl, TABLE_SLOTS as Pl } from "./symbol.mjs";
import se from "../native-scroll/native-scroll.mjs";
import Pe from "./table-head.vue2.mjs";
import P from "./table-foot.vue2.mjs";
import Me from "./table-body.vue2.mjs";
import Le from "../renderer/renderer.mjs";
import nt from "../scrollbar/scrollbar.vue2.mjs";
const Ml = ["aria-rowcount"], Ll = {
role: "none",
"aria-hidden": ""
}, so = /* @__PURE__ */ hl({
name: "Table",
__name: "table",
props: Fl,
emits: ["update:data"],
setup(it, { expose: st, emit: dt }) {
const ct = {
id: "id",
children: "children",
checked: "checked",
height: "height",
expanded: "expanded",
treeExpanded: "treeExpanded"
}, o = xl("table", it, {
locale: null,
columns: {
default: () => [],
static: !0
},
summaries: {
default: () => [],
static: !0
},
data: {
default: () => [],
static: !0
},
width: null,
height: null,
minHeight: null,
rowClass: null,
rowStyle: null,
rowAttrs: null,
stripe: !1,
border: !1,
highlight: !1,
useXBar: !1,
useYBar: !1,
barFade: 1500,
rowDraggable: !1,
rowHeight: {
default: null,
validator: (e) => e > 0
},
rowMinHeight: {
default: 36,
validator: (e) => e > 0
},
virtual: !1,
bufferCount: {
default: 5,
validator: (e) => e >= 0
},
scrollClass: () => ({}),
expandRenderer: {
default: null,
isFunc: !0
},
currentPage: {
default: 1,
validator: (e) => e > 0,
static: !0
},
pageSize: 0,
transparent: !1,
tooltipTheme: {
default: "dark",
validator: (e) => ["light", "dark"].includes(e)
},
tooltipWidth: 500,
singleSorter: !1,
singleFilter: !1,
cellClass: null,
cellStyle: null,
cellAttrs: null,
headClass: null,
headStyle: null,
headAttrs: null,
footClass: null,
footStyle: null,
footAttrs: null,
customSorter: !1,
customFilter: !1,
keyConfig: () => ({}),
disabledTree: !1,
rowIndent: "16px",
noCascaded: !1,
colResizable: !1,
cellSpan: {
default: null,
isFunc: !0
},
sidePadding: 0,
icons: () => ({}),
borderWidth: 1,
dataFilter: {
default: null,
isFunc: !0
},
noTransition: !1,
ellipsis: !1,
slots: () => ({})
}), ut = dt, M = pl(), a = kl("table"), { timer: U } = Dl(), F = d(o.height), L = d(o.height || 0), A = d(!1), j = d(!1), _ = d(0), W = d(0), We = d(0), de = d(0), q = d(!1), ce = d(D.BEFORE), ue = lt(/* @__PURE__ */ new Set()), fe = lt(/* @__PURE__ */ new Set()), me = d(), he = d(!1), Ie = d(0), G = d(), w = d(), pe = d(), ve = d(), be = d(), I = d(), N = d(), X = d(), J = d(), ge = d(), ye = d();
let Q = !1;
const Ne = Rl("table", vl(o, "locale")), Z = g(() => ({ ...ct, ...o.keyConfig })), we = g(() => Array.from(ue)), Se = g(() => Array.from(fe)), Xe = [
"rowClass",
"rowStyle",
"rowAttrs",
"cellClass",
"cellStyle",
"cellAttrs",
"headClass",
"headStyle",
"headAttrs",
"footClass",
"footStyle",
"footAttrs",
"border",
"stripe",
"highlight",
"currentPage",
"pageSize",
"rowHeight",
"rowMinHeight",
"rowDraggable",
"tooltipTheme",
"tooltipWidth",
"singleSorter",
"singleFilter",
"customSorter",
"customFilter",
"noCascaded",
"colResizable",
"expandRenderer",
"cellSpan",
"sidePadding",
"borderWidth",
"dataFilter",
"ellipsis"
], xe = Al({
...Xe.reduce(
(e, t) => (e[t] = o[t], e),
{}
),
columns: we.value,
summaries: Se.value,
data: o.data,
dataKey: Z.value.id,
virtual: o.virtual,
locale: Ne.value,
keyConfig: Z.value,
disabledTree: o.disabledTree,
colResizable: o.colResizable === !0 ? "lazy" : o.colResizable,
sidePadding: Array.isArray(o.sidePadding) ? o.sidePadding : [o.sidePadding, o.sidePadding]
});
He(_l, xe), He(Bl, {
increaseColumn: Wt,
decreaseColumn: It,
increaseSummary: Nt,
decreaseSummary: Xt,
getTableElement: Kt,
refreshXScroll: tt,
emitRowCheck: Vt,
emitAllRowCheck: Ut,
emitRowExpand: jt,
emitRowTreeExpand: qt,
emitRowFilter: Gt,
emitRowSort: Jt,
handleRowDragStart: Qt,
handleRowDragOver: Zt,
handleRowDrop: tl,
handleRowDragEnd: ll,
emitRowEvent: ol,
emitCellEvent: rl,
emitHeadEvent: al,
emitColResize: nl,
emitFootEvent: il,
hasIcon: (e) => !!o.icons[e],
getIcon: (e) => o.icons[e],
renderTableSlot: ul,
runInLocked: R,
updateColumns: () => rt(Ze),
setColumnProp: Yt,
updateSummaries: () => rt(et),
setSummaryProp: Ot
}), He(Pl, M);
const { state: n, getters: E, mutations: ee } = xe, Ye = g(() => o.noTransition || n.locked || n.barScrolling), ft = g(() => ({
[a.b()]: !0,
[a.bs("vars")]: !0,
[a.bm("inherit")]: o.inherit,
[a.bm("stripe")]: o.stripe,
[a.bm("border")]: o.border,
[a.bm("highlight")]: o.highlight,
[a.bm("use-y-bar")]: o.useYBar,
[a.bm("transparent")]: o.transparent,
[a.bm("virtual")]: o.virtual,
[a.bm("col-resizable")]: o.colResizable,
[a.bm("col-resizing")]: n.colResizing,
[a.bm("locked")]: Ye.value,
[a.bm("above-foot")]: n.aboveSummaries.length,
[a.bm("below-foot")]: n.belowSummaries.length,
[a.bm("using-bar")]: n.barScrolling
})), mt = g(() => {
const e = me.value ?? o.width, [t, r] = n.sidePadding, i = {
[a.cv("row-indent-width")]: typeof o.rowIndent == "number" ? `${o.rowIndent}px` : o.rowIndent,
[a.cv("b-width")]: `${o.borderWidth}px`,
[a.cv("expanded-width")]: `${Ie.value}px`
};
return t && (i[a.cv("side-pad-left")] = `${t}px`), r && (i[a.cv("side-pad-right")] = `${r}px`), V(e) && (typeof e == "number" || Cl(e, !0) ? (i.width = `${e}px`, i.minWidth = `${e}px`) : i.width = e), i;
}), ht = g(() => !!(V(o.width) || n.leftFixedColumns.length || n.rightFixedColumns.length)), k = g(() => {
const { totalHeight: e } = n;
return F.value ? Math.min(F.value, e) : void 0;
}), pt = g(() => {
var e;
return ((e = w.value) == null ? void 0 : e.xBarLength) || 35;
}), vt = g(() => {
const { totalHeight: e } = n;
return k.value && e && Math.max(Math.min(k.value / e * 100, 99), 5) || 35;
}), bt = g(() => (Tl(E.totalWidths) || 0) + (n.sidePadding[0] || 0) + (n.sidePadding[1] || 0)), te = g(() => A.value && _.value > 0), le = g(() => A.value && _.value < 100), {
setColumns: gt,
setSummaries: yt,
setData: oe,
setDataKey: wt,
setTableWidth: St,
setBodyYScroll: Oe,
setBodyXScroll: Ke,
setRenderRows: ke,
setVirtual: xt,
setLocale: kt,
setDragging: Ve,
setKeyConfig: Rt,
setDisabledTree: Ct,
setLocked: Ue,
setBarScrolling: re,
clearSort: Tt,
clearFilter: Et,
refreshRowIndex: Ht,
clearCheckAll: $t,
getParentRow: Re,
getCurrentData: je,
flatTreeRows: zt,
refreshRowDepth: Dt,
queryRow: qe,
handleCheck: Ft,
setTreeExpanded: At
} = ee;
S(we, Ze), S(Se, et), S(() => Z.value.id, wt), S(() => o.data, Je, { deep: !0 }), S(() => o.width, Te), S([() => o.height, () => o.borderWidth], () => {
T(Ee);
}), S(Ne, kt, { deep: !0 }), S(
() => o.virtual,
(e) => {
xt(e), oe(o.data), ne();
}
), S(
Z,
(e) => {
Rt(e), oe(o.data);
},
{ deep: !0 }
), S(
() => o.disabledTree,
(e) => {
Ct(e), oe(o.data);
}
), S([() => o.rowHeight, () => o.rowMinHeight], () => {
Y();
});
for (const e of Xe) {
const t = ee[`set${e.charAt(0).toLocaleUpperCase()}${e.slice(1)}`];
S(() => o[e], t);
}
function Ce() {
var e, t;
(e = ge.value) == null || e.handleScroll(_.value), (t = ye.value) == null || t.handleScroll(W.value);
}
const Ge = El(Y);
bl(() => {
Q = !0, S(k, ne), Y(), window.addEventListener("resize", Ge), T(() => {
he.value = E.hasDragColumn;
}), w.value && (A.value = w.value.enableXScroll, j.value = w.value.enableYScroll);
}), gl(() => {
Q = !1, window.removeEventListener("resize", Ge);
}), st({
bodyHeight: F,
xScrollEnabled: A,
yScrollEnabled: j,
xScrollPercent: _,
yScrollPercent: W,
headHeight: We,
footHeight: de,
indicatorShow: q,
bodyScrollHeight: k,
totalWidths: bt,
totalHeight: g(() => n.totalHeight),
locked: Ye,
store: xe,
wrapper: G,
mainScroll: w,
xHeadScroll: pe,
xAboveScroll: ve,
xBelowScroll: be,
thead: I,
aboveTfoot: N,
belowTfoot: X,
indicator: J,
xScrollbar: ge,
yScrollbar: ye,
clearSort: Tt,
clearFilter: Et,
clearSelected: $t,
refresh: Y,
refreshData: Je,
getSelected: sl,
getData: je,
selectRow: dl,
treeExpandRow: cl
});
function Je(e = o.data) {
return R(() => {
oe(e), T(() => B(!0)), ne();
});
}
function Te() {
const e = o.width;
V(e) && (typeof e == "string" && parseFloat(e).toString() !== e ? me.value = e : me.value = `${Hl(e)}px`), T(() => {
var t;
(t = w.value) != null && t.content && St(w.value.content.offsetWidth), tt();
});
}
function Ee() {
const e = o.height, t = o.minHeight, r = o.borderWidth;
let i = 0;
I.value || N.value || X.value ? (I.value && (i = I.value.offsetHeight), N.value && (i += N.value.offsetHeight), X.value && (i = X.value.offsetHeight)) : i = o.rowHeight || o.rowMinHeight, i += 2 * r, V(e) ? F.value = e - i : F.value = void 0, V(t) ? L.value = Math.min(t, e ?? 1 / 0) - i : L.value = 0;
}
function _t(e) {
n.barScrolling || (e.type !== "vertical" && ae(e), e.type !== "horizontal" && Bt(e));
}
function ae({ clientX: e, percentX: t }) {
n.barScrolling || (_.value = t, Ke(e), Ce(), p(o.onScroll, {
type: "horizontal",
client: e,
percent: t
}));
}
function Bt({ clientY: e, percentY: t }) {
n.barScrolling || (W.value = t, Oe(e), Ce(), Qe(e, t));
}
function Pt(e) {
if (!w.value) return;
const t = w.value.xScrollLimit * e / 100;
_.value = e, Ke(t), p(o.onScroll, { type: "horizontal", client: t, percent: e });
}
function Mt(e) {
const { totalHeight: t } = n, r = e * (t - (k.value ?? 0)) / 100;
W.value = e, Oe(r), Qe(r, e);
}
function Qe(e, t) {
R(), Be(B), p(o.onScroll, { type: "vertical", client: e, percent: t });
}
function Lt() {
var e;
(e = w.value) != null && e.content && (Ie.value = w.value.content.offsetWidth), Q && Y();
}
function Wt(e) {
ue.add(e);
}
function It(e) {
ue.delete(e);
}
function Nt(e) {
fe.add(e);
}
function Xt(e) {
fe.delete(e);
}
function Ze() {
R(() => {
gt(we.value), Q && Te(), T(() => {
he.value = E.hasDragColumn;
});
});
}
function Yt(e, t, r) {
ee.setColumnProp(e, t, r);
}
function et() {
R(() => {
yt(Se.value);
});
}
function Ot(e, t, r) {
ee.setSummaryProp(e, t, r);
}
function Kt() {
return G.value;
}
function tt() {
var e, t, r, i;
(e = w.value) == null || e.refresh(), (t = pe.value) == null || t.refresh(), (r = ve.value) == null || r.refresh(), (i = be.value) == null || i.refresh();
}
function Vt(e) {
p(o.onRowCheck, e);
}
function Ut(e, t) {
p(o.onRowCheckAll, e, t);
}
function jt(e) {
p(o.onRowExpand, e);
}
function qt(e) {
p(o.onRowTreeExpand, e);
}
function Gt() {
const { columns: e, filters: t } = n, r = at(e, "key"), i = Array.from(t.keys()).filter((s) => t.get(s).active).map((s) => {
const v = r[s];
return {
name: v.name,
key: v.key,
meta: v.meta,
active: t.get(s).active
};
});
B(!0), p(
o.onRowFilter,
i,
E.filteredData.map((s) => s.data)
);
}
function Jt() {
const { columns: e, sorters: t } = n, r = at(e, "key"), i = Array.from(t.keys()).filter((s) => t.get(s).type).map((s) => {
const v = r[s], c = t.get(s);
return {
name: v.name,
key: v.key,
meta: v.meta,
type: c.type,
order: c.order
};
});
B(!0), p(
o.onRowSort,
i,
E.sortedData.map((s) => s.data)
);
}
let x;
function Qt(e, t) {
x = {
draggingRow: e.row,
tableRect: G.value.getBoundingClientRect(),
willDropRow: null,
dropType: D.BEFORE,
dropped: !1
}, Ve(!0), p(o.onRowDragStart, e.row.data, t);
}
function Zt(e, t) {
if (!x || !e.el) return;
const r = e.el.getBoundingClientRect(), i = x.tableRect, s = n.disabledTree ? 0.5 : 0.25, v = n.disabledTree ? 0.5 : 0.75, c = t.clientY - r.top, C = r.height;
let h, H = -9999, ie = !0;
c < C * s ? (h = D.BEFORE, H = r.top - i.top) : c >= C * v ? (h = D.AFTER, H = r.bottom - i.top) : (h = D.INNER, ie = !1), J.value && (J.value.style.top = `${H - 2}px`), x.willDropRow = e.row, x.dropType = h, q.value = ie, ce.value = h, p(o.onRowDragOver, e.row.data, t);
}
function el(e, t) {
if (!e || !t) return !0;
for (; e; ) {
if (e === t || e.key === t.key)
return !0;
e = Re(e.key);
}
return !1;
}
function tl(e, t) {
var C;
if (!x) return;
const { draggingRow: r, willDropRow: i, dropType: s } = x;
if (!i || el(i, r)) return;
let v, c;
if (r && (c = Re(r.key), c || (c = {
children: n.treeRowData
}), v = r.key, $l(c.children, (h) => h.key === v), (C = c.children) != null && C.length || (c.treeExpanded = !1)), s === D.INNER) {
Array.isArray(i.children) || (i.children = []);
const h = Array.from(i.children);
h.push(r), i.children = h, i.treeExpanded = !0, r.parent = i.key;
} else {
v = i.key, c = Re(i.key), c || (c = {
children: n.treeRowData
});
const h = c.children.findIndex((H) => H.key === v);
~h && (c.children.splice(+(s === D.AFTER) + h, 0, r), r.parent = c.key);
}
x.dropped = !0, Dt(), zt(), Ht(), p(o.onRowDrop, e.row.data, s, t);
}
function ll(e) {
if (!x) return;
const { draggingRow: t, dropped: r } = x;
x = null, q.value = !1, T(() => {
const i = r ? je() : n.data;
Ve(!1), r && ut("update:data", i), p(o.onRowDragEnd, t.data, i, e);
});
}
function ol(e, t) {
p(o[`onRow${e}`], t);
}
function rl(e, t) {
p(o[`onCell${e}`], t);
}
function al(e, t) {
p(o[`onHead${e}`], t);
}
function nl(e, t) {
p(o[`onColResize${e}`], t);
}
function il(e, t) {
p(o[`onFoot${e}`], t);
}
function B(e = !1) {
const { totalHeight: t, bodyYScroll: r, heightBITree: i } = n, { processedData: s } = E, v = s.length;
if (!o.virtual) {
ke(0, v, e);
return;
}
const c = Math.max(
Math.min(F.value || 0, k.value || 0),
L.value
);
c || ke(0, 0, e);
let C = r, h = r + c;
h > t && (h = t, C = h - c);
const H = i.boundIndex(C), ie = i.boundIndex(h), fl = Math.max(H - o.bufferCount, 0), ml = Math.min(ie + o.bufferCount + 1, v);
ke(fl, ml, e);
}
function Y() {
return R(() => {
T(Te), setTimeout(() => {
Ee(), ne(), Be(B);
}, 0);
});
}
async function R(e = zl, t = 250) {
return clearTimeout(U.locked), Ue(!0), await e(), new Promise((r) => {
U.locked = setTimeout(() => {
Ue(!1), r();
}, t);
});
}
function ne() {
clearTimeout(U.scroll), U.scroll = setTimeout(() => {
const { totalHeight: e, bodyYScroll: t } = n;
W.value = Math.max(
Math.min(t / (e - (k.value ?? 0) || 1) * 100, 100),
0
), Ce(), T(() => {
Ee();
}), R(), Be(B);
}, 10);
}
function sl() {
const e = n.rowData, t = [];
for (let r = 0, i = e.length; r < i; ++r) {
const s = e[r];
s.checked && t.push(s.data);
}
return t;
}
function dl(e, t) {
const r = qe(e);
!r || E.disableCheckRows.has(r.key) || Ft(r.key, t ?? !r.checked);
}
function cl(e, t) {
const r = qe(e);
r && (R(), At(r.key, t ?? !r.treeExpanded));
}
function ul({ name: e }) {
return O(M, e);
}
return (e, t) => (u(), b("div", {
ref_key: "wrapper",
ref: G,
class: f(ft.value),
role: "table",
style: $(mt.value),
"aria-rowcount": l(o).data.length
}, [
$e(ze("div", Ll, [
O(e.$slots, "default"),
(u(!0), b(De, null, ot(l(o).columns, (r, i) => (u(), b(De, {
key: r.key ?? `__inner-column-${i}`
}, [
"children" in r ? (u(), K(l(wl), Fe({
key: 0,
ref_for: !0
}, r), null, 16)) : (u(), K(l(yl), Fe({
key: 1,
ref_for: !0
}, r, {
"id-key": r.key
}), null, 16, ["id-key"]))
], 64))), 128)),
(u(!0), b(De, null, ot(l(o).summaries, ({ key: r, ...i }, s) => (u(), K(l(Sl), Fe({ ref_for: !0 }, i, {
key: `__inner-summary-${s}`,
"id-key": r
}), null, 16, ["id-key"]))), 128))
], 512), [
[Ae, !1]
]),
ze("div", {
ref_key: "thead",
ref: I,
class: f(l(a).be("head-wrapper"))
}, [
m(l(se), {
ref_key: "xHeadScroll",
ref: pe,
inherit: "",
mode: "horizontal",
"scroll-only": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.horizontal]),
"scroll-x": l(n).bodyXScroll,
onScroll: ae
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: te.value
})
}, [
m(Pe, { fixed: "left" })
], 2)) : y("", !0),
m(Pe),
l(n).rightFixedColumns.length ? (u(), b("div", {
key: 1,
class: f({
[l(a).bem("fixed", "right")]: !0,
[l(a).bem("fixed", "active")]: le.value
})
}, [
m(Pe, { fixed: "right" })
], 2)) : y("", !0)
]),
_: 1
}, 8, ["class", "scroll-x"])
], 2),
l(n).aboveSummaries.length ? (u(), b("div", {
key: 0,
ref_key: "aboveTfoot",
ref: N,
class: f([l(a).be("foot-wrapper"), l(a).bem("foot-wrapper", "above")])
}, [
m(l(se), {
ref_key: "xAboveScroll",
ref: ve,
inherit: "",
mode: "horizontal",
"scroll-only": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.horizontal]),
"scroll-x": l(n).bodyXScroll,
onScroll: ae
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: te.value
})
}, [
m(P, {
fixed: "left",
above: ""
})
], 2)) : y("", !0),
m(P, { above: "" }),
l(n).rightFixedColumns.length ? (u(), b("div", {
key: 1,
class: f({
[l(a).bem("fixed", "right")]: !0,
[l(a).bem("fixed", "active")]: le.value
})
}, [
m(P, {
fixed: "right",
above: ""
})
], 2)) : y("", !0)
]),
_: 1
}, 8, ["class", "scroll-x"])
], 2)) : y("", !0),
ze("div", {
class: f([
l(a).be("body-wrapper"),
l(n).totalHeight >= L.value && l(a).bem("body-wrapper", "scrolled")
]),
style: $({
...!k.value && l(n).totalHeight ? {
height: `${l(n).totalHeight}px`,
transition: l(o).noTransition || l(n).locked ? void 0 : `height ${l(a).gnv("transition-base")}`
} : void 0,
minHeight: `${L.value}px`
})
}, [
m(l(se), {
ref_key: "mainScroll",
ref: w,
inherit: "",
mode: "both",
"scroll-only": "",
"observe-deep": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.major]),
"bar-class": l(a).bem("bar", "horizontal"),
height: k.value,
"scroll-x": l(n).bodyXScroll,
"scroll-y": l(n).bodyYScroll,
onScroll: _t,
onXEnabledChange: t[0] || (t[0] = (r) => A.value = r),
onYEnabledChange: t[1] || (t[1] = (r) => j.value = r),
onResize: Lt
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: te.value
}),
style: $({ minHeight: `${l(n).totalHeight}px` })
}, [
m(Me, { fixed: "left" }, _e({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(Le), {
renderer: l(o).slots.empty,
data: { isFixed: r }
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1024)
], 6)) : y("", !0),
m(Me, null, _e({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(Le), {
renderer: l(o).slots.empty,
data: { isFixed: r }
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1024),
l(n).rightFixedColumns.length ? (u(), b("div", {
key: 1,
class: f({
[l(a).bem("fixed", "right")]: !0,
[l(a).bem("fixed", "active")]: le.value
}),
style: $({ minHeight: `${l(n).totalHeight}px` })
}, [
m(Me, { fixed: "right" }, _e({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(Le), {
renderer: l(o).slots.empty,
data: { isFixed: r }
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1024)
], 6)) : y("", !0)
]),
_: 3
}, 8, ["class", "bar-class", "height", "scroll-x", "scroll-y"])
], 6),
l(n).belowSummaries.length ? (u(), b("div", {
key: 1,
ref_key: "belowTfoot",
ref: X,
class: f([l(a).be("foot-wrapper"), l(a).bem("foot-wrapper", "below")])
}, [
m(l(se), {
ref_key: "xBelowScroll",
ref: be,
inherit: "",
mode: "horizontal",
"scroll-only": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.horizontal]),
"bar-class": l(a).bem("bar", "horizontal"),
"bar-fade": l(o).barFade,
"scroll-x": l(n).bodyXScroll,
onScroll: ae
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: te.value
})
}, [
m(P, { fixed: "left" })
], 2)) : y("", !0),
m(P),
l(n).rightFixedColumns.length ? (u(), b("div", {
key: 1,
class: f({
[l(a).bem("fixed", "right")]: !0,
[l(a).bem("fixed", "active")]: le.value
})
}, [
m(P, { fixed: "right" })
], 2)) : y("", !0)
]),
_: 1
}, 8, ["class", "bar-class", "bar-fade", "scroll-x"])
], 2)) : y("", !0),
l(o).useXBar && ht.value ? (u(), K(l(nt), {
key: 2,
ref_key: "xScrollbar",
ref: ge,
inherit: "",
placement: "bottom",
class: f(l(a).bem("bar", "horizontal")),
fade: l(o).barFade,
disabled: !A.value,
"bar-length": pt.value,
style: $({ bottom: `${de.value}px` }),
onScrollStart: t[2] || (t[2] = (r) => l(re)(!0)),
onScroll: Pt,
onScrollEnd: t[3] || (t[3] = (r) => l(re)(!1))
}, null, 8, ["class", "fade", "disabled", "bar-length", "style"])) : y("", !0),
l(o).useYBar && k.value ? (u(), K(l(nt), {
key: 3,
ref_key: "yScrollbar",
ref: ye,
inherit: "",
placement: "right",
class: f(l(a).bem("bar", "vertical")),
fade: l(o).barFade,
disabled: !j.value,
"bar-length": vt.value,
style: $({ top: `${We.value}px`, bottom: `${de.value}px` }),
onScrollStart: t[4] || (t[4] = (r) => l(re)(!0)),
onScroll: Mt,
onScrollEnd: t[5] || (t[5] = (r) => l(re)(!1))
}, null, 8, ["class", "fade", "disabled", "bar-length", "style"])) : y("", !0),
l(o).rowDraggable || he.value ? $e((u(), b("div", {
key: 4,
ref_key: "indicator",
ref: J,
class: f([
l(a).be("indicator"),
ce.value === "before" && l(a).bem("indicator", "before"),
ce.value === "after" && l(a).bem("indicator", "after")
])
}, null, 2)), [
[Ae, q.value]
]) : y("", !0),
l(n).colResizable === "lazy" ? $e((u(), b("div", {
key: 5,
class: f(l(a).be("resize-indicator")),
style: $({ left: `${l(n).resizeLeft}px` })
}, null, 6)), [
[Ae, l(n).colResizing]
]) : y("", !0)
], 14, Ml));
}
});
export {
so as default
};
//# sourceMappingURL=table.vue2.mjs.map