@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
457 lines (456 loc) • 17.5 kB
JavaScript
import { defineComponent as Ee, inject as Z, toRef as _, ref as ee, computed as v, createElementBlock as d, openBlock as s, mergeProps as Ie, createCommentVNode as R, createBlock as p, normalizeClass as u, unref as l, Fragment as k, createVNode as F, withModifiers as $e, withCtx as w, createElementVNode as S, createTextVNode as B, toDisplayString as E, createSlots as Ae, renderList as le } from "vue";
import "../button/index.mjs";
import "../checkbox/index.mjs";
import "../ellipsis/index.mjs";
import "../renderer/index.mjs";
import "../resize-observer/index.mjs";
import "../tooltip/index.mjs";
import { useNameHelper as Me, useIcons as Te } from "@vexip-ui/config";
import "./table-icon.vue.mjs";
import { useRtl as Le, useMoving as Be } from "@vexip-ui/hooks";
import { getLast as Oe, nextFrameOnce as De, isFunction as $ } from "@vexip-ui/utils";
import { TABLE_STORE as He, TABLE_ACTIONS as Ne, columnTypes as We, TABLE_HEAD_PREFIX as Ve } from "./symbol.mjs";
import te from "../checkbox/checkbox.vue2.mjs";
import je from "../resize-observer/resize-observer.mjs";
import Pe from "../ellipsis/ellipsis.vue2.mjs";
import A from "../renderer/renderer.mjs";
import j from "./table-icon.vue2.mjs";
import Xe from "../tooltip/tooltip.mjs";
import ne from "../button/button.mjs";
const Ge = ["colspan", "rowspan", "aria-sort"], Ue = ["onClick"], ie = 10, ml = /* @__PURE__ */ Ee({
name: "TableHeadCell",
__name: "table-head-cell",
props: {
column: {
type: Object,
default: () => ({})
},
index: {
type: Number,
default: -1
},
row: {
type: Object,
default: () => ({})
},
rowIndex: {
type: Number,
default: 0
},
fixed: {
type: String,
default: null
}
},
setup(a) {
const t = a, { state: i, getters: y, mutations: m } = Z(He), c = Z(Ne), r = Me("table"), O = _(i, "locale"), D = Te(), { isRtl: P } = Le(), z = ee(!1), X = _(i, "colResizable"), oe = v(() => i.colResizing), H = ee(), h = v(() => m.isGroupColumn(t.column)), G = v(() => t.fixed === "left" ? i.leftFixedColumns : t.fixed === "right" ? i.rightFixedColumns : i.normalColumns), C = v(() => i.cellSpanMap.get(t.fixed || "default").get(`h${t.rowIndex},${t.index}`) || {
colSpan: 1,
rowSpan: 1
}), N = v(() => h.value ? t.column.last : t.column.index + C.value.colSpan >= i.columns.length);
let M = 0;
function U(e, n = !1) {
const o = Math.max(M + (e.isRtl ? -1 : 1) * e.deltaX, ie);
return !n && m.handleColumnResize(
i.columns.slice(t.column.index, t.column.index + C.value.colSpan).map((x) => x.key),
o
), o;
}
const { target: re } = Be({
capture: !1,
onStart: (e, n) => {
if (!X.value || oe.value || h.value) return !1;
const o = c.getTableElement();
if (!o || !H.value) return !1;
e.xStart = e.clientX - o.getBoundingClientRect().left, e.isRtl = P.value, M = H.value.getBoundingClientRect().width, m.setColumnResizing(!0), m.setResizeLeft(e.xStart), c.emitColResize("Start", {
...b(n),
width: M
});
},
onMove: (e, n) => {
e.xEnd = Math.max(e.xStart - M + ie, e.xEnd), m.setResizeLeft(e.xEnd), c.emitColResize("Move", {
...b(n),
width: U(e, i.colResizable !== "responsive")
});
},
onEnd: (e, n) => {
m.setColumnResizing(!1), c.emitColResize("End", {
...b(n),
width: U(e)
});
}
}), W = v(() => We.includes(t.column.type)), ae = v(() => {
let e = null;
return typeof i.headClass == "function" ? e = i.headClass({
column: t.column,
index: t.column.colIndex,
rowIndex: t.rowIndex
}) : e = i.headClass, [
r.be("head-cell"),
{
[r.bem("head-cell", "group")]: h.value,
[r.bem("head-cell", "typed")]: W.value,
[r.bem("head-cell", "center")]: W.value || t.column.textAlign === "center",
[r.bem("head-cell", "right")]: t.column.textAlign === "right",
[r.bem("head-cell", "last")]: N.value
},
t.column.class,
e
];
}), ce = v(() => typeof i.headStyle == "function" ? i.headStyle({
column: t.column,
index: t.column.colIndex,
rowIndex: t.rowIndex
}) : i.headStyle), se = v(() => {
var K, Q, Y;
const e = t.fixed === "left" ? y.leftFixedWidths : t.fixed === "right" ? y.rightFixedWidths : y.normalWidths, { colSpan: n, rowSpan: o } = C.value, x = !y.hasFixedColumn, I = (x || ((K = G.value[0]) == null ? void 0 : K.fixed) === "left") && i.sidePadding[0] || 0, ze = (x || ((Q = Oe(G.value)) == null ? void 0 : Q.fixed) === "right") && i.sidePadding[1] || 0, Fe = e[t.index + n] - e[t.index];
let L;
if (o > 1) {
L = 0;
for (let V = 0; V < o; ++V)
L += ((Y = i.rowMap.get(`${Ve}${t.rowIndex + V}`)) == null ? void 0 : Y.height) ?? 0;
}
return [
t.column.style || "",
ce.value,
{
display: n ? void 0 : "none",
width: `${(t.column.index ? 0 : I) + (N.value ? ze : 0) + Fe}px`,
height: L ? `${L}px` : void 0,
visibility: t.column.fixed && !t.fixed ? "hidden" : void 0,
borderRightWidth: !i.border && n > 1 && t.index + n >= e.length - 1 ? 0 : void 0,
transform: `translate3d(${P.value ? "-" : ""}${(t.column.index ? I : 0) + e[t.index]}px, 0, 0)`
}
];
}), ue = v(() => {
let e;
return typeof i.headAttrs == "function" ? e = i.headAttrs({
column: t.column,
index: t.column.colIndex,
rowIndex: t.rowIndex
}) : e = i.headAttrs, { ...t.column.attrs || {}, ...e || {} };
}), g = v(() => i.sorters.get(t.column.key) || {}), f = v(() => i.filters.get(t.column.key) || {}), de = v(() => {
const e = f.value.options ?? [];
for (let n = 0, o = e.length; n < o; ++n)
if (e[n].active)
return !0;
return !1;
}), me = v(() => {
if (!q(t.column))
return !1;
const e = Object.values(y.disableCheckRows);
return y.processedData.length === e.length && !Object.values(y.disableCheckRows).includes(!1);
}), ve = () => De(c.refreshXScroll);
function q(e) {
return !h.value && e.type === "selection";
}
function b(e) {
return {
column: t.column,
index: t.column.colIndex,
event: e
};
}
function fe(e) {
c == null || c.emitHeadEvent("Enter", b(e));
}
function he(e) {
c == null || c.emitHeadEvent("Leave", b(e));
}
function xe(e) {
c == null || c.emitHeadEvent("Click", b(e));
}
function pe(e) {
c == null || c.emitHeadEvent("Dblclick", b(e));
}
function ge(e) {
c == null || c.emitHeadEvent("Contextmenu", b(e));
}
function be() {
const e = t.column.key, n = g.value.type === "asc" ? null : "asc";
m.handleSort(e, n), c.emitRowSort();
}
function ke() {
const e = t.column.key, n = g.value.type === "desc" ? null : "desc";
m.handleSort(e, n), c.emitRowSort();
}
function T(e) {
m.handleFilter(t.column.key, e);
}
function ye(e, n) {
m.toggleFilterItemActive({
key: t.column.key,
value: e,
active: n,
disableOthers: !0
}), T(e), z.value = !1, c.emitRowFilter();
}
function Ce(e, n) {
m.toggleFilterItemActive({
key: t.column.key,
value: e,
active: n
});
}
function Re() {
const e = f.value.options ?? [], n = [];
for (let o = 0, x = e.length; o < x; ++o) {
const I = e[o];
I.active && n.push(I.value);
}
T(n), z.value = !1, c.emitRowFilter();
}
function J() {
z.value = !1, T(null), m.toggleFilterItemActive({
key: t.column.key,
value: null,
disableOthers: !0
}), c.emitRowFilter();
}
function we() {
m.handleCheckAll(), c.emitAllRowCheck(i.checkedAll, i.partial);
}
function Se(e) {
var n, o;
m.setCellHeight(
t.row.key,
t.column.key,
(((o = (n = e.borderBoxSize) == null ? void 0 : n[0]) == null ? void 0 : o.blockSize) ?? e.contentRect.height) + i.borderWidth
);
}
return (e, n) => (s(), d("div", Ie(ue.value, {
ref_key: "wrapper",
ref: H,
class: ae.value,
role: "columnheader",
scope: "col",
colspan: C.value.colSpan !== 1 ? C.value.colSpan : void 0,
rowspan: C.value.rowSpan !== 1 ? C.value.rowSpan : void 0,
style: se.value,
"aria-sort": !h.value && g.value.able ? g.value.type ? g.value.type === "asc" ? "ascending" : "descending" : "none" : void 0,
onMouseenter: fe,
onMouseleave: he,
onClick: xe,
onDblclick: pe,
onContextmenu: ge,
onTransitionend: ve
}), [
a.column.index === 0 ? (s(), d("div", {
key: 0,
class: u(l(r).be("side-pad")),
role: "none",
"aria-hidden": ""
}, null, 2)) : R("", !0),
q(a.column) ? (s(), d(k, { key: 1 }, [
a.column.singleSelect ? R("", !0) : (s(), d("div", {
key: 0,
class: u(l(r).be("content"))
}, [
F(l(te), {
inherit: "",
control: "",
class: u(l(r).be("selection")),
checked: l(i).checkedAll,
partial: l(i).partial,
disabled: me.value,
size: a.column.selectionSize || "default",
onClick: $e(we, ["prevent"])
}, null, 8, ["class", "checked", "partial", "disabled", "size"])
], 2))
], 64)) : (s(), p(l(je), {
key: 2,
disabled: a.column.ellipsis ?? l(i).ellipsis,
"on-resize": Se
}, {
default: w(() => [
S("span", {
class: u(l(r).be("content"))
}, [
a.column.ellipsis ?? l(i).ellipsis ? (s(), p(l(Pe), {
key: 0,
inherit: "",
class: u(l(r).be("ellipsis")),
"tooltip-theme": l(i).tooltipTheme,
"tip-max-width": l(i).tooltipWidth
}, {
default: w(() => [
h.value && l($)(a.column.renderer) ? (s(), p(l(A), {
key: 0,
renderer: a.column.renderer
}, null, 8, ["renderer"])) : l($)(a.column.headRenderer) ? (s(), p(l(A), {
key: 1,
renderer: a.column.headRenderer,
data: { column: a.column, index: a.index }
}, null, 8, ["renderer", "data"])) : (s(), d(k, { key: 2 }, [
B(E(a.column.name), 1)
], 64))
]),
_: 1
}, 8, ["class", "tooltip-theme", "tip-max-width"])) : (s(), d(k, { key: 1 }, [
h.value && l($)(a.column.renderer) ? (s(), p(l(A), {
key: 0,
renderer: a.column.renderer
}, null, 8, ["renderer"])) : l($)(a.column.headRenderer) ? (s(), p(l(A), {
key: 1,
renderer: a.column.headRenderer,
data: { column: a.column, index: a.index }
}, null, 8, ["renderer", "data"])) : (s(), d(k, { key: 2 }, [
B(E(a.column.name), 1)
], 64))
], 64)),
h.value ? R("", !0) : (s(), d(k, { key: 2 }, [
g.value.able ? (s(), d("div", {
key: 0,
class: u(l(r).be("sorter"))
}, [
S("span", {
class: u({
[l(r).bem("sorter", "asc")]: !0,
[l(r).bem("sorter", "active")]: g.value.type === "asc"
}),
onClick: n[0] || (n[0] = (o) => be())
}, [
F(j, {
name: "asc",
origin: l(D).angleUp
}, null, 8, ["origin"])
], 2),
S("span", {
class: u({
[l(r).bem("sorter", "desc")]: !0,
[l(r).bem("sorter", "active")]: g.value.type === "desc"
}),
onClick: n[1] || (n[1] = (o) => ke())
}, [
F(j, {
name: "desc",
origin: l(D).angleDown
}, null, 8, ["origin"])
], 2)
], 2)) : R("", !0),
f.value.able ? (s(), d(k, { key: 1 }, [
l($)(a.column.filterRenderer) ? (s(), p(l(A), {
key: 0,
renderer: a.column.filterRenderer,
data: { column: a.column, index: a.index, filter: f.value, handleFilter: T }
}, null, 8, ["renderer", "data"])) : (s(), p(l(Xe), {
key: 1,
visible: z.value,
"onUpdate:visible": n[3] || (n[3] = (o) => z.value = o),
transfer: "",
placement: "bottom",
trigger: "click",
class: u({
[l(r).be("filter")]: !0,
[l(r).bem("filter", "visible")]: z.value,
[l(r).bem("filter", "active")]: f.value.active
}),
"tip-class": {
[l(r).be("filter-wrapper")]: !0,
[l(r).bs("vars")]: !0,
[l(r).bem("filter-wrapper", "multiple")]: f.value.multiple
}
}, Ae({
trigger: w(() => [
S("div", {
class: u(l(r).be("filter-trigger"))
}, [
F(j, {
name: "filter",
origin: l(D).filter
}, null, 8, ["origin"])
], 2)
]),
_: 2
}, [
f.value.multiple ? {
name: "default",
fn: w(() => [
S("div", {
vertical: "",
class: u(l(r).be("filter-group"))
}, [
(s(!0), d(k, null, le(f.value.options, (o) => (s(), p(l(te), {
key: o.value,
inherit: "",
checked: o.active,
label: o.label,
value: o.value,
onChange: (x) => Ce(o.value, x)
}, null, 8, ["checked", "label", "value", "onChange"]))), 128))
], 2),
S("div", {
class: u(l(r).be("filter-actions"))
}, [
F(l(ne), {
inherit: "",
text: "",
size: "small",
disabled: !de.value,
onClick: n[2] || (n[2] = (o) => Re())
}, {
default: w(() => [
B(E(O.value.filterConfirm), 1)
]),
_: 1
}, 8, ["disabled"]),
F(l(ne), {
inherit: "",
text: "",
size: "small",
onClick: J
}, {
default: w(() => [
B(E(O.value.filterReset), 1)
]),
_: 1
})
], 2)
]),
key: "0"
} : {
name: "default",
fn: w(() => [
S("div", {
class: u({
[l(r).be("filter-item")]: !0,
[l(r).bem("filter-item", "active")]: !f.value.active
}),
onClick: J
}, E(O.value.filterAll), 3),
(s(!0), d(k, null, le(f.value.options, (o) => (s(), d("div", {
key: o.value,
class: u({
[l(r).be("filter-item")]: !0,
[l(r).bem("filter-item", "active")]: o.active
}),
onClick: (x) => ye(o.value, !o.active)
}, E(o.label), 11, Ue))), 128))
]),
key: "1"
}
]), 1032, ["visible", "class", "tip-class"]))
], 64)) : R("", !0)
], 64))
], 2)
]),
_: 1
}, 8, ["disabled"])),
!h.value && X.value && !W.value && !a.column.last ? (s(), d("div", {
key: 3,
ref_key: "resizer",
ref: re,
class: u(l(r).be("resizer"))
}, null, 2)) : R("", !0),
N.value ? (s(), d("div", {
key: 4,
class: u([l(r).be("side-pad"), l(r).bem("side-pad", "right")]),
role: "none",
"aria-hidden": ""
}, null, 2)) : R("", !0)
], 16, Ge));
}
});
export {
ml as default
};
//# sourceMappingURL=table-head-cell.vue2.mjs.map