@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
230 lines (229 loc) • 8.42 kB
JavaScript
import { defineComponent as de, inject as L, ref as m, reactive as ue, toRef as se, computed as d, watchEffect as fe, nextTick as p, onMounted as ge, createElementBlock as N, createCommentVNode as H, openBlock as x, withModifiers as ce, normalizeStyle as he, normalizeClass as B, unref as a, createVNode as K, createBlock as F, withCtx as P, createElementVNode as $, mergeProps as we, renderSlot as ve } from "vue";
import "../collapse-transition/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import { useNameHelper as me } from "@vexip-ui/config";
import { useSetTimeout as pe } from "@vexip-ui/hooks";
import { isFunction as j } from "@vexip-ui/utils";
import { TABLE_STORE as xe, TABLE_ACTIONS as be } from "./symbol.mjs";
import V from "../resize-observer/resize-observer.mjs";
import ye from "../collapse/collapse-transition.mjs";
import q from "../renderer/renderer.mjs";
const De = ["draggable"], Me = /* @__PURE__ */ de({
name: "TableRow",
__name: "table-row",
props: {
row: {
type: Object,
default: () => ({})
},
index: {
type: Number,
default: null
},
isHead: {
type: Boolean,
default: !1
},
isFoot: {
type: Boolean,
default: !1
},
fixed: {
type: String,
default: null
}
},
setup(l) {
const t = l, { state: r, getters: f, mutations: u } = L(xe), o = L(be), i = me("table"), { timer: b } = pe(), R = m(!1), y = m(!1), M = m(), G = m(), k = m(), E = ue({
el: M,
row: se(t, "row")
}), s = d(() => t.row.key), n = d(() => t.isHead ? "head" : t.isFoot ? "foot" : void 0), J = d(() => {
let e = null;
return n.value || (typeof r.rowClass == "function" ? e = r.rowClass(t.row.data, t.index) : e = r.rowClass), [
i.be("row"),
{
[i.bem("row", "fixed")]: r.rowHeight && r.rowHeight > 0,
[i.bem("row", "hover")]: !n.value && r.highlight && s.value === r.hoveredRowKey,
[i.bem("row", "stripe")]: r.stripe && t.index % 2 === 1,
[i.bem("row", "checked")]: t.row.checked,
[i.bem("row", "dragging")]: R.value,
[i.bem("row", "drag-over")]: y.value
},
e
];
}), C = d(
() => Math.max(...Object.values(t.row.cellHeights || {}), r.rowMinHeight)
), Q = d(() => {
let e = "";
return n.value || (typeof r.rowStyle == "function" ? e = r.rowStyle(t.row.data, t.index) : e = r.rowStyle), [
e,
{
height: r.rowHeight ? `${r.rowHeight}px` : `${C.value}px`,
minHeight: r.rowHeight ? void 0 : `${r.rowMinHeight}px`,
border: "0"
}
];
}), U = d(() => n.value ? null : typeof r.rowAttrs == "function" ? r.rowAttrs(t.row.data, t.index) : r.rowAttrs), W = d(() => {
if (t.isHead || t.isFoot) return;
r.heightTrigger;
const e = r.heightBITree && !n.value && t.index ? r.heightBITree.sum(t.index) : 0;
return {
transform: e ? `translate3d(0, ${e}px, 0)` : void 0
};
}), T = d(() => f.hasDragColumn && !f.disableDragRows.has(s.value)), X = d(() => !n.value && r.rowDraggable), z = d(() => !n.value && (r.rowDraggable || T.value)), O = d(() => r.expandRenderer), S = d(() => t.isHead || t.isFoot || !f.expandColumn ? !1 : r.rightFixedColumns.length ? t.fixed === "right" : r.leftFixedColumns.length ? t.fixed === "left" : !!r.normalColumns.length && !t.fixed);
function g() {
let e;
t.row.expanded && k.value ? e = k.value.scrollHeight : e = 0, e !== t.row.expandHeight && (u.setRowProp(s.value, "expandHeight", e), A(!0));
}
function A(e = !1) {
if (r.heightBITree && f.visibleKeys.has(s.value) && (e || !t.fixed)) {
const h = t.row.height + t.row.expandHeight, w = r.heightBITree, v = w.get(t.index);
h !== v && (w.add(t.index, h - v), u.updateTotalHeight(), u.triggerHeightChange());
}
}
function Y(e) {
var w, v;
const h = ((v = (w = e.borderBoxSize) == null ? void 0 : w[0]) == null ? void 0 : v.blockSize) ?? e.contentRect.height;
u.setRowProp(s.value, "height", h), !n.value && A();
}
fe(() => {
t.isHead || t.isFoot || (u.setRowProp(s.value, "height", r.rowHeight || C.value), !n.value && A(), p(() => {
S.value && g();
}));
}), ge(() => {
p(() => {
u.setRowProp(s.value, "height", r.rowHeight || C.value), p(() => {
S.value && g();
});
});
});
function c(e) {
return {
row: t.row.data,
key: t.row.key,
index: t.index,
event: e
};
}
function Z(e) {
u.setHoveredRowKey(s.value), !n.value && o && o.emitRowEvent("Enter", c(e));
}
function _(e) {
u.setHoveredRowKey(null), !n.value && o && o.emitRowEvent("Leave", c(e));
}
function ee(e) {
!n.value && o && o.emitRowEvent("Click", c(e));
}
function te(e) {
!n.value && o && o.emitRowEvent("Dblclick", c(e));
}
function re(e) {
!n.value && o && o.emitRowEvent("Contextmenu", c(e));
}
function D() {
return z.value && r.dragging;
}
function ae(e) {
!z.value && !T.value || (R.value = !0, o.handleRowDragStart(E, e));
}
function oe(e) {
!D() || T.value && !f.rowDragging || (clearTimeout(b.drag), e.stopPropagation(), e.preventDefault(), y.value = !0, o.handleRowDragOver(E, e));
}
function ne(e) {
D() && (clearTimeout(b.drag), e.stopPropagation(), e.preventDefault(), y.value = !1, o.handleRowDrop(E, e), p(() => u.handleDrag(s.value, !1)));
}
function le(e) {
D() && (e.stopPropagation(), R.value = !0, o.handleRowDragEnd(e), p(() => u.handleDrag(s.value, !1)));
}
function ie(e) {
D() && (clearTimeout(b.drag), e.preventDefault(), b.drag = setTimeout(() => {
y.value = !1;
}, 100));
}
function I() {
u.setRowProp(s.value, "expandAnimate", !1);
}
return (e, h) => l.row.hidden ? H("", !0) : (x(), N("div", {
key: 0,
ref_key: "wrapper",
ref: M,
class: B({
[a(i).be("group")]: !0,
[a(i).bem("group", "checked")]: l.row.checked,
[a(i).bem("group", "last")]: l.row.last
}),
role: "row",
draggable: X.value || l.row.dragging,
style: he(W.value),
onMouseenter: Z,
onMouseleave: _,
onClick: ee,
onDblclick: te,
onContextmenu: re,
onDragstart: ce(ae, ["stop"]),
onDragover: oe,
onDrop: ne,
onDragend: le,
onDragleave: ie
}, [
K(a(V), { "on-resize": Y }, {
default: P(() => [
$("div", we(U.value, {
ref_key: "rowEl",
ref: G,
class: J.value,
style: Q.value
}), [
ve(e.$slots, "default")
], 16)
]),
_: 3
}),
S.value ? (x(), F(a(ye), {
key: 0,
disabled: !l.row.expandAnimate,
onEnter: g,
onLeave: g,
onAfterEnter: I,
onAfterLeave: I
}, {
default: P(() => [
l.row.expanded ? (x(), N("div", {
key: 0,
ref_key: "expandEl",
ref: k,
class: B([a(i).be("expanded"), l.fixed === "right" && a(i).bem("expanded", "fixed")])
}, [
K(a(V), {
disabled: l.row.expandAnimate,
"on-resize": g
}, {
default: P(() => [
$("div", {
class: B(a(i).be("expanded-wrapper"))
}, [
a(j)(a(f).expandColumn.renderer) ? (x(), F(a(q), {
key: 0,
renderer: a(f).expandColumn.renderer,
data: { leftFixed: 0, rightFixed: 0, row: l.row.data, rowIndex: l.index }
}, null, 8, ["renderer", "data"])) : a(j)(O.value) ? (x(), F(a(q), {
key: 1,
renderer: O.value,
data: { leftFixed: 0, rightFixed: 0, row: l.row.data, rowIndex: l.index }
}, null, 8, ["renderer", "data"])) : H("", !0)
], 2)
]),
_: 1
}, 8, ["disabled"])
], 2)) : H("", !0)
]),
_: 1
}, 8, ["disabled"])) : H("", !0)
], 46, De));
}
});
export {
Me as default
};
//# sourceMappingURL=table-row.vue2.mjs.map