@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
911 lines (910 loc) • 29.1 kB
JavaScript
import { defineComponent as hl, useSlots as pl, ref as d, reactive as lt, toRef as vl, computed as g, provide as $e, watch as S, nextTick as T, onMounted as bl, onBeforeUnmount as gl, renderSlot as O, createElementBlock as b, openBlock as u, unref as l, normalizeStyle as $, normalizeClass as f, withDirectives as ze, createElementVNode as De, createCommentVNode as y, createBlock as K, Fragment as Fe, renderList as ot, mergeProps as Ae, vShow as _e, createVNode as m, withCtx as z, createSlots as Be } 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, noop as Cl, isDefined as V, isValidNumber as Tl, getLast as El, debounce as Hl, toNumber as $l, nextFrameOnce as Pe, listToMap as at, removeArrayItem 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 de from "../native-scroll/native-scroll.mjs";
import Me from "./table-head.vue2.mjs";
import P from "./table-foot.vue2.mjs";
import Le from "./table-body.vue2.mjs";
import We 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), ce = d(0), q = d(0), G = d(!1), ue = d(D.BEFORE), fe = lt(/* @__PURE__ */ new Set()), me = lt(/* @__PURE__ */ new Set()), he = d(), pe = d(!1), Ie = d(0), J = d(), w = d(), ve = d(), be = d(), ge = d(), I = d(), N = d(), X = d(), Q = d(), ye = d(), we = d();
let Z = !1;
const Ne = Rl("table", vl(o, "locale")), ee = g(() => ({ ...ct, ...o.keyConfig })), Se = g(() => Array.from(fe)), xe = g(() => Array.from(me)), 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"
], ke = Al({
...Xe.reduce(
(e, t) => (e[t] = o[t], e),
{}
),
columns: Se.value,
summaries: xe.value,
data: o.data,
dataKey: ee.value.id,
virtual: o.virtual,
locale: Ne.value,
keyConfig: ee.value,
disabledTree: o.disabledTree,
colResizable: o.colResizable === !0 ? "lazy" : o.colResizable,
sidePadding: Array.isArray(o.sidePadding) ? o.sidePadding : [o.sidePadding, o.sidePadding]
});
$e(_l, ke), $e(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
}), $e(Pl, M);
const { state: n, getters: E, mutations: te } = ke, 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 = he.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" || Tl(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(() => (El(E.totalWidths) || 0) + (n.sidePadding[0] || 0) + (n.sidePadding[1] || 0)), le = g(() => A.value && _.value > 0), oe = g(() => A.value && _.value < 100), {
setColumns: gt,
setSummaries: yt,
setData: re,
setDataKey: wt,
setTableWidth: St,
setBodyYScroll: Oe,
setBodyXScroll: Ke,
setRenderRows: Re,
setVirtual: xt,
setLocale: kt,
setDragging: Ve,
setKeyConfig: Rt,
setDisabledTree: Ct,
setLocked: Ue,
setBarScrolling: ae,
clearSort: Tt,
clearFilter: Et,
refreshRowIndex: Ht,
clearCheckAll: $t,
getParentRow: Ce,
getCurrentData: je,
flatTreeRows: zt,
refreshRowDepth: Dt,
queryRow: qe,
handleCheck: Ft,
setTreeExpanded: At
} = te;
S(Se, Ze), S(xe, et), S(() => ee.value.id, wt), S(() => o.data, Je, { deep: !0 }), S(() => o.width, Ee), S([() => o.height, () => o.borderWidth], () => {
T(He);
}), S(Ne, kt, { deep: !0 }), S(
() => o.virtual,
(e) => {
xt(e), re(o.data), ie();
}
), S(
ee,
(e) => {
Rt(e), re(o.data);
},
{ deep: !0 }
), S(
() => o.disabledTree,
(e) => {
Ct(e), re(o.data);
}
), S([() => o.rowHeight, () => o.rowMinHeight], () => {
Y();
});
for (const e of Xe) {
const t = te[`set${e.charAt(0).toLocaleUpperCase()}${e.slice(1)}`];
S(() => o[e], t);
}
function Te() {
var e, t;
(e = ye.value) == null || e.handleScroll(_.value), (t = we.value) == null || t.handleScroll(W.value);
}
const Ge = Hl(Y);
bl(() => {
Z = !0, S(k, ie), Y(), window.addEventListener("resize", Ge), T(() => {
pe.value = E.hasDragColumn;
}), w.value && (A.value = w.value.enableXScroll, j.value = w.value.enableYScroll);
}), gl(() => {
Z = !1, window.removeEventListener("resize", Ge);
}), st({
bodyHeight: F,
xScrollEnabled: A,
yScrollEnabled: j,
xScrollPercent: _,
yScrollPercent: W,
headHeight: ce,
footHeight: q,
indicatorShow: G,
bodyScrollHeight: k,
totalWidths: bt,
totalHeight: g(() => n.totalHeight),
locked: Ye,
store: ke,
wrapper: J,
mainScroll: w,
xHeadScroll: ve,
xAboveScroll: be,
xBelowScroll: ge,
thead: I,
aboveTfoot: N,
belowTfoot: X,
indicator: Q,
xScrollbar: ye,
yScrollbar: we,
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(() => {
re(e), T(() => B(!0)), ie();
});
}
function Ee() {
const e = o.width;
V(e) && (typeof e == "string" && parseFloat(e).toString() !== e ? he.value = e : he.value = `${$l(e)}px`), T(() => {
var t;
(t = w.value) != null && t.content && St(w.value.content.offsetWidth), tt();
});
}
function He() {
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" && ne(e), e.type !== "horizontal" && Bt(e));
}
function ne({ clientX: e, percentX: t }) {
n.barScrolling || (_.value = t, Ke(e), Te(), p(o.onScroll, {
type: "horizontal",
client: e,
percent: t
}));
}
function Bt({ clientY: e, percentY: t }) {
n.barScrolling || (W.value = t, Oe(e), Te(), 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(), Pe(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), Z && Y();
}
function Wt(e) {
fe.add(e);
}
function It(e) {
fe.delete(e);
}
function Nt(e) {
me.add(e);
}
function Xt(e) {
me.delete(e);
}
function Ze() {
R(() => {
gt(Se.value), Z && Ee(), T(() => {
pe.value = E.hasDragColumn;
});
});
}
function Yt(e, t, r) {
te.setColumnProp(e, t, r);
}
function et() {
R(() => {
yt(xe.value);
});
}
function Ot(e, t, r) {
te.setSummaryProp(e, t, r);
}
function Kt() {
return J.value;
}
function tt() {
var e, t, r, i;
(e = w.value) == null || e.refresh(), (t = ve.value) == null || t.refresh(), (r = be.value) == null || r.refresh(), (i = ge.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: J.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, se = !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, se = !1), Q.value && (Q.value.style.top = `${H - 2}px`), x.willDropRow = e.row, x.dropType = h, G.value = se, ue.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 = Ce(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 = Ce(r.key), c || (c = {
children: n.treeRowData
}), v = r.key, zl(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 = Ce(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, G.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) {
Re(0, v, e);
return;
}
const c = Math.max(
Math.min(F.value || 0, k.value || 0),
L.value
);
c || Re(0, 0, e);
let C = r, h = r + c;
h > t && (h = t, C = h - c);
const H = i.boundIndex(C), se = i.boundIndex(h), fl = Math.max(H - o.bufferCount, 0), ml = Math.min(se + o.bufferCount + 1, v);
Re(fl, ml, e);
}
function Y() {
return R(() => {
T(Ee), setTimeout(() => {
He(), ie(), Pe(B);
}, 0);
});
}
async function R(e = Cl, t = 250) {
return clearTimeout(U.locked), Ue(!0), await e(), new Promise((r) => {
U.locked = setTimeout(() => {
Ue(!1), r();
}, t);
});
}
function ie() {
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
), Te(), T(() => {
He();
}), R(), Pe(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: J,
class: f(ft.value),
role: "table",
style: $(mt.value),
"aria-rowcount": l(o).data.length
}, [
ze(De("div", Ll, [
O(e.$slots, "default"),
(u(!0), b(Fe, null, ot(l(o).columns, (r, i) => (u(), b(Fe, {
key: r.key ?? `__inner-column-${i}`
}, [
"children" in r ? (u(), K(l(wl), Ae({
key: 0,
ref_for: !0
}, r), null, 16)) : (u(), K(l(yl), Ae({
key: 1,
ref_for: !0
}, r, {
"id-key": r.key
}), null, 16, ["id-key"]))
], 64))), 128)),
(u(!0), b(Fe, null, ot(l(o).summaries, ({ key: r, ...i }, s) => (u(), K(l(Sl), Ae({ ref_for: !0 }, i, {
key: `__inner-summary-${s}`,
"id-key": r
}), null, 16, ["id-key"]))), 128))
], 512), [
[_e, !1]
]),
De("div", {
ref_key: "thead",
ref: I,
class: f(l(a).be("head-wrapper"))
}, [
m(l(de), {
ref_key: "xHeadScroll",
ref: ve,
inherit: "",
mode: "horizontal",
"scroll-only": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.horizontal]),
"scroll-x": l(n).bodyXScroll,
onScroll: ne
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: le.value
})
}, [
m(Me, { fixed: "left" })
], 2)) : y("", !0),
m(Me),
l(n).rightFixedColumns.length ? (u(), b("div", {
key: 1,
class: f({
[l(a).bem("fixed", "right")]: !0,
[l(a).bem("fixed", "active")]: oe.value
})
}, [
m(Me, { 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(de), {
ref_key: "xAboveScroll",
ref: be,
inherit: "",
mode: "horizontal",
"scroll-only": "",
class: f([l(a).be("wrapper"), l(o).scrollClass.horizontal]),
"scroll-x": l(n).bodyXScroll,
onScroll: ne
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: le.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")]: oe.value
})
}, [
m(P, {
fixed: "right",
above: ""
})
], 2)) : y("", !0)
]),
_: 1
}, 8, ["class", "scroll-x"])
], 2)) : y("", !0),
De("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(de), {
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")]: le.value
}),
style: $({ minHeight: `${l(n).totalHeight}px` })
}, [
m(Le, { fixed: "left" }, Be({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(We), {
renderer: l(o).slots.empty,
data: { isFixed: r }
}, null, 8, ["renderer", "data"])
])
]),
key: "0"
} : void 0
]), 1024)
], 6)) : y("", !0),
m(Le, null, Be({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(We), {
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")]: oe.value
}),
style: $({ minHeight: `${l(n).totalHeight}px` })
}, [
m(Le, { fixed: "right" }, Be({ _: 2 }, [
M.empty || l(o).slots.empty ? {
name: "empty",
fn: z(({ isFixed: r }) => [
O(e.$slots, "empty", { isFixed: r }, () => [
m(l(We), {
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(de), {
ref_key: "xBelowScroll",
ref: ge,
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: ne
}, {
default: z(() => [
l(n).leftFixedColumns.length ? (u(), b("div", {
key: 0,
class: f({
[l(a).bem("fixed", "left")]: !0,
[l(a).bem("fixed", "active")]: le.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")]: oe.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: ye,
inherit: "",
placement: "bottom",
class: f(l(a).bem("bar", "horizontal")),
fade: l(o).barFade,
disabled: !A.value,
"bar-length": pt.value,
style: $({ bottom: `${q.value}px` }),
onScrollStart: t[2] || (t[2] = (r) => l(ae)(!0)),
onScroll: Pt,
onScrollEnd: t[3] || (t[3] = (r) => l(ae)(!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: we,
inherit: "",
placement: "right",
class: f(l(a).bem("bar", "vertical")),
fade: l(o).barFade,
disabled: !j.value,
"bar-length": vt.value,
style: $({
top: ce.value ? `${ce.value}px` : void 0,
bottom: q.value ? `${q.value}px` : void 0
}),
onScrollStart: t[4] || (t[4] = (r) => l(ae)(!0)),
onScroll: Mt,
onScrollEnd: t[5] || (t[5] = (r) => l(ae)(!1))
}, null, 8, ["class", "fade", "disabled", "bar-length", "style"])) : y("", !0),
l(o).rowDraggable || pe.value ? ze((u(), b("div", {
key: 4,
ref_key: "indicator",
ref: Q,
class: f([
l(a).be("indicator"),
ue.value === "before" && l(a).bem("indicator", "before"),
ue.value === "after" && l(a).bem("indicator", "after")
])
}, null, 2)), [
[_e, G.value]
]) : y("", !0),
l(n).colResizable === "lazy" ? ze((u(), b("div", {
key: 5,
class: f(l(a).be("resize-indicator")),
style: $({ left: `${l(n).resizeLeft}px` })
}, null, 6)), [
[_e, l(n).colResizing]
]) : y("", !0)
], 14, Ml));
}
});
export {
so as default
};
//# sourceMappingURL=table.vue2.mjs.map