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>
343 lines (342 loc) • 11.5 kB
JavaScript
import { isVNode as te, defineComponent as ae, ref as D, watchEffect as oe, createVNode as e, Fragment as F, withDirectives as ne, resolveDirective as re, resolveComponent as L } from "vue";
import { VideoPause as G, Right as Q, Back as Z, Refresh as ce, DCaret as de, FullScreen as ie, Operation as ue } from "@element-plus/icons-vue";
import { VueDraggable as se } from "../../../node_modules/.pnpm/vue-draggable-plus@0.2.4_@types_sortablejs@1.15.8_@vue_composition-api@1.7.2_vue@3.4.27_typescript@5.4.5__/node_modules/vue-draggable-plus/dist/vue-draggable-plus.mjs";
import "../../../utils/index.mjs";
import { ElTooltip as u, ElButton as s, ElDropdown as he, ElDropdownMenu as fe, ElDropdownItem as me, ElPopover as be, ElCheckbox as q, ElDivider as ge, ElCheckboxGroup as Ce } from "element-plus";
import "./hooks/index.mjs";
import { toolBarProps as _e } from "./props.mjs";
import { useNamespace as pe } from "../../../hooks/useNamespace.mjs";
import { useLocale as ve } from "../../../hooks/useLocale.mjs";
import { useFormSize as xe } from "../../../hooks/useFormSize.mjs";
import { useToolBarTableCols as ke } from "./hooks/useToolBarTableCols.mjs";
import { useFixedTableCols as Te } from "./hooks/useFixedTableCols.mjs";
import { isFunction as A, isObject as Fe, isValid as Ee } from "../../../utils/is.mjs";
function S(o) {
return typeof o == "function" || Object.prototype.toString.call(o) === "[object Object]" && !te(o);
}
function Ve(o, g) {
const i = {}, T = [...g];
return o.forEach((C, m) => {
i[C.__uid] = m;
}), o.forEach((C) => {
if (!T.some((m) => m.__uid === C.__uid)) {
const m = i[C.__uid];
T.splice(m, 0, C);
}
}), T;
}
const Pe = /* @__PURE__ */ ae({
name: "ToolBar",
components: {
Draggable: se
},
props: _e,
emits: ["columns-change", "size-change", "refresh", "table-cols-change"],
setup(o, {
emit: g
}) {
const {
checkedTableCols: i,
handleReset: T,
handleDataChange: C
} = ke(o, g), {
handleTableColFixedFromCenter: m,
leftFixedTableCols: p,
rightFixedTableCols: v,
leftCheckedTableColsUids: x,
rightCheckedTableColsUids: k,
handleResetFixedTableCols: H,
handleFixedCheckedTableColsChange: y,
handleSortTableCols: I,
handleUnfixedTableCol: M,
handleSideFixedDragChange: B,
handleFixedTableColFromSide: U
} = Te(o, g, i), N = pe("table-tool-bar"), {
t: r
} = ve(), V = xe(), O = D(P(x.value, i.value, k.value)), w = D(z(x.value, i.value, k.value)), j = D(!1);
function z(a, l, h) {
const c = p.value.map((t) => t.__uid), d = o.sortTableCols.filter((t) => A(t.hide) ? !t.hide() : !t.hide).map((t) => t.__uid), f = v.value.map((t) => t.__uid);
return c.every((t) => a.includes(t)) && d.every((t) => l.includes(t)) && f.every((t) => h.includes(t));
}
function P(a, l, h) {
const c = p.value.map((t) => t.__uid).some((t) => a.includes(t)), d = o.sortTableCols.filter((t) => A(t.hide) ? !t.hide() : !t.hide).map((t) => t.__uid).some((t) => l.includes(t)), f = v.value.map((t) => t.__uid).some((t) => h.includes(t));
return (c || d || f) && !z(a, l, h) && !!(a.length || l.length || h.length);
}
oe(() => {
O.value = P(x.value, i.value, k.value), w.value = z(x.value, i.value, k.value);
});
const R = (a) => {
const l = [];
if (a && a.length > 0) {
const h = o.originFormatTableCols.filter((c) => !o.sortTableCols.map((d) => d.__uid).includes(c.__uid));
o.sortTableCols.forEach((c) => {
a.forEach((d) => {
d === c.__uid && l.push(c);
});
}), h.forEach((c) => {
const d = {
...c,
fixed: x.value.includes(c.__uid) ? "left" : k.value.includes(c.__uid) ? "right" : void 0
}, f = o.originFormatTableCols.findIndex((t) => d.__uid === t.__uid);
f > -1 && l.splice(f, 0, d);
});
}
g("columns-change", l);
}, J = (a) => {
i.value = a ? o.sortTableCols.map((l) => l.__uid) : [], R(a ? o.sortTableCols.map((l) => l.__uid) : []);
}, K = (a) => {
R(a);
}, W = [{
label: r("common.default"),
size: "default"
}, {
label: r("table.loose"),
size: "large"
}, {
label: r("table.compact"),
size: "small"
}], E = (a) => {
const l = o.toolBar;
return Fe(l) && Ee(l[a]) ? l[a] : !0;
}, X = () => {
g("refresh");
}, Y = (a) => {
g("size-change", a);
}, $ = () => {
T(), H();
}, ee = (a) => [{
title: r("table.leftFixed"),
titleVisible: p.value.length,
checkboxModelValue: x,
checkboxChange: (l) => y("left", l),
dragModelValue: p,
dragChange: () => B("left"),
dragEnd: (l) => I(l, "left"),
checkboxData: p.value,
extraContent: (l) => e(F, null, [e(u, {
effect: "dark",
content: r("table.unpin"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: G,
text: !0,
onClick: () => M(l)
}, null)]
}), e(u, {
effect: "dark",
content: r("table.rightFixed"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: Q,
text: !0,
onClick: () => U(l, "right")
}, null)]
})])
}, {
title: r("table.unfixed"),
titleVisible: p.value.length || v.value.length,
checkboxModelValue: i,
checkboxChange: K,
dragModelValue: a,
dragChange: () => {
},
dragEnd: () => C(Ve(o.sortTableCols, a), o.middleTableCols),
checkboxData: a,
extraContent: (l) => e(F, null, [e(u, {
effect: "dark",
content: r("table.leftFixed"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: Z,
text: !0,
onClick: () => m(l, "left")
}, null)]
}), e(u, {
effect: "dark",
content: r("table.rightFixed"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: Q,
text: !0,
onClick: () => m(l, "right")
}, null)]
})])
}, {
title: r("table.rightFixed"),
titleVisible: v.value.length,
checkboxModelValue: k,
checkboxChange: (l) => y("right", l),
dragModelValue: v,
dragChange: () => B("right"),
dragEnd: (l) => I(l, "right"),
checkboxData: v.value,
extraContent: (l) => e(F, null, [e(u, {
effect: "dark",
content: r("table.leftFixed"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: Z,
text: !0,
onClick: () => U(l, "left")
}, null)]
}), e(u, {
effect: "dark",
content: r("table.unpin"),
placement: "top",
showAfter: 300
}, {
default: () => [e(s, {
icon: G,
text: !0,
onClick: () => M(l)
}, null)]
})])
}];
return () => {
var f, t;
let a;
const l = (f = o.tableProps) == null ? void 0 : f.loading, h = (t = o.tableProps) == null ? void 0 : t.fullScreenElement, c = o.sortTableCols.filter((n) => A(n.hide) ? !n.hide() : !n.hide), d = ee(c);
return e("div", {
class: N.b("")
}, [E("refresh") && e(u, {
effect: "dark",
content: r("common.refresh"),
placement: "top",
showAfter: 300
}, {
default: () => [ne(e(s, {
size: V.value,
icon: ce,
text: !0,
onClick: X
}, null), [[re("loading"), l]])]
}), E("density") && e(u, {
effect: "dark",
content: r("table.density"),
placement: "top",
showAfter: 300
}, {
default: () => [e(he, {
onCommand: Y,
trigger: "click",
size: "default"
}, {
default: () => [e(s, {
icon: de,
text: !0
}, null)],
dropdown: () => {
let n;
return e(F, null, [e(fe, null, S(n = W.map((_) => e(me, {
command: _.size,
class: o.size === _.size && "density-dropdown__active"
}, {
default: () => [_.label]
}))) ? n : {
default: () => [n]
})]);
}
})]
}), E("fullScreen") && e(u, {
effect: "dark",
content: j.value ? r("common.cancelFullScreen") : r("common.fullScreen"),
placement: "top",
showAfter: 300
}, {
default: () => [e(L("z-full-screen"), {
el: h || document.getElementsByClassName("z-table__container")[0],
onChange: (n) => j.value = n
}, {
default: () => [e(s, {
icon: ie,
text: !0,
size: V.value
}, null)]
})]
}), E("setting") && e(u, {
effect: "dark",
content: r("table.columnSetting"),
placement: "top",
showAfter: 300
}, {
default: () => [e("div", null, [e(be, {
placement: "bottom",
width: "190",
trigger: "click"
}, {
default: () => [e("div", {
class: "column-popover__inner"
}, [e("div", {
class: "column-popover__title"
}, [e(q, {
modelValue: w.value,
indeterminate: O.value,
onChange: J,
"onUpdate:modelValue": (n) => {
w.value = n;
},
size: "small"
}, S(a = r("table.columnDisplay")) ? a : {
default: () => [a]
}), e("a", {
onClick: $,
href: "javascript:;",
class: "column-popover__reset"
}, [r("common.reset")])]), e("div", {
class: "column-popover__content"
}, [d.map((n) => {
let _;
const le = n.dragModelValue.value ? n.dragModelValue.value : c;
return e(F, null, [n.titleVisible ? e(ge, null, {
default: () => [n.title]
}) : null, e(Ce, {
modelValue: n.checkboxModelValue.value,
"onUpdate:modelValue": (b) => n.checkboxModelValue.value = b,
size: "small",
onChange: n.checkboxChange
}, {
default: () => [e(L("draggable"), {
modelValue: le,
animation: 200,
onChange: n.dragChange,
onEnd: n.dragEnd,
ghostClass: "column-popover-checkbox__drag--ghost"
}, S(_ = n.checkboxData.map((b) => e("div", {
key: b.__uid,
class: "column-popover-checkbox"
}, [e(q, {
value: b.__uid,
key: b.__uid
}, {
default: () => [b.label || b.type]
}), e("div", {
class: N.be("setting-item", "extra")
}, [n.extraContent(b)])]))) ? _ : {
default: () => [_]
})]
})]);
})])])],
reference: () => e(s, {
icon: ue,
text: !0,
size: V.value
}, null)
})])]
})]);
};
}
});
export {
Pe as default
};
//# sourceMappingURL=ToolBar.mjs.map