@aplus-frontend/ui
Version:
268 lines (267 loc) • 8.74 kB
JavaScript
import { defineComponent as re, ref as v, computed as pe, toRef as ue, useSlots as ce, createVNode as l, cloneVNode as me, unref as e, watch as O, createElementBlock as U, openBlock as S, Fragment as de, createBlock as w, createCommentVNode as E, resolveDynamicComponent as A, withCtx as o, withDirectives as fe, createElementVNode as c, normalizeClass as p, toDisplayString as g, createTextVNode as C, isRef as ve, vShow as ge } from "vue";
import { SettingOutlined as ye, SaveOutlined as Se } from "@ant-design/icons-vue";
import { Button as P, Modal as Te, Divider as B, RadioGroup as be, RadioButton as j, Flex as ke, Space as F, Popover as Ce } from "@aplus-frontend/antdv";
import "../../../../ap-button/index.mjs";
import { randomStr as he } from "../../../../utils/index.mjs";
import "../../../../config-provider/index.mjs";
import { getSingleVNode as _e } from "../../../../utils/slot.mjs";
import { useInjectApTable as ze } from "../../../context.mjs";
import { useTableColumnState as xe } from "../../../hooks/use-table-column-state.mjs";
import { useTableTemplateStorage as we } from "../../../hooks/use-table-template-storage.mjs";
import Ae from "../../../style/setting.mjs";
import { useProvideApColumnSetting as Be } from "../context.mjs";
import "../sorter/index.vue.mjs";
import "../template/edit-form.vue.mjs";
import "../template/index.vue.mjs";
import "../tree-select/index.vue.mjs";
import Ne, { customCloneColumnStates as N, isEqualColumnStateIgnoreLabel as Ie } from "../utils.mjs";
import { useLocale as $e } from "../../../../config-provider/hooks/use-locale.mjs";
import { useNamespace as M } from "../../../../config-provider/hooks/use-namespace.mjs";
import Ke from "../template/index.vue2.mjs";
import Le from "../tree-select/index.vue2.mjs";
import Re from "../sorter/index.vue2.mjs";
import Ve from "../../../../ap-button/ap-button.vue.mjs";
import De from "../template/edit-form.vue2.mjs";
const Oe = {
style: {
"padding-inline": "8px"
}
}, pt = /* @__PURE__ */ re({
name: "ApTableSetting",
__name: "index",
props: {
config: {
default: () => ({
persistenceKey: ""
})
}
},
setup(q) {
const T = q, {
columnsBackup: G,
updateSize: H,
updateColumns: J
} = ze(), m = v(), h = pe(() => T.config.persistenceKey), _ = `${h.value}__active_key`, b = v(!1), {
basicTemplate: Q,
customizeTemplateList: d,
addTemplate: W,
deleteTemplate: I,
updateTemplate: X
} = we(T.config, h), {
columnState: u,
setColumnState: $,
isAllSelected: Y,
toggleSelectAll: Z
} = xe([]), i = v(localStorage.getItem(_) ?? d.value?.[0].key);
Be({
activeKey: i,
cacheConfig: ue(T, "config"),
deleteTemplate: ie
});
const {
t: s
} = $e(), {
b: f,
be: k
} = M("ap-column-setting"), {
b: ee
} = M("ap-table"), te = Ae("ap-column-setting"), y = v(!1), K = v(!1), ae = ce(), L = _e(ae.trigger) || l(P, {
icon: l(ye, null, null),
class: ee("setting-trigger-button")
}, null), R = L ? me(L, {
onClick: () => {
y.value = !0;
}
}) : null;
function le() {
$(N(e(Q).columnState));
}
function V(a, t) {
J?.(Ne(e(G), a)), H?.(t);
}
function ne() {
V(e(u), e(m)), y.value = !1;
const a = N(u.value), t = X(i.value, {
columnState: a,
size: m.value
});
localStorage.setItem(_, i.value), T.config?.onChange?.(a, t);
}
function oe(a) {
const t = he();
W({
key: t,
label: a,
columnState: u.value,
size: m.value
}), b.value = !1, i.value = t;
}
function D(a) {
const t = [...d.value].find((n) => n?.key === a);
t && ($(N(t.columnState)), m.value = t.size);
}
function ie(a) {
if (a !== i.value) {
I(a);
return;
}
const t = d.value, n = t.findIndex((x) => x.key === a), r = t[n + 1]?.key ?? t[n - 1]?.key;
I(a), i.value = r;
}
function se(a) {
if (K.value = a, !a) {
const t = localStorage.getItem(_);
t && t !== i.value && (i.value = t);
}
}
O(() => i.value, (a, t) => {
if (!t && a) {
const n = [...d.value].find((r) => r?.key === a);
if (!n)
return;
V(n.columnState, n.size);
}
D(a);
}, {
immediate: !0
});
const z = v(!1);
return O([m, u, y], ([a, t, n]) => {
if (!n)
return;
const r = d.value.find((x) => x.key === i.value);
r && (r.size !== a || !Ie(t, r.columnState)) ? z.value = !0 : z.value = !1;
}, {
deep: !0
}), (a, t) => (S(), U(de, null, [e(R) ? (S(), w(A(e(R)), {
key: 0
})) : E("", !0), l(e(Te), {
open: y.value,
"onUpdate:open": t[4] || (t[4] = (n) => y.value = n),
title: e(s)("ap.apTable.setting.title"),
width: 1e3,
centered: !0,
"body-style": {
padding: "0px !important",
height: "516px"
},
"after-open-change": se,
"wrap-class-name": `${e(f)()} ${e(te)}`,
"ok-text": e(s)("ap.apTable.setting.saveAndApply"),
onOk: ne
}, {
footer: o(({
extra: n
}) => [l(e(ke), {
justify: "space-between"
}, {
default: o(() => [l(e(F), {
size: 12
}, {
default: o(() => [l(e(Ce), {
open: b.value,
"onUpdate:open": t[3] || (t[3] = (r) => b.value = r),
trigger: "click",
arrow: !1,
placement: "topLeft",
"destroy-tooltip-on-hide": ""
}, {
content: o(() => [l(De, {
onConfirm: oe,
onCancel: t[2] || (t[2] = () => b.value = !1)
})]),
default: o(() => [l(e(Ve), {
type: "borderLink",
disabled: !a.config.persistenceKey
}, {
icon: o(() => [l(e(Se))]),
default: o(() => [C(g(e(s)("ap.apTable.setting.saveAsTemplate")) + " ", 1)]),
_: 1
}, 8, ["disabled"])]),
_: 1
}, 8, ["open"]), z.value ? (S(), U("span", {
key: 0,
class: p(e(f)("modify-tip"))
}, g(e(s)("ap.apTable.setting.modifyNotification")), 3)) : E("", !0)]),
_: 1
}), l(e(F), {
size: 10
}, {
default: o(() => [(S(), w(A(n.cancelBtn))), (S(), w(A(n.okBtn)))]),
_: 2
}, 1024)]),
_: 2
}, 1024)]),
default: o(() => [fe(c("div", {
class: p(e(f)("wrapper"))
}, [c("div", {
class: p(e(f)("left"))
}, [l(Ke, {
"customize-template-list": e(d),
"persistence-key": h.value,
onActiveChange: D
}, null, 8, ["customize-template-list", "persistence-key"])], 2), l(e(B), {
type: "vertical",
style: {
height: "100%",
margin: "0px"
}
}), c("div", {
class: p(e(f)("center"))
}, [c("div", {
class: p(e(k)("center", "header"))
}, [c("div", {
class: p(e(k)("center", "tip-wrapper"))
}, [c("span", {
class: p(e(k)("center", "header-tips"))
}, g(e(s)("ap.apTable.setting.selectAllTip")), 3), l(e(P), {
type: "link",
size: "small",
onClick: e(Z)
}, {
default: o(() => [C(g(e(Y) ? e(s)("ap.apTable.setting.unSelectAll") : e(s)("ap.apTable.setting.selectAll")), 1)]),
_: 1
}, 8, ["onClick"])], 2), l(e(be), {
value: m.value,
"onUpdate:value": t[0] || (t[0] = (n) => m.value = n)
}, {
default: o(() => [l(e(j), {
value: "small"
}, {
default: o(() => [C(g(e(s)("ap.apTable.setting.sizeSmall")), 1)]),
_: 1
}), l(e(j), {
value: "middle"
}, {
default: o(() => [C(g(e(s)("ap.apTable.setting.sizeNormal")), 1)]),
_: 1
})]),
_: 1
}, 8, ["value"])], 2), c("div", Oe, [l(e(B), {
dashed: "",
style: {
margin: "0px"
}
})]), l(Le, {
class: p(e(k)("center", "content")),
value: e(u)
}, null, 8, ["class", "value"])], 2), l(e(B), {
type: "vertical",
style: {
height: "100%",
margin: "0px"
}
}), c("div", {
class: p(e(f)("right"))
}, [l(Re, {
value: e(u),
"onUpdate:value": t[1] || (t[1] = (n) => ve(u) ? u.value = n : null),
onReset: le
}, null, 8, ["value"])], 2)], 2), [[ge, K.value]])]),
_: 1
}, 8, ["open", "title", "wrap-class-name", "ok-text"])], 64));
}
});
export {
pt as default
};