@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
208 lines (207 loc) • 7.45 kB
JavaScript
import { defineComponent as J, inject as E, ref as K, computed as r, createElementBlock as h, openBlock as c, mergeProps as Q, createCommentVNode as v, createBlock as b, normalizeClass as x, unref as o, withCtx as F, createElementVNode as U, createVNode as X } from "vue";
import "../ellipsis/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import { useNameHelper as Y } from "@vexip-ui/config";
import { useRtl as Z } from "@vexip-ui/hooks";
import { getLast as _, isFunction as ee } from "@vexip-ui/utils";
import { TABLE_STORE as te, TABLE_ACTIONS as ne, columnTypes as oe } from "./symbol.mjs";
import le from "../resize-observer/resize-observer.mjs";
import me from "../ellipsis/ellipsis.vue2.mjs";
import R from "../renderer/renderer.mjs";
const ae = ["scope", "colspan", "rowspan"], ve = /* @__PURE__ */ J({
name: "TableFootCell",
__name: "table-foot-cell",
props: {
row: {
type: Object,
default: () => ({})
},
column: {
type: Object,
default: () => ({})
},
colIndex: {
type: Number,
default: -1
},
summary: {
type: Object,
default: () => ({})
},
summaryIndex: {
type: Number,
default: -1
},
fixed: {
type: String,
default: null
},
above: {
type: Boolean,
default: !1
}
},
setup(m) {
const e = m, { state: n, getters: s, mutations: B } = E(te), l = E(ne), i = Y("table"), { isRtl: N } = Z(), W = K(), p = r(() => e.column.index + d.value.colSpan >= n.columns.length), g = r(() => e.fixed === "left" ? n.leftFixedColumns : e.fixed === "right" ? n.rightFixedColumns : n.normalColumns), $ = r(() => e.above ? "af" : "bf"), L = r(() => e.above ? n.aboveSummaries : n.belowSummaries), I = r(() => e.above ? s.topFixedHeights : s.bottomFixedHeights), T = r(() => {
let t = null;
typeof n.footClass == "function" ? t = n.footClass({
column: e.column,
columnIndex: e.column.index,
summary: e.summary,
summaryIndex: e.summaryIndex
}) : t = n.footClass;
const a = oe.includes(e.column.type);
return [
i.be("foot-cell"),
{
[i.bem("foot-cell", "typed")]: a,
[i.bem("foot-cell", "center")]: a || e.column.textAlign === "center",
[i.bem("foot-cell", "right")]: e.column.textAlign === "right",
[i.bem("foot-cell", "last")]: p.value
},
e.column.class,
t
];
}), d = r(() => n.cellSpanMap.get(e.fixed || "default").get(`${$.value}${e.summaryIndex},${e.column.index}`) || {
colSpan: 1,
rowSpan: 1
}), z = r(() => typeof n.footStyle == "function" ? n.footStyle({
column: e.column,
columnIndex: e.column.index,
summary: e.summary,
summaryIndex: e.summaryIndex
}) : n.cellStyle), O = r(() => {
var k, w;
const t = e.fixed === "left" ? s.leftFixedWidths : e.fixed === "right" ? s.rightFixedWidths : s.normalWidths, { colSpan: a, rowSpan: u } = d.value, C = ((k = g.value[0]) == null ? void 0 : k.fixed) === "left" && n.sidePadding[0] || 0, A = ((w = _(g.value)) == null ? void 0 : w.fixed) === "right" && n.sidePadding[1] || 0, G = t[e.colIndex + a] - t[e.colIndex];
let y;
return u > 1 && (y = I.value[e.summaryIndex + u] - I.value[e.summaryIndex]), [
e.column.style || "",
z.value,
{
display: !a || !u ? "none" : void 0,
width: `${(e.column.index ? 0 : C) + (p.value ? A : 0) + G}px`,
height: y ? `${y}px` : void 0,
visibility: e.column.fixed && !e.fixed ? "hidden" : void 0,
borderRightWidth: !n.border && a > 1 && e.colIndex + a >= t.length - 1 ? 0 : void 0,
borderBottomWidth: u > 1 && e.summaryIndex + u >= L.value.length ? 0 : void 0,
transform: `translate3d(${N.value ? "-" : ""}${(e.column.index ? C : 0) + t[e.colIndex]}px, 0, 0)`
}
];
}), D = r(() => {
let t;
return typeof n.footAttrs == "function" ? t = n.footAttrs({
column: e.column,
columnIndex: e.column.index,
summary: e.summary,
summaryIndex: e.summaryIndex
}) : t = n.footAttrs, { ...e.column.attrs || {}, ...t || {} };
}), S = r(() => s.summaryData.get(e.column.key));
function f(t) {
return {
column: e.column,
columnIndex: e.column.index,
summary: e.summary,
summaryIndex: e.summaryIndex,
event: t
};
}
function M(t) {
l == null || l.emitFootEvent("Enter", f(t));
}
function j(t) {
l == null || l.emitFootEvent("Leave", f(t));
}
function H(t) {
l == null || l.emitFootEvent("Click", f(t));
}
function P(t) {
l == null || l.emitFootEvent("Dblclick", f(t));
}
function V(t) {
l == null || l.emitFootEvent("Contextmenu", f(t));
}
function q(t) {
var a, u;
B.setCellHeight(
e.row.key,
e.column.key,
(((u = (a = t.borderBoxSize) == null ? void 0 : a[0]) == null ? void 0 : u.blockSize) ?? t.contentRect.height) + n.borderWidth
);
}
return (t, a) => (c(), h("div", Q(D.value, {
ref_key: "wrapper",
ref: W,
class: T.value,
role: "cell",
scope: m.column.first ? "row" : void 0,
colspan: d.value.colSpan !== 1 ? d.value.colSpan : void 0,
rowspan: d.value.rowSpan !== 1 ? d.value.rowSpan : void 0,
style: O.value,
onMouseenter: M,
onMouseleave: j,
onClick: H,
onDblclick: P,
onContextmenu: V
}), [
m.column.index === 0 ? (c(), h("div", {
key: 0,
class: x(o(i).be("side-pad")),
role: "none",
"aria-hidden": ""
}, null, 2)) : v("", !0),
o(ee)(m.summary.renderer) ? (c(), b(o(le), {
key: 1,
disabled: m.column.ellipsis ?? o(n).ellipsis,
"on-resize": q
}, {
default: F(() => [
U("span", {
class: x(o(i).be("content"))
}, [
m.column.ellipsis ?? o(n).ellipsis ? (c(), b(o(me), {
key: 0,
inherit: "",
class: x(o(i).be("ellipsis")),
"tooltip-theme": o(n).tooltipTheme,
"tip-max-width": o(n).tooltipWidth
}, {
default: F(() => [
X(o(R), {
renderer: m.summary.renderer,
data: {
column: m.column,
index: m.column.index,
rows: o(n).data,
meta: S.value
}
}, null, 8, ["renderer", "data"])
]),
_: 1
}, 8, ["class", "tooltip-theme", "tip-max-width"])) : (c(), b(o(R), {
key: 1,
renderer: m.summary.renderer,
data: {
column: m.column,
index: m.column.index,
rows: o(n).data,
meta: S.value
}
}, null, 8, ["renderer", "data"]))
], 2)
]),
_: 1
}, 8, ["disabled"])) : v("", !0),
p.value ? (c(), h("div", {
key: 2,
class: x([o(i).be("side-pad"), o(i).bem("side-pad", "right")]),
role: "none",
"aria-hidden": ""
}, null, 2)) : v("", !0)
], 16, ae));
}
});
export {
ve as default
};
//# sourceMappingURL=table-foot-cell.vue2.mjs.map