vue-bag-admin
Version:
Unified entry package for the Vue Bag Admin runtime ecosystem.
618 lines (617 loc) • 19 kB
JavaScript
import { defineComponent as B, ref as T, reactive as I, watch as F, onMounted as H, openBlock as i, createElementBlock as m, renderSlot as z, createCommentVNode as k, createElementVNode as A, toDisplayString as N, createVNode as D, unref as b, computed as C, createBlock as w, withCtx as h, Fragment as R, renderList as q, mergeProps as G, createTextVNode as O, resolveDynamicComponent as W, createSlots as Z, normalizeProps as _, guardReactiveProps as J, normalizeClass as Q, normalizeStyle as X } from "vue";
import { NDataTable as Y, NGrid as ee, NFormItemGi as te, NRadioGroup as le, NRadio as ae, NCheckboxGroup as oe, NCheckbox as re, NInputNumber as se, NDatePicker as ne, NSwitch as ie, NSelect as ue, NInput as U, NForm as de, NButton as j, NTag as ce, darkTheme as pe, enUS as fe, zhCN as ye, dateEnUS as ve, dateZhCN as ge, NConfigProvider as me, NGlobalStyle as be, NMessageProvider as xe, NDialogProvider as he } from "naive-ui";
import { getCachedDictionaryOptions as K, resolveDictionaryOptions as E } from "../core/index.js";
const ke = { class: "pm-pro-table" }, Ce = {
key: 0,
class: "mb-4 rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900/40"
}, we = {
key: 1,
class: "mb-4 flex flex-wrap items-center justify-between gap-3"
}, Pe = { class: "flex items-center gap-3" }, $e = {
key: 0,
class: "text-lg font-medium"
}, Ne = { class: "flex items-center gap-2" }, qe = /* @__PURE__ */ B({
__name: "PmProTable",
props: {
title: { default: "" },
columns: {},
request: {},
params: { default: () => ({}) },
rowKey: { type: [String, Function], default: "id" },
immediate: { type: Boolean, default: !0 },
showToolbar: { type: Boolean, default: !0 },
showRefresh: { type: Boolean, default: !0 }
},
setup(l, { expose: p }) {
const d = l, y = T(!1), g = T([]), f = I({
page: 1,
pageSize: 10,
itemCount: 0,
showSizePicker: !0,
pageSizes: [10, 20, 50]
}), a = (n) => {
if (typeof d.rowKey == "function")
return d.rowKey(n);
const x = d.rowKey;
return n[x];
}, u = async () => {
y.value = !0;
try {
const n = await d.request({
page: f.page,
pageSize: f.pageSize,
...d.params
});
g.value = n.list, f.itemCount = n.total;
} catch (n) {
console.error("Failed to fetch table data", n);
} finally {
y.value = !1;
}
}, s = (n) => {
f.page = n, u();
}, P = (n) => {
f.page = 1, f.pageSize = n, u();
}, $ = (n) => {
n != null && n.resetPage && (f.page = 1), u();
}, V = () => {
f.page = 1, f.pageSize = 10, u();
};
return F(
() => d.params,
() => {
$({ resetPage: !0 });
},
{ deep: !0 }
), H(() => {
d.immediate && u();
}), p({
reload: $,
reset: V
}), (n, x) => (i(), m("div", ke, [
n.$slots.search ? (i(), m("div", Ce, [
z(n.$slots, "search", {
reload: $,
reset: V
})
])) : k("", !0),
l.title || l.showToolbar || n.$slots.toolbar ? (i(), m("div", we, [
A("div", Pe, [
l.title ? (i(), m("h3", $e, N(l.title), 1)) : k("", !0),
z(n.$slots, "toolbar-prefix")
]),
A("div", Ne, [
z(n.$slots, "toolbar", {
reload: $,
loading: y.value
}),
l.showRefresh ? (i(), m("button", {
key: 0,
type: "button",
class: "rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-600 transition-colors hover:border-orange-300 hover:text-orange-500 dark:border-slate-700 dark:text-slate-300",
onClick: x[0] || (x[0] = (S) => $())
}, " 刷新 ")) : k("", !0)
])
])) : k("", !0),
D(b(Y), {
columns: l.columns,
data: g.value,
loading: y.value,
pagination: f,
remote: !0,
"row-key": a,
"onUpdate:page": s,
"onUpdate:pageSize": P
}, null, 8, ["columns", "data", "loading", "pagination"])
]));
}
}), Ve = { class: "flex flex-wrap gap-3" }, ze = { class: "flex flex-wrap gap-3" }, Se = {
key: 4,
class: "mt-2 text-xs leading-5 text-slate-400 dark:text-slate-500"
}, De = /* @__PURE__ */ B({
__name: "PmSchemaForm",
props: {
modelValue: {
type: Object,
required: !0
},
schemas: {
type: Array,
required: !0
},
cols: {
type: [String, Number],
default: "1 s:1 m:2 l:2"
},
xGap: {
type: Number,
default: 16
},
yGap: {
type: Number,
default: 8
}
},
emits: ["update:modelValue"],
setup(l, { emit: p }) {
const d = l, y = p, g = T({}), f = {
input: U,
textarea: U,
select: ue,
switch: ie,
date: ne,
number: se
}, a = C(
() => d.schemas.filter((e) => typeof e.visible == "function" ? e.visible(d.modelValue, e) : e.visible !== !1)
), u = (e) => d.modelValue[e], s = (e) => {
const t = u(e);
return typeof t == "string" || typeof t == "number" || typeof t == "boolean" || t == null ? t : void 0;
}, P = (e) => {
const t = u(e);
return Array.isArray(t) ? t.filter(
(o) => typeof o == "string" || typeof o == "number"
) : [];
}, $ = (e) => ({
label: e.label,
value: e.value,
disabled: "disabled" in e ? e.disabled : void 0
}), V = (e) => (e.options ?? (e.dictCode ? g.value[e.dictCode] ?? [] : [])).map($), n = (e) => V(e).filter(
(t) => typeof t.value == "string" || typeof t.value == "number"
), x = (e, t) => {
y("update:modelValue", {
...d.modelValue,
[e]: t
});
}, S = (e) => typeof e.disabled == "function" ? e.disabled(d.modelValue, e) : e.disabled === !0, M = (e) => f[e] ?? U, L = async () => {
const e = {};
await Promise.all(
d.schemas.map(async (t) => {
if (!t.dictCode) return;
const o = K(t.dictCode);
o.length > 0 && (e[t.dictCode] = o);
try {
e[t.dictCode] = await E(t.dictCode);
} catch (v) {
console.error(`[PmSchemaForm] failed to resolve dictionary: ${t.dictCode}`, v);
}
})
), g.value = e;
}, r = (e) => {
if (e.placeholder) return e.placeholder;
if (e.label)
return e.component === "select" || e.component === "date" ? `请选择${e.label}` : `请输入${e.label}`;
}, c = (e) => {
const t = {
placeholder: r(e)
}, o = V(e);
return e.component === "input" && (t.size = "large", t.clearable = !0), e.component === "textarea" && (t.type = "textarea", t.size = "large", t.clearable = !0, t.autosize = { minRows: 4, maxRows: 6 }), e.component === "select" && (t.size = "large", t.clearable = !0, t.options = o), e.component === "date" && (t.type = "date", t.clearable = !0), e.component === "number" && (t.size = "large"), {
...t,
...e.componentProps
};
};
return F(
() => d.schemas,
() => {
L();
},
{ deep: !0, immediate: !0 }
), (e, t) => (i(), w(b(ee), {
cols: l.cols,
"x-gap": l.xGap,
"y-gap": l.yGap
}, {
default: h(() => [
(i(!0), m(R, null, q(a.value, (o) => (i(), w(b(te), G({
key: o.field,
span: o.span ?? 24,
path: o.field,
label: o.label
}, { ref_for: !0 }, o.formItemProps), {
default: h(() => [
o.component === "slot" ? z(e.$slots, o.slotName || o.field, {
key: 0,
schema: o,
values: l.modelValue,
setFieldValue: x
}) : o.component === "radio" ? (i(), w(b(le), G({
key: 1,
value: s(o.field),
disabled: S(o)
}, { ref_for: !0 }, c(o), {
"onUpdate:value": (v) => x(o.field, v)
}), {
default: h(() => [
A("div", Ve, [
(i(!0), m(R, null, q(V(o), (v) => (i(), w(b(ae), {
key: `${o.field}-${String(v.value)}`,
value: v.value,
disabled: v.disabled
}, {
default: h(() => [
O(N(v.label), 1)
]),
_: 2
}, 1032, ["value", "disabled"]))), 128))
])
]),
_: 2
}, 1040, ["value", "disabled", "onUpdate:value"])) : o.component === "checkbox" ? (i(), w(b(oe), G({
key: 2,
value: P(o.field),
disabled: S(o)
}, { ref_for: !0 }, c(o), {
"onUpdate:value": (v) => x(o.field, v)
}), {
default: h(() => [
A("div", ze, [
(i(!0), m(R, null, q(n(o), (v) => (i(), w(b(re), {
key: `${o.field}-${String(v.value)}`,
value: v.value,
disabled: v.disabled
}, {
default: h(() => [
O(N(v.label), 1)
]),
_: 2
}, 1032, ["value", "disabled"]))), 128))
])
]),
_: 2
}, 1040, ["value", "disabled", "onUpdate:value"])) : (i(), w(W(M(o.component)), G({
key: 3,
value: u(o.field),
disabled: S(o)
}, { ref_for: !0 }, c(o), {
"onUpdate:value": (v) => x(o.field, v)
}), null, 16, ["value", "disabled", "onUpdate:value"])),
o.description ? (i(), m("p", Se, N(o.description), 1)) : k("", !0)
]),
_: 2
}, 1040, ["span", "path", "label"]))), 128))
]),
_: 3
}, 8, ["cols", "x-gap", "y-gap"]));
}
}), Te = { class: "pm-pro-form space-y-5" }, Fe = {
key: 0,
class: "flex flex-wrap items-start justify-between gap-4"
}, Ae = {
key: 0,
class: "text-lg font-semibold text-slate-900 dark:text-white"
}, Oe = {
key: 1,
class: "mt-1 text-sm leading-6 text-slate-500 dark:text-slate-400"
}, Ue = /* @__PURE__ */ B({
__name: "PmProForm",
props: {
modelValue: {
type: Object,
default: () => ({})
},
schemas: {
type: Array,
required: !0
},
title: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
cols: {
type: [String, Number],
default: "1 s:1 m:2 l:2"
},
xGap: {
type: Number,
default: 16
},
yGap: {
type: Number,
default: 8
},
showActions: {
type: Boolean,
default: !0
},
showSubmit: {
type: Boolean,
default: !0
},
showReset: {
type: Boolean,
default: !0
},
submitText: {
type: String,
default: "保存"
},
resetText: {
type: String,
default: "重置"
},
submitLoading: {
type: Boolean,
default: !1
},
labelPlacement: {
type: String,
default: "top"
},
requireMarkPlacement: {
type: String,
default: "right-hanging"
},
actionsAlign: {
type: String,
default: "left"
}
},
emits: ["update:modelValue", "submit", "reset"],
setup(l, { expose: p, emit: d }) {
const y = l, g = d, f = T(null), a = T({}), u = (r) => Array.isArray(r) ? [...r] : r && typeof r == "object" ? { ...r } : r, s = (r, c) => {
const e = { ...c };
return r.forEach((t) => {
!(t.field in e) && t.defaultValue !== void 0 && (e[t.field] = u(t.defaultValue));
}), e;
}, P = C(
() => y.schemas.map((r) => ({
field: r.field,
name: r.slotName || r.field
}))
);
F(
() => [y.modelValue, y.schemas],
([r, c]) => {
a.value = s(c, r);
},
{ deep: !0, immediate: !0 }
), F(
a,
(r) => {
g("update:modelValue", { ...r });
},
{ deep: !0 }
);
const $ = C(() => {
const r = {};
return y.schemas.forEach((c) => {
const e = Array.isArray(c.rules) ? [...c.rules] : [];
c.required && e.unshift({
required: !0,
message: c.placeholder || (c.component === "select" || c.component === "date" ? `请选择${c.label ?? c.field}` : `请输入${c.label ?? c.field}`),
trigger: ["input", "blur", "change"]
}), e.length > 0 && (r[c.field] = e);
}), r;
}), V = C(
() => y.actionsAlign === "right" ? "justify-end" : "justify-start"
), n = async () => {
var r;
try {
return await ((r = f.value) == null ? void 0 : r.validate()), !0;
} catch {
return !1;
}
}, x = () => {
var r;
a.value = s(y.schemas, {}), (r = f.value) == null || r.restoreValidation(), g("reset", { ...a.value });
}, S = async () => {
await n() && g("submit", {
values: { ...a.value },
reset: x
});
};
return p({
validate: n,
reset: x,
setValues: (r) => {
a.value = {
...a.value,
...r
};
},
getValues: () => ({ ...a.value })
}), (r, c) => (i(), m("div", Te, [
l.title || l.description || r.$slots.extra ? (i(), m("div", Fe, [
A("div", null, [
l.title ? (i(), m("h3", Ae, N(l.title), 1)) : k("", !0),
l.description ? (i(), m("p", Oe, N(l.description), 1)) : k("", !0)
]),
z(r.$slots, "extra", { values: a.value })
])) : k("", !0),
D(b(de), {
ref_key: "formRef",
ref: f,
model: a.value,
rules: $.value,
"label-placement": l.labelPlacement,
"require-mark-placement": l.requireMarkPlacement,
class: "space-y-1"
}, {
default: h(() => [
D(De, {
modelValue: a.value,
"onUpdate:modelValue": c[0] || (c[0] = (e) => a.value = e),
schemas: l.schemas,
cols: l.cols,
"x-gap": l.xGap,
"y-gap": l.yGap
}, Z({ _: 2 }, [
q(P.value, (e) => ({
name: e.name,
fn: h((t) => [
z(r.$slots, e.name, _(J(t)))
])
}))
]), 1032, ["modelValue", "schemas", "cols", "x-gap", "y-gap"])
]),
_: 3
}, 8, ["model", "rules", "label-placement", "require-mark-placement"]),
l.showActions || r.$slots.actions ? (i(), m("div", {
key: 1,
class: Q(["flex flex-wrap gap-3 border-t border-slate-200/70 pt-5 dark:border-slate-800/80", V.value])
}, [
z(r.$slots, "actions", {
values: a.value,
submit: S,
reset: x
}),
l.showActions ? (i(), m(R, { key: 0 }, [
l.showReset ? (i(), w(b(j), {
key: 0,
secondary: "",
size: "large",
onClick: x
}, {
default: h(() => [
O(N(l.resetText), 1)
]),
_: 1
})) : k("", !0),
l.showSubmit ? (i(), w(b(j), {
key: 1,
type: "primary",
size: "large",
loading: l.submitLoading,
onClick: S
}, {
default: h(() => [
O(N(l.submitText), 1)
]),
_: 1
}, 8, ["loading"])) : k("", !0)
], 64)) : k("", !0)
], 2)) : k("", !0)
]));
}
}), Me = /* @__PURE__ */ B({
__name: "PmDictTag",
props: {
code: {
type: String,
required: !0
},
value: {
type: [String, Number, Boolean],
required: !0
},
fallback: {
type: String,
default: "--"
}
},
setup(l) {
const p = l, d = T([]), y = async () => {
const s = K(p.code);
s.length > 0 && (d.value = s);
try {
d.value = await E(p.code);
} catch (P) {
console.error(`[PmDictTag] failed to resolve dictionary: ${p.code}`, P);
}
}, g = C(() => d.value.find((s) => s.value === p.value)), f = C(() => {
var s;
return ((s = g.value) == null ? void 0 : s.label) ?? p.fallback;
}), a = C(() => {
var s;
return ((s = g.value) == null ? void 0 : s.tagType) ?? "default";
}), u = C(() => {
const s = g.value;
if (!(!(s != null && s.color) && !(s != null && s.textColor)))
return {
backgroundColor: s.color,
color: s.textColor
};
});
return F(
() => p.code,
() => {
y();
},
{ immediate: !0 }
), (s, P) => (i(), w(b(ce), {
round: "",
size: "small",
type: a.value,
bordered: !1,
style: X(u.value)
}, {
default: h(() => [
O(N(f.value), 1)
]),
_: 1
}, 8, ["type", "style"]));
}
}), Le = /* @__PURE__ */ B({
__name: "BagUiProvider",
props: {
lang: { default: "zh-CN" },
theme: { default: "light" },
themeColor: { default: "#f97316" },
themeColorHover: { default: void 0 },
themeColorPressed: { default: void 0 },
themeColorSuppl: { default: void 0 }
},
setup(l) {
const p = l, d = C(() => {
const a = p.themeColor, u = p.themeColorHover ?? a, s = p.themeColorPressed ?? a, P = p.themeColorSuppl ?? u;
return {
common: {
primaryColor: a,
primaryColorHover: u,
primaryColorPressed: s,
primaryColorSuppl: P
},
Select: {
peers: {
InternalSelection: {
borderFocus: `1px solid ${a}`,
borderHover: `1px solid ${u}`,
boxShadowFocus: `0 0 0 2px ${a}33`,
boxShadowActive: `0 0 0 2px ${a}33`
}
}
}
};
}), y = C(() => p.theme === "dark" ? pe : null), g = C(() => {
var u;
const a = (u = p.lang) == null ? void 0 : u.toLowerCase();
return a === "en" || a != null && a.startsWith("en") ? fe : ye;
}), f = C(() => {
var u;
const a = (u = p.lang) == null ? void 0 : u.toLowerCase();
return a === "en" || a != null && a.startsWith("en") ? ve : ge;
});
return (a, u) => (i(), w(b(me), {
locale: g.value,
"date-locale": f.value,
theme: y.value,
"theme-overrides": d.value
}, {
default: h(() => [
D(b(be)),
D(b(xe), null, {
default: h(() => [
D(b(he), null, {
default: h(() => [
z(a.$slots, "default")
]),
_: 3
})
]),
_: 3
})
]),
_: 3
}, 8, ["locale", "date-locale", "theme", "theme-overrides"]));
}
});
export {
Le as BagUiProvider,
Me as PmDictTag,
Ue as PmProForm,
qe as PmProTable,
De as PmSchemaForm
};