@layui/layui-vue
Version:
a component library for Vue 3 base on layui-vue
46 lines (45 loc) • 4.27 kB
JavaScript
import { defineComponent as G, inject as $, openBlock as o, createElementBlock as r, normalizeStyle as k, createElementVNode as c, unref as a, Fragment as u, renderList as h, normalizeClass as j, createBlock as I, renderSlot as O, createTextVNode as F, toDisplayString as P, withModifiers as m, createCommentVNode as f } from "vue";
import { sortType as S } from "../typing.js";
import X from "../../checkboxV2/index2.js";
import { startResize as Y } from "../hooks/useResize.js";
import { LAY_TABLE_CONTEXT as J } from "../constant.js";
import { isValueArray as K } from "../../utils/arrayUtil.js";
const Q = ["lay-size", "lay-skin"], U = ["width"], Z = ["colspan", "rowspan", "onClick"], ee = ["lay-sort"], le = ["onClick"], te = ["onClick"], ae = ["onMousedown"], ue = G({ name: "LayTableHeader", __name: "TableHeader", props: { lastLevelShowColumns: {}, hierarchicalColumns: {}, tableBodyScrollWidth: {} }, setup(se) {
const { tableProps: y, tableEmits: z, tableDataSource: d, tableRef: R, tableBodyTableRef: V, tableHeaderRef: B, tableHeaderTableRef: C, tableTotalTableRef: x, columnsState: g, selectedState: p, commonGetClasses: E, commonGetStylees: H } = $(J), w = (l, i, t) => {
const s = l.target.parentNode, e = s.getAttribute("lay-sort");
T(s, i, e !== t ? t : "");
}, T = (l, i, t) => {
const { key: s, sort: e } = i;
M(), l.setAttribute("lay-sort", t), e !== "custom" && L(s, t), z("sort-change", s, t);
}, L = (l, i) => {
switch (i) {
case "":
d.splice(0, d.length, ...y.dataSource);
break;
case "asc":
d.sort((t, s) => t[l] - s[l]);
break;
case "desc":
d.sort((t, s) => s[l] - t[l]);
}
}, M = () => {
const l = R.value.querySelectorAll("[lay-sort]");
l && l.length > 0 && l.forEach((i) => {
i.setAttribute("lay-sort", "");
});
};
return (l, i) => (o(), r("div", { class: "layui-table-header", style: k([{ "padding-right": `${l.tableBodyScrollWidth}px` }]) }, [c("div", { class: "layui-table-header-wrapper", ref_key: "tableHeaderRef", ref: B }, [c("table", { class: "layui-table", "lay-size": a(y).size, "lay-skin": a(y).skin, ref_key: "tableHeaderTableRef", ref: C }, [c("colgroup", null, [(o(!0), r(u, null, h(l.lastLevelShowColumns, (t, s) => (o(), r("col", { key: t.key || t.type || s, width: t.width, style: k({ minWidth: t.minWidth }) }, null, 12, U))), 128))]), c("thead", null, [(o(!0), r(u, null, h(l.hierarchicalColumns, (t, s) => (o(), r("tr", { key: s }, [(o(!0), r(u, null, h(t, (e, A) => {
var v;
return o(), r(u, { key: e.key || e.type || A }, [e.hide ? f("", !0) : (o(), r("th", { key: 0, colspan: a(g).setColSpanValue(e), rowspan: a(g).setRowSpanValue(e), class: j(a(E)(e, { "layui-table-is-sort": !!e.sort })), style: k(a(H)(e)), onClick: (n) => ((_, N) => {
const b = _.currentTarget.querySelector("span[lay-sort]");
if (!b)
return;
const W = b.getAttribute("lay-sort"), q = S.indexOf(W), D = S[(q + 1) % S.length];
T(b, N, D);
})(n, e) }, [e.type == "checkbox" ? (o(), I(X, { key: 0, modelValue: a(p).allMSelected.value, "is-indeterminate": a(p).someMSelected.value, skin: "primary", value: "all", onChange: a(p).setMAllSelected }, null, 8, ["modelValue", "is-indeterminate", "onChange"])) : (o(), r(u, { key: 1 }, [c("span", null, [e.titleSlot ? O(l.$slots, e.titleSlot, { key: 0, column: e, columnIndex: A }) : (o(), r(u, { key: 1 }, [F(P(e.title), 1)], 64))]), e.sort ? (o(), r("span", { key: 0, class: "layui-table-sort layui-inline", "lay-sort": ((v = a(y).initSort) == null ? void 0 : v.field) === e.key ? a(y).initSort.type : "" }, [c("i", { onClick: m((n) => w(n, e, "asc"), ["stop"]), class: "layui-edge layui-table-sort-asc", title: "升序" }, null, 8, le), c("i", { onClick: m((n) => w(n, e, "desc"), ["stop"]), class: "layui-edge layui-table-sort-desc", title: "降序" }, null, 8, te)], 8, ee)) : f("", !0)], 64)), !a(y).resize && !e.resize || a(K)(e.children) ? f("", !0) : (o(), r("div", { key: 2, class: "lay-table-cols-resize", onMousedown: m((n) => a(Y)(n, e, a(C), a(V), a(x)), ["stop"]), onClick: i[0] || (i[0] = m(() => {
}, ["stop"])) }, null, 40, ae))], 14, Z))], 64);
}), 128))]))), 128))])], 8, Q)], 512)], 4));
} });
export {
ue as default
};