ideaz-element
Version:
<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>
265 lines (264 loc) • 8.45 kB
JavaScript
import { isVNode as ne, defineComponent as le, getCurrentInstance as re, ref as ie, provide as ue, computed as ce, toRefs as me, createVNode as t, mergeProps as S, withDirectives as de, resolveDirective as C, Fragment as ge } from "vue";
import "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/lodash.mjs";
import { Plus as be } from "@element-plus/icons-vue";
import "../../../utils/index.mjs";
import { ElPagination as se, ElTable as fe, ElWatermark as k, ElForm as pe, ElButton as ve } from "element-plus";
import "../../../directives/index.mjs";
import "./hooks/index.mjs";
import y from "./TableColumn.mjs";
import D from "./ToolBar.mjs";
import { tableProps as Te, tableProvideKey as he } from "./props.mjs";
import { useNamespace as Be } from "../../../hooks/useNamespace.mjs";
import { useLocale as Ce } from "../../../hooks/useLocale.mjs";
import { draggable as ze } from "../../../directives/tableDraggable.mjs";
import { sticky as Re } from "../../../directives/sticky.mjs";
import { useTableMethods as Se } from "./hooks/useTableMethods.mjs";
import { usePagination as ke } from "./hooks/usePagination.mjs";
import { useTableColumns as ye } from "./hooks/useTableColumns.mjs";
import { useTableSlots as De } from "./hooks/useTableSlots.mjs";
import { useDraggable as we } from "./hooks/useDraggable.mjs";
import { useMergeCells as Pe } from "./hooks/useMergeCells.mjs";
import { isObject as s, isFunction as r, isString as xe } from "../../../utils/is.mjs";
import w from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/cloneDeep.mjs";
function p(o) {
return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !ne(o);
}
const Ye = /* @__PURE__ */ le({
name: "ZTable",
components: {
TableColumn: y,
ToolBar: D
},
directives: {
draggable: ze,
sticky: Re
},
inheritAttrs: !1,
props: Te,
emits: ["refresh", "radio-change", "update:data", "update:pagination", "drag-sort-end", "drag-column-end"],
setup(o, {
emit: m,
slots: e,
expose: P
}) {
const {
proxy: x
} = re(), {
setCurrentRow: E,
toggleRowSelection: L,
clearSelection: F,
clearFilter: _,
toggleAllSelection: O,
toggleRowExpansion: A,
clearSort: M,
toggleRadioSelection: j,
sort: I
} = Se();
P({
setCurrentRow: E,
toggleRowSelection: L,
clearSelection: F,
clearFilter: _,
toggleAllSelection: O,
toggleRowExpansion: A,
clearSort: M,
toggleRadioSelection: j,
sort: I
});
const {
pagination: d,
paginationAttrs: N,
tableAttributes: v,
tableData: g,
addTableData: U,
handleCurrentChange: K,
handleSizeChange: V,
handleRefresh: Z
} = ke(o, m), {
formatTableCols: f,
middleTableCols: T,
sortTableCols: z,
originFormatTableCols: $,
tableKey: h,
zTableFormRef: W
} = ye(o, m, g), {
scopedSlots: q,
tableSlots: G
} = De(f, e), {
draggableOptions: H,
dragging: J
} = we(m, g, T), {
spanMethod: Q
} = Pe(o), n = Be("table"), {
t: X
} = Ce(), b = ie(o.size);
ue(he, ce(() => ({
...me(o),
size: b.value
})));
const Y = () => {
const a = s(d.value) && d.value.align || "right", i = t(se, S({
class: n.e("pagination"),
background: !0,
size: "small"
}, N.value, {
currentPage: d.value.page,
total: d.value.total,
"onUpdate:current-page": K,
"onUpdate:page-size": V
}), null);
return d.value.pageSize ? t("div", {
class: n.be("pagination", "container")
}, [t("div", {
class: n.bm("pagination", "top")
}, [r(e.paginationTop) ? e.paginationTop() : null]), t("div", {
class: [n.bm("pagination", "middle")]
}, [t("div", {
class: n.bm("pagination", "left")
}, [r(e.paginationLeft) ? e.paginationLeft() : null, a === "left" && i]), t("div", {
class: [n.bm("pagination", "center")]
}, [a === "center" && i]), t("div", {
class: [n.bm("pagination", "right")]
}, [a === "right" && i, r(e.paginationRight) ? e.paginationRight() : null])]), t("div", {
class: n.bm("pagination", "bottom")
}, [r(e.paginationBottom) ? e.paginationBottom() : null])]) : null;
}, ee = () => {
var u;
const {
toolBar: a,
title: i
} = o, c = ((u = e.tableTitle) == null ? void 0 : u.call(e)) || (r(i) ? i() : i) || null;
return t("div", {
class: n.be("tool-bar", "container"),
style: {
marginBottom: a || r(e.tableTop) ? "16px" : 0
}
}, [t("div", {
class: n.bm("tool-bar", "center")
}, [t("div", {
class: n.bm("tool-bar", "center-content")
}, [t("div", {
class: n.e("title")
}, [c]), t("div", {
class: n.bm("tool-bar", "left")
}, [r(e.toolBarLeft) ? e.toolBarLeft() : null])]), a && t(D, {
formatTableCols: f.value,
middleTableCols: T.value,
originFormatTableCols: $.value,
sortTableCols: z.value,
size: b.value,
toolBar: o.toolBar,
tableProps: {
...o,
fullScreenElement: o.fullScreenElement || (() => x.$refs.containerRef)
},
"onColumns-change": (l) => {
T.value = w(l), h.value = (/* @__PURE__ */ new Date()).valueOf();
},
"onSize-change": (l) => {
b.value = l;
},
"onTable-cols-change": (l) => {
z.value = w(l), h.value = (/* @__PURE__ */ new Date()).valueOf();
},
onRefresh: () => Z()
}, null), t("div", {
class: n.bm("tool-bar", "right")
}, [r(e.toolBarRight) ? e.toolBarRight() : null])]), t("div", {
class: n.bm("tool-bar", "bottom")
}, [r(e.toolBarBottom) ? e.toolBarBottom() : null])]);
}, B = () => {
const {
loading: a,
editable: i
} = o;
return de(t(fe, S({
ref: "zTableRef",
class: [i && n.b("editable"), J.value && "z-table-dragging"],
key: h.value
}, {
...v.value,
spanMethod: v.value.spanMethod || Q,
data: g.value,
size: b.value
}), {
default: () => [f.value.map((c, u) => t(y, {
ref: `zTableColumn${u}`,
column: c,
size: b.value,
key: c.__uid,
tableProps: v.value,
"onRadio-change": (l) => m("radio-change", l),
"onUpdate:data": (l) => m("update:data", l),
columnIndex: u,
columnsLength: f.value.length
}, {
...e,
...q
}))],
...G
}), [[C("loading"), a], [C("draggable"), H], [C("sticky"), s(o.sticky) ? {
top: "50px",
zIndex: 100,
...o.sticky
} : void 0]]);
}, R = () => {
if (xe(o.watermark)) {
let a;
return t(k, {
content: o.watermark
}, p(a = B()) ? a : {
default: () => [a]
});
}
if (s(o.watermark)) {
let a;
return t(k, {
...o.watermark
}, p(a = B()) ? a : {
default: () => [a]
});
}
return B();
}, te = () => {
const {
editable: a
} = o, i = s(a) && a.position || "bottom", c = s(a) && a.maxLength || void 0;
if (a) {
let u, l;
return t(ge, null, [t(pe, {
ref: W,
model: {
tableData: g.value
}
}, p(u = R()) ? u : {
default: () => [u]
}), i === "bottom" && c !== g.value.length && t(ve, {
icon: be,
class: "mt-2 w-full",
onClick: () => U()
}, p(l = X("table.addData")) ? l : {
default: () => [l]
})]);
}
return R();
}, ae = () => t("div", {
class: n.e("bottom")
}, [r(e.tableBottom) ? e.tableBottom() : null]), oe = () => {
const {
toolBar: a
} = o;
return t("div", {
class: a ? n.bm("tool-bar", "top") : n.e("top")
}, [r(e.tableTop) ? e.tableTop() : null, a && r(e.toolBarTop) ? e.toolBarTop() : null]);
};
return () => t("div", {
class: n.b(""),
ref: "containerRef"
}, [oe(), ee(), te(), Y(), ae()]);
}
});
export {
Ye as default
};
//# sourceMappingURL=Table.mjs.map