@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
333 lines (332 loc) • 13.5 kB
JavaScript
import { defineComponent as me, inject as A, ref as G, computed as h, watchEffect as se, nextTick as xe, createElementBlock as m, openBlock as d, mergeProps as fe, createCommentVNode as C, createBlock as y, normalizeClass as x, unref as l, Fragment as k, withModifiers as D, toDisplayString as S, createVNode as J, withCtx as K, createElementVNode as L, normalizeStyle as he, createTextVNode as p } from "vue";
import "../checkbox/index.mjs";
import "../ellipsis/index.mjs";
import "../radio/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import { useNameHelper as we, useIcons as ye } from "@vexip-ui/config";
import "./table-icon.vue.mjs";
import { useRtl as ke } from "@vexip-ui/hooks";
import { getLast as ge, isFunction as E } from "@vexip-ui/utils";
import { TABLE_STORE as be, TABLE_ACTIONS as ve, columnTypes as Ce, noopFormatter as Ie } from "./symbol.mjs";
import Se from "../radio/radio.vue2.mjs";
import Ee from "../checkbox/checkbox.vue2.mjs";
import z from "./table-icon.vue2.mjs";
import Re from "../resize-observer/resize-observer.mjs";
import Te from "../ellipsis/ellipsis.vue2.mjs";
import Q from "../renderer/renderer.mjs";
const pe = ["scope", "colspan", "rowspan"], Je = /* @__PURE__ */ me({
name: "TableCell",
__name: "table-cell",
props: {
row: {
type: Object,
default: () => ({})
},
rowIndex: {
type: Number,
default: -1
},
column: {
type: Object,
default: () => ({})
},
colIndex: {
type: Number,
default: -1
},
fixed: {
type: String,
default: null
}
},
setup(e) {
const t = e, { state: i, getters: s, mutations: g } = A(be), a = A(ve), r = we("table"), R = ye(), { isRtl: U } = ke(), F = G(0), X = G(), $ = h(() => t.column.index + b.value.colSpan >= i.columns.length), Y = h(() => {
let n = null;
typeof i.cellClass == "function" ? n = i.cellClass({
row: t.row.data,
rowIndex: t.rowIndex,
column: t.column,
columnIndex: t.column.index
}) : n = i.cellClass;
const o = Ce.includes(t.column.type);
return [
r.be("cell"),
{
[r.bem("cell", "typed")]: o,
[r.bem("cell", "center")]: o || t.column.textAlign === "center",
[r.bem("cell", "right")]: t.column.textAlign === "right",
[r.bem("cell", "last")]: $.value
},
t.column.class,
n
];
}), N = h(() => t.fixed === "left" ? i.leftFixedColumns : t.fixed === "right" ? i.rightFixedColumns : i.normalColumns), b = h(() => i.cellSpanMap.get(t.fixed || "default").get(`${t.row.index},${t.column.index}`) || { colSpan: 1, rowSpan: 1 }), Z = h(() => typeof i.cellStyle == "function" ? i.cellStyle({
row: t.row.data,
rowIndex: t.rowIndex,
column: t.column,
columnIndex: t.column.index
}) : i.cellStyle), _ = h(() => {
var H, q;
const n = t.fixed === "left" ? s.leftFixedWidths : t.fixed === "right" ? s.rightFixedWidths : s.normalWidths, { colSpan: o, rowSpan: c } = b.value, u = !s.hasFixedColumn, f = (u || ((H = N.value[0]) == null ? void 0 : H.fixed) === "left") && i.sidePadding[0] || 0, w = (u || ((q = ge(N.value)) == null ? void 0 : q.fixed) === "right") && i.sidePadding[1] || 0, v = n[t.colIndex + o] - n[t.colIndex];
let B;
return c > 1 && i.heightBITree && (B = i.heightBITree.sum(t.row.listIndex + c) - i.heightBITree.sum(t.row.listIndex)), [
t.column.style || "",
Z.value,
{
display: !o || !c ? "none" : void 0,
width: `${(t.column.index ? 0 : f) + ($.value ? w : 0) + v}px`,
height: B ? `${B}px` : void 0,
visibility: t.column.fixed && !t.fixed ? "hidden" : void 0,
borderRightWidth: !i.border && o > 1 && t.colIndex + o >= n.length - 1 ? 0 : void 0,
borderBottomWidth: c > 1 && t.rowIndex + c >= s.processedData.length ? 0 : void 0,
transform: `translate3d(${U.value ? "-" : ""}${(t.column.index ? f : 0) + n[t.colIndex]}px, 0, 0)`
}
];
}), ee = h(() => {
let n;
return typeof i.cellAttrs == "function" ? n = i.cellAttrs({
row: t.row.data,
rowIndex: t.rowIndex,
column: t.column,
columnIndex: t.colIndex
}) : n = i.cellAttrs, { ...t.column.attrs || {}, ...n || {} };
}), T = h(() => E(t.column.formatter) ? t.column.formatter : Ie), ne = h(() => s.usingTree && (s.indentedColumn ? t.column.key === s.indentedColumn.key : t.column.first));
se(() => {
V(t.column) || g.setCellHeight(t.row.key, t.column.key, F.value);
});
function W(n) {
return n.type === "selection";
}
function M(n) {
return n.type === "order";
}
function O(n) {
return n.type === "expand";
}
function P(n) {
return n.type === "drag";
}
function V(n) {
return W(n) || M(n) || O(n) || P(n);
}
function I(n) {
return {
row: t.row.data,
key: t.row.key,
rowIndex: t.rowIndex,
column: t.column,
columnIndex: t.colIndex,
event: n
};
}
function te(n) {
a == null || a.emitCellEvent("Enter", I(n));
}
function le(n) {
a == null || a.emitCellEvent("Leave", I(n));
}
function oe(n) {
a == null || a.emitCellEvent("Click", I(n));
}
function ie(n) {
a == null || a.emitCellEvent("Dblclick", I(n));
}
function de(n) {
a == null || a.emitCellEvent("Contextmenu", I(n));
}
function j(n, o, c = !1) {
if (!s.disableCheckRows.has(n.key)) {
const u = !n.checked, { data: f, key: w, index: v } = n;
g.handleCheck(w, u, c), a.emitRowCheck({ row: f, key: w, index: v, event: o, checked: u });
}
}
function re(n, o) {
if (!s.disableExpandRows.has(n.key)) {
const c = !n.expanded, { data: u, key: f, index: w } = n;
g.setRowProp(f, "expandAnimate", !0), xe(() => {
g.handleExpand(f, c), a.emitRowExpand({ row: u, key: f, index: w, event: o, expanded: c });
});
}
}
function ae(n) {
s.disableDragRows.has(n.key) || g.handleDrag(n.key, !0);
}
function ce(n, o) {
var v;
if (!((v = n.children) != null && v.length)) return;
const c = !n.treeExpanded, { data: u, key: f, index: w } = n;
a.runInLocked(), g.setTreeExpanded(n.key, c), a.emitRowExpand({ row: u, key: f, index: w, event: o, expanded: c });
}
function ue(n) {
var o, c;
F.value = (((c = (o = n.borderBoxSize) == null ? void 0 : o[0]) == null ? void 0 : c.blockSize) ?? n.contentRect.height) + i.borderWidth;
}
return (n, o) => {
var c;
return d(), m("div", fe(ee.value, {
ref_key: "wrapper",
ref: X,
class: Y.value,
role: "cell",
scope: e.column.first ? "row" : void 0,
colspan: b.value.colSpan !== 1 ? b.value.colSpan : void 0,
rowspan: b.value.rowSpan !== 1 ? b.value.rowSpan : void 0,
style: _.value,
onMouseenter: te,
onMouseleave: le,
onClick: oe,
onDblclick: ie,
onContextmenu: de
}), [
e.column.index === 0 ? (d(), m("div", {
key: 0,
class: x(l(r).be("side-pad")),
role: "none",
"aria-hidden": ""
}, null, 2)) : C("", !0),
V(e.column) ? (d(), m("div", {
key: 1,
class: x(l(r).be("content"))
}, [
W(e.column) ? (d(), m(k, { key: 0 }, [
e.column.singleSelect ? (d(), y(l(Se), {
key: 0,
inherit: "",
label: e.row.key,
value: e.row.checked ? e.row.key : null,
class: x(l(r).be("selection")),
size: e.column.selectionSize || "default",
disabled: l(s).disableCheckRows.has(e.row.key),
onClick: o[0] || (o[0] = D((u) => j(e.row, u, !0), ["prevent", "stop"]))
}, null, 8, ["label", "value", "class", "size", "disabled"])) : (d(), y(l(Ee), {
key: 1,
inherit: "",
class: x(l(r).be("selection")),
checked: e.row.checked,
size: e.column.selectionSize || "default",
disabled: l(s).disableCheckRows.has(e.row.key),
partial: e.row.partial,
control: !!((c = e.row.children) != null && c.length),
onClick: o[1] || (o[1] = D((u) => j(e.row, u), ["prevent", "stop"]))
}, null, 8, ["class", "checked", "size", "disabled", "partial", "control"]))
], 64)) : M(e.column) ? (d(), m("span", {
key: 1,
class: x(l(r).be("order"))
}, S(e.column.orderLabel && e.column.orderLabel(e.column.truthIndex ? e.row.index : e.rowIndex)), 3)) : O(e.column) ? (d(), m(k, { key: 2 }, [
l(s).disableExpandRows.has(e.row.key) ? C("", !0) : (d(), m("button", {
key: 0,
type: "button",
class: x({
[l(r).be("expand")]: !0,
[l(r).bem("expand", "active")]: e.row.expanded
}),
onClick: o[2] || (o[2] = D((u) => re(e.row, u), ["stop"]))
}, [
J(z, {
name: "expand",
origin: l(R).angleRight
}, null, 8, ["origin"])
], 2))
], 64)) : P(e.column) ? (d(), m(k, { key: 3 }, [
l(s).disableDragRows.has(e.row.key) ? C("", !0) : (d(), m("button", {
key: 0,
type: "button",
class: x(l(r).be("dragger")),
onMousedown: o[3] || (o[3] = (u) => ae(e.row))
}, [
J(z, {
name: "dragger",
origin: l(R).dragger
}, null, 8, ["origin"])
], 34))
], 64)) : C("", !0)
], 2)) : (d(), y(l(Re), {
key: 2,
"on-resize": ue
}, {
default: K(() => {
var u;
return [
L("span", {
class: x(l(r).be("content"))
}, [
ne.value ? (d(), m("div", {
key: 0,
class: x(l(r).be("tree-append"))
}, [
L("span", {
class: x(l(r).be("pad")),
style: he({
[l(r).cv("row-depth")]: e.row.depth
})
}, null, 6),
L("button", {
type: "button",
class: x([
l(r).be("tree-expand"),
!((u = e.row.children) != null && u.length) && l(r).bem("tree-expand", "hidden")
]),
onClick: o[4] || (o[4] = (f) => ce(e.row, f))
}, [
e.row.treeExpanded ? (d(), y(z, {
key: 0,
name: "minus",
origin: l(R).minusSquare
}, null, 8, ["origin"])) : (d(), y(z, {
key: 1,
name: "plus",
origin: l(R).plusSquare
}, null, 8, ["origin"]))
], 2)
], 2)) : C("", !0),
e.column.ellipsis ?? l(i).ellipsis ? (d(), y(l(Te), {
key: 1,
inherit: "",
class: x(l(r).be("ellipsis")),
"tip-disabled": l(i).barScrolling,
"tooltip-theme": l(i).tooltipTheme,
"tip-max-width": l(i).tooltipWidth
}, {
default: K(() => [
l(E)(e.column.renderer) ? (d(), y(l(Q), {
key: 0,
renderer: e.column.renderer,
data: { row: e.row.data, rowIndex: e.rowIndex, column: e.column, columnIndex: e.column.index }
}, null, 8, ["renderer", "data"])) : l(E)(e.column.accessor) ? (d(), m(k, { key: 1 }, [
p(S(T.value(e.column.accessor(e.row.data, e.rowIndex))), 1)
], 64)) : (d(), m(k, { key: 2 }, [
p(S(T.value(e.row.data[e.column.key])), 1)
], 64))
]),
_: 1
}, 8, ["class", "tip-disabled", "tooltip-theme", "tip-max-width"])) : (d(), m(k, { key: 2 }, [
l(E)(e.column.renderer) ? (d(), y(l(Q), {
key: 0,
renderer: e.column.renderer,
data: { row: e.row.data, rowIndex: e.rowIndex, column: e.column, columnIndex: e.column.index }
}, null, 8, ["renderer", "data"])) : l(E)(e.column.accessor) ? (d(), m(k, { key: 1 }, [
p(S(T.value(e.column.accessor(e.row.data, e.rowIndex))), 1)
], 64)) : (d(), m(k, { key: 2 }, [
p(S(T.value(e.row.data[e.column.key])), 1)
], 64))
], 64))
], 2)
];
}),
_: 1
})),
$.value ? (d(), m("div", {
key: 3,
class: x([l(r).be("side-pad"), l(r).bem("side-pad", "right")]),
role: "none",
"aria-hidden": ""
}, null, 2)) : C("", !0)
], 16, pe);
};
}
});
export {
Je as default
};
//# sourceMappingURL=table-cell.vue2.mjs.map