@lumal/vben-compat 0.0.4-beta → 0.0.6-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/README.md +24 -3
- package/dist/index.cjs +1 -1
- package/dist/index.js +2 -287
- package/dist/legacy.cjs +1 -0
- package/dist/legacy.js +2 -0
- package/dist/src/legacy.d.ts +2 -0
- package/dist/src/legacy.d.ts.map +1 -0
- package/dist/src/v5/AccessControl.vue.d.ts +22 -0
- package/dist/src/v5/AccessControl.vue.d.ts.map +1 -0
- package/dist/src/v5/V5Form.vue.d.ts +23 -0
- package/dist/src/v5/V5Form.vue.d.ts.map +1 -0
- package/dist/src/v5/V5Grid.vue.d.ts +28 -0
- package/dist/src/v5/V5Grid.vue.d.ts.map +1 -0
- package/dist/src/v5/access.d.ts +9 -0
- package/dist/src/v5/access.d.ts.map +1 -0
- package/dist/src/v5/form.d.ts +25 -0
- package/dist/src/v5/form.d.ts.map +1 -0
- package/dist/src/v5/grid.d.ts +34 -0
- package/dist/src/v5/grid.d.ts.map +1 -0
- package/dist/src/v5/index.d.ts +8 -0
- package/dist/src/v5/index.d.ts.map +1 -0
- package/dist/src/v5/router.d.ts +30 -0
- package/dist/src/v5/router.d.ts.map +1 -0
- package/dist/src/v5/types.d.ts +201 -0
- package/dist/src/v5/types.d.ts.map +1 -0
- package/dist/src/v5/types.type-test.d.ts +2 -0
- package/dist/src/v5/types.type-test.d.ts.map +1 -0
- package/dist/src/v5/utils.d.ts +5 -0
- package/dist/src/v5/utils.d.ts.map +1 -0
- package/dist/src-D078O_Ix.cjs +1 -0
- package/dist/src-DnEVET3l.js +287 -0
- package/dist/v5-router.cjs +1 -0
- package/dist/v5-router.js +30 -0
- package/dist/v5.cjs +1 -0
- package/dist/v5.js +727 -0
- package/dist/vben-compat.css +2 -0
- package/package.json +22 -3
package/dist/v5.js
ADDED
|
@@ -0,0 +1,727 @@
|
|
|
1
|
+
import { adaptVbenMenus as e, adaptVbenRouteMeta as t } from "./v5-router.js";
|
|
2
|
+
import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createSlots as s, createTextVNode as c, createVNode as l, defineComponent as u, h as d, nextTick as f, onBeforeUnmount as p, onMounted as m, onScopeDispose as h, openBlock as g, renderList as _, renderSlot as v, shallowRef as y, toDisplayString as b, unref as x, useTemplateRef as S, vShow as C, watchEffect as w, withCtx as T, withDirectives as E } from "vue";
|
|
3
|
+
import { usePermissionStore as D } from "@lumal/core/permission";
|
|
4
|
+
import { LumalPagination as O, LumalSchemaForm as k, LumalSchemaTable as A } from "@lumal/core/components";
|
|
5
|
+
import { LumalIcon as j } from "@lumal/icons-vue";
|
|
6
|
+
//#region src/v5/access.ts
|
|
7
|
+
function M(e = D()) {
|
|
8
|
+
return {
|
|
9
|
+
hasAccessByCodes: (t) => t.length > 0 && e.hasPermission(t, "some"),
|
|
10
|
+
hasAccessByRoles: (t) => t.length > 0 && e.hasRole(t, "some")
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
function N(e, t = "frontend") {
|
|
14
|
+
let n = /* @__PURE__ */ new WeakMap();
|
|
15
|
+
function r(r, i) {
|
|
16
|
+
n.get(r)?.();
|
|
17
|
+
let a = r.style.display, o = w(() => {
|
|
18
|
+
let n = i.value, o = Array.isArray(n) ? n : [n];
|
|
19
|
+
if (i.arg && !["role", "code"].includes(i.arg)) throw Error("[lumal/v5] v-access 仅支持 code/role");
|
|
20
|
+
let s = M(e), c = n == null || (t === "frontend" && i.arg === "role" ? s.hasAccessByRoles(o) : s.hasAccessByCodes(o));
|
|
21
|
+
r.style.display = c ? a : "none";
|
|
22
|
+
});
|
|
23
|
+
n.set(r, () => {
|
|
24
|
+
o(), r.style.display = a;
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
return {
|
|
28
|
+
mounted: r,
|
|
29
|
+
updated: r,
|
|
30
|
+
unmounted(e) {
|
|
31
|
+
n.get(e)?.(), n.delete(e);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/v5/AccessControl.vue
|
|
37
|
+
var P = /* @__PURE__ */ u({
|
|
38
|
+
__name: "AccessControl",
|
|
39
|
+
props: {
|
|
40
|
+
codes: { default: () => [] },
|
|
41
|
+
type: { default: "role" }
|
|
42
|
+
},
|
|
43
|
+
setup(e) {
|
|
44
|
+
let t = e, r = M(), a = n(() => t.type === "code" ? r.hasAccessByCodes(t.codes) : r.hasAccessByRoles(t.codes));
|
|
45
|
+
return (e, t) => a.value ? v(e.$slots, "default", { key: 0 }) : i("", !0);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/v5/utils.ts
|
|
50
|
+
function F(e, t, n) {
|
|
51
|
+
let r = Object.keys(e).filter((e) => !t.includes(e));
|
|
52
|
+
if (r.length) throw Error(`[lumal/v5] ${n} 暂不支持:${r.join(", ")}`);
|
|
53
|
+
}
|
|
54
|
+
function I(e, t = []) {
|
|
55
|
+
let n = Object.keys(e).filter((e) => ![
|
|
56
|
+
"class",
|
|
57
|
+
"style",
|
|
58
|
+
"id",
|
|
59
|
+
"title",
|
|
60
|
+
"role",
|
|
61
|
+
"tabindex",
|
|
62
|
+
...t
|
|
63
|
+
].includes(e) && !/^(?:data-|aria-|on[A-Z])/.test(e));
|
|
64
|
+
if (n.length) throw Error(`[lumal/v5] 组件配置请通过 hook 或 api.setState 更新:${n.join(", ")}`);
|
|
65
|
+
}
|
|
66
|
+
function L(e) {
|
|
67
|
+
return e instanceof Date ? new Date(e.getTime()) : Array.isArray(e) ? e.map((e) => L(e)) : e && typeof e == "object" ? Object.fromEntries(Object.entries(e).map(([e, t]) => [e, L(t)])) : e;
|
|
68
|
+
}
|
|
69
|
+
//#endregion
|
|
70
|
+
//#region src/v5/V5Form.vue?vue&type=script&setup=true&lang.ts
|
|
71
|
+
var R = { class: "lumal-v5-form" }, z = {
|
|
72
|
+
key: 0,
|
|
73
|
+
role: "alert"
|
|
74
|
+
}, B = /* @__PURE__ */ u({
|
|
75
|
+
__name: "V5Form",
|
|
76
|
+
props: { controller: {} },
|
|
77
|
+
setup(e) {
|
|
78
|
+
let t = e, r = S("formRef"), o = n(() => t.controller.state.value), c = n(() => Number(o.value.wrapperClass?.match(/(?:^|\s)grid-cols-(\d+)/)?.[1] ?? 1));
|
|
79
|
+
return m(() => {
|
|
80
|
+
r.value && t.controller.mount(r.value);
|
|
81
|
+
}), p(() => t.controller.unmount()), (t, n) => (g(), a("div", R, [e.controller.failure.value ? (g(), a("p", z, b(e.controller.failure.value), 1)) : i("", !0), l(x(k), {
|
|
82
|
+
ref_key: "formRef",
|
|
83
|
+
ref: r,
|
|
84
|
+
"model-value": e.controller.values.value,
|
|
85
|
+
schemas: e.controller.schemas.value,
|
|
86
|
+
columns: c.value,
|
|
87
|
+
disabled: o.value.commonConfig?.disabled,
|
|
88
|
+
"submit-disabled": o.value.submitButtonOptions?.disabled,
|
|
89
|
+
"label-width": o.value.commonConfig?.labelWidth,
|
|
90
|
+
"label-position": o.value.layout === "vertical" ? "top" : "right",
|
|
91
|
+
"submit-on-enter": o.value.submitOnEnter,
|
|
92
|
+
"scroll-to-first-error": o.value.scrollToFirstError ?? !1,
|
|
93
|
+
"show-actions": o.value.showDefaultActions,
|
|
94
|
+
"show-reset": o.value.resetButtonOptions?.show !== !1,
|
|
95
|
+
"submit-text": o.value.submitButtonOptions?.content,
|
|
96
|
+
"reset-text": o.value.resetButtonOptions?.content,
|
|
97
|
+
"submit-loading": e.controller.submitting.value || o.value.submitButtonOptions?.loading,
|
|
98
|
+
"onUpdate:modelValue": e.controller.update,
|
|
99
|
+
onValuesChange: e.controller.changed,
|
|
100
|
+
onSubmit: e.controller.submitFromUi,
|
|
101
|
+
onReset: e.controller.reset
|
|
102
|
+
}, s({ _: 2 }, [_(o.value.schema?.filter((e) => t.$slots[e.fieldName]), (n) => ({
|
|
103
|
+
name: `field-${n.fieldName}`,
|
|
104
|
+
fn: T((r) => [v(t.$slots, n.fieldName, {
|
|
105
|
+
modelValue: r.value,
|
|
106
|
+
"onUpdate:modelValue": (t) => e.controller.api.setFieldValue(n.fieldName, t),
|
|
107
|
+
values: r.model
|
|
108
|
+
})])
|
|
109
|
+
}))]), 1032, [
|
|
110
|
+
"model-value",
|
|
111
|
+
"schemas",
|
|
112
|
+
"columns",
|
|
113
|
+
"disabled",
|
|
114
|
+
"submit-disabled",
|
|
115
|
+
"label-width",
|
|
116
|
+
"label-position",
|
|
117
|
+
"submit-on-enter",
|
|
118
|
+
"scroll-to-first-error",
|
|
119
|
+
"show-actions",
|
|
120
|
+
"show-reset",
|
|
121
|
+
"submit-text",
|
|
122
|
+
"reset-text",
|
|
123
|
+
"submit-loading",
|
|
124
|
+
"onUpdate:modelValue",
|
|
125
|
+
"onValuesChange",
|
|
126
|
+
"onSubmit",
|
|
127
|
+
"onReset"
|
|
128
|
+
])]));
|
|
129
|
+
}
|
|
130
|
+
}), V = {
|
|
131
|
+
CheckboxGroup: "checkbox",
|
|
132
|
+
DatePicker: "date",
|
|
133
|
+
Input: "input",
|
|
134
|
+
InputNumber: "number",
|
|
135
|
+
InputPassword: "input",
|
|
136
|
+
InputTextarea: "textarea",
|
|
137
|
+
RadioGroup: "radio",
|
|
138
|
+
Select: "select",
|
|
139
|
+
Switch: "switch",
|
|
140
|
+
Textarea: "textarea",
|
|
141
|
+
TreeSelect: "tree-select"
|
|
142
|
+
};
|
|
143
|
+
function H(e) {
|
|
144
|
+
F(e, [
|
|
145
|
+
"schema",
|
|
146
|
+
"commonConfig",
|
|
147
|
+
"layout",
|
|
148
|
+
"wrapperClass",
|
|
149
|
+
"showDefaultActions",
|
|
150
|
+
"submitOnEnter",
|
|
151
|
+
"submitOnChange",
|
|
152
|
+
"scrollToFirstError",
|
|
153
|
+
"submitButtonOptions",
|
|
154
|
+
"resetButtonOptions",
|
|
155
|
+
"handleSubmit",
|
|
156
|
+
"handleReset",
|
|
157
|
+
"handleValuesChange"
|
|
158
|
+
], "Form"), e.commonConfig && F(e.commonConfig, [
|
|
159
|
+
"componentProps",
|
|
160
|
+
"disabled",
|
|
161
|
+
"labelWidth"
|
|
162
|
+
], "commonConfig"), e.submitButtonOptions && F(e.submitButtonOptions, [
|
|
163
|
+
"content",
|
|
164
|
+
"loading",
|
|
165
|
+
"disabled"
|
|
166
|
+
], "submitButtonOptions"), e.resetButtonOptions && F(e.resetButtonOptions, ["content", "show"], "resetButtonOptions");
|
|
167
|
+
let t = /* @__PURE__ */ new Set();
|
|
168
|
+
for (let n of e.schema ?? []) {
|
|
169
|
+
if (F(n, [
|
|
170
|
+
"fieldName",
|
|
171
|
+
"component",
|
|
172
|
+
"label",
|
|
173
|
+
"defaultValue",
|
|
174
|
+
"componentProps",
|
|
175
|
+
"rules",
|
|
176
|
+
"help",
|
|
177
|
+
"dependencies"
|
|
178
|
+
], "schema"), !V[n.component]) throw Error(`[lumal/v5] 未支持的表单组件:${n.component}`);
|
|
179
|
+
if (!n.fieldName || /[.[\]]/.test(n.fieldName) || t.has(n.fieldName)) throw Error("[lumal/v5] fieldName 必须是唯一的平面字段名,嵌套路径需应用侧映射");
|
|
180
|
+
if (t.add(n.fieldName), n.dependencies && F(n.dependencies, [
|
|
181
|
+
"triggerFields",
|
|
182
|
+
"if",
|
|
183
|
+
"show",
|
|
184
|
+
"disabled",
|
|
185
|
+
"required",
|
|
186
|
+
"componentProps"
|
|
187
|
+
], "dependencies"), n.rules && typeof n.rules == "string" && !["required", "selectRequired"].includes(n.rules)) throw Error(`[lumal/v5] 未注册的校验规则:${n.rules}`);
|
|
188
|
+
if (n.rules && typeof n.rules == "object" && typeof n.rules.safeParseAsync != "function") throw Error("[lumal/v5] rules 仅支持 required、selectRequired 或 safeParseAsync 校验器");
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
function U(e = {}) {
|
|
192
|
+
H(e);
|
|
193
|
+
let t = y({
|
|
194
|
+
showDefaultActions: !0,
|
|
195
|
+
...e
|
|
196
|
+
}), r = y({}), i = y(!1), a = y(""), o = {}, s, c = !1, l = 0, u = {}, d, p;
|
|
197
|
+
function m() {
|
|
198
|
+
return Object.fromEntries((t.value.schema ?? []).map((e) => [e.fieldName, L(e.defaultValue)]));
|
|
199
|
+
}
|
|
200
|
+
r.value = m();
|
|
201
|
+
function g() {
|
|
202
|
+
if (c) throw Error("[lumal/v5] Form 已卸载");
|
|
203
|
+
}
|
|
204
|
+
function _(e, t, n) {
|
|
205
|
+
return e === void 0 ? n : typeof e == "function" ? e(t, p) : e;
|
|
206
|
+
}
|
|
207
|
+
let v = n(() => (t.value.schema ?? []).map((e) => {
|
|
208
|
+
let n = (n) => ({
|
|
209
|
+
...t.value.commonConfig?.componentProps,
|
|
210
|
+
..._(e.componentProps, n, {}),
|
|
211
|
+
..._(e.dependencies?.componentProps, n, {}),
|
|
212
|
+
...e.component === "InputPassword" ? { type: "password" } : {}
|
|
213
|
+
});
|
|
214
|
+
return {
|
|
215
|
+
field: e.fieldName,
|
|
216
|
+
label: e.label,
|
|
217
|
+
component: V[e.component],
|
|
218
|
+
defaultValue: e.defaultValue,
|
|
219
|
+
help: e.help,
|
|
220
|
+
hidden: ({ model: t }) => !_(e.dependencies?.if, t, !0),
|
|
221
|
+
visible: ({ model: t }) => _(e.dependencies?.show, t, !0),
|
|
222
|
+
disabled: ({ model: t }) => _(e.dependencies?.disabled, t, n(t).disabled ?? !1),
|
|
223
|
+
required: ({ model: t }) => _(e.dependencies?.required, t, typeof e.rules == "string"),
|
|
224
|
+
componentProps: ({ model: e }) => n(e),
|
|
225
|
+
options: ({ model: e }) => n(e).options ?? [],
|
|
226
|
+
placeholder: typeof e.componentProps == "object" ? e.componentProps.placeholder : void 0,
|
|
227
|
+
rules: ({ model: t }) => [{ async asyncValidator(n, r) {
|
|
228
|
+
delete o[e.fieldName];
|
|
229
|
+
let i = _(e.dependencies?.required, t, typeof e.rules == "string"), a = r == null || r === "" || Array.isArray(r) && r.length === 0, s = i && a ? `${e.label}不能为空` : "";
|
|
230
|
+
if (!s && e.rules && typeof e.rules == "object") {
|
|
231
|
+
let t = await e.rules.safeParseAsync(r);
|
|
232
|
+
t.success || (s = t.error?.issues[0]?.message ?? `${e.label}不合法`);
|
|
233
|
+
}
|
|
234
|
+
if (s) throw o[e.fieldName] = s, Error(s);
|
|
235
|
+
} }]
|
|
236
|
+
};
|
|
237
|
+
}));
|
|
238
|
+
function b(e) {
|
|
239
|
+
g();
|
|
240
|
+
let n = typeof e == "function" ? e(t.value) : e, i = {
|
|
241
|
+
...t.value,
|
|
242
|
+
...n,
|
|
243
|
+
commonConfig: {
|
|
244
|
+
...t.value.commonConfig,
|
|
245
|
+
...n.commonConfig
|
|
246
|
+
},
|
|
247
|
+
submitButtonOptions: {
|
|
248
|
+
...t.value.submitButtonOptions,
|
|
249
|
+
...n.submitButtonOptions
|
|
250
|
+
},
|
|
251
|
+
resetButtonOptions: {
|
|
252
|
+
...t.value.resetButtonOptions,
|
|
253
|
+
...n.resetButtonOptions
|
|
254
|
+
}
|
|
255
|
+
};
|
|
256
|
+
H(i), t.value = i;
|
|
257
|
+
let a = new Set((i.schema ?? []).map((e) => e.fieldName));
|
|
258
|
+
r.value = {
|
|
259
|
+
...m(),
|
|
260
|
+
...Object.fromEntries(Object.entries(r.value).filter(([e]) => a.has(e)))
|
|
261
|
+
};
|
|
262
|
+
}
|
|
263
|
+
function x() {
|
|
264
|
+
Object.keys(o).forEach((e) => delete o[e]), s?.clearValidate(), a.value = "";
|
|
265
|
+
}
|
|
266
|
+
async function S() {
|
|
267
|
+
if (g(), await f(), !s) throw Error("[lumal/v5] 请先挂载 <Form />");
|
|
268
|
+
return x(), {
|
|
269
|
+
valid: await s.validate(),
|
|
270
|
+
errors: { ...o }
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
async function C() {
|
|
274
|
+
if (g(), d) return d;
|
|
275
|
+
let e = l, n = (async () => {
|
|
276
|
+
if ((await S()).valid && e === l) {
|
|
277
|
+
i.value = !0, a.value = "";
|
|
278
|
+
try {
|
|
279
|
+
let n = L(r.value);
|
|
280
|
+
return await t.value.handleSubmit?.(n), e === l ? (u = n, n) : void 0;
|
|
281
|
+
} catch (t) {
|
|
282
|
+
throw e === l && (a.value = t instanceof Error ? t.message : String(t)), t;
|
|
283
|
+
} finally {
|
|
284
|
+
e === l && (i.value = !1);
|
|
285
|
+
}
|
|
286
|
+
}
|
|
287
|
+
})();
|
|
288
|
+
d = n;
|
|
289
|
+
try {
|
|
290
|
+
return await n;
|
|
291
|
+
} finally {
|
|
292
|
+
d === n && (d = void 0);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
p = {
|
|
296
|
+
get isMounted() {
|
|
297
|
+
return !!s;
|
|
298
|
+
},
|
|
299
|
+
async getValues() {
|
|
300
|
+
return g(), L(r.value);
|
|
301
|
+
},
|
|
302
|
+
async setValues(e, n = !0, i = !1) {
|
|
303
|
+
g();
|
|
304
|
+
let a = new Set((t.value.schema ?? []).map((e) => e.fieldName));
|
|
305
|
+
r.value = {
|
|
306
|
+
...r.value,
|
|
307
|
+
...L(Object.fromEntries(Object.entries(e).filter(([e]) => !n || a.has(e))))
|
|
308
|
+
}, await f(), i && await S();
|
|
309
|
+
},
|
|
310
|
+
async setFieldValue(e, t, n = !1) {
|
|
311
|
+
await p.setValues({ [e]: t }, !0, n);
|
|
312
|
+
},
|
|
313
|
+
async resetForm(e) {
|
|
314
|
+
g(), r.value = {
|
|
315
|
+
...m(),
|
|
316
|
+
...L(e?.values ?? {})
|
|
317
|
+
}, await f(), x();
|
|
318
|
+
},
|
|
319
|
+
async resetValidate() {
|
|
320
|
+
g(), x();
|
|
321
|
+
},
|
|
322
|
+
validate: S,
|
|
323
|
+
submitForm: async (e) => (e?.preventDefault(), C()),
|
|
324
|
+
validateAndSubmitForm: C,
|
|
325
|
+
getState: () => t.value,
|
|
326
|
+
setState: b,
|
|
327
|
+
updateSchema: (e) => b({ schema: (t.value.schema ?? []).map((t) => ({
|
|
328
|
+
...t,
|
|
329
|
+
...e.find((e) => e.fieldName === t.fieldName)
|
|
330
|
+
})) }),
|
|
331
|
+
removeSchemaByFields: async (e) => b({ schema: t.value.schema?.filter((t) => !e.includes(t.fieldName)) }),
|
|
332
|
+
getLatestSubmissionValues: () => L(u)
|
|
333
|
+
};
|
|
334
|
+
function w() {
|
|
335
|
+
l += 1, s = void 0, d = void 0, i.value = !1, u = {}, x();
|
|
336
|
+
}
|
|
337
|
+
return h(() => {
|
|
338
|
+
w(), c = !0;
|
|
339
|
+
}, !0), {
|
|
340
|
+
api: p,
|
|
341
|
+
state: t,
|
|
342
|
+
values: r,
|
|
343
|
+
schemas: v,
|
|
344
|
+
submitting: i,
|
|
345
|
+
failure: a,
|
|
346
|
+
mount(e) {
|
|
347
|
+
if (g(), s) throw Error("[lumal/v5] 每个 useVbenForm 只能同时挂载一个 Form");
|
|
348
|
+
s = e;
|
|
349
|
+
},
|
|
350
|
+
unmount: w,
|
|
351
|
+
update(e) {
|
|
352
|
+
r.value = e;
|
|
353
|
+
},
|
|
354
|
+
changed(e, n) {
|
|
355
|
+
t.value.handleValuesChange?.(L(e), n), t.value.submitOnChange && C().catch(() => {});
|
|
356
|
+
},
|
|
357
|
+
async reset() {
|
|
358
|
+
await p.resetForm(), await t.value.handleReset?.();
|
|
359
|
+
},
|
|
360
|
+
async submitFromUi() {
|
|
361
|
+
await C().catch(() => {});
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
}
|
|
365
|
+
function W(e = {}) {
|
|
366
|
+
let t = U(e);
|
|
367
|
+
return [u({
|
|
368
|
+
name: "LumalVben5Form",
|
|
369
|
+
inheritAttrs: !1,
|
|
370
|
+
setup: (e, { attrs: n, slots: r }) => () => (I(n), d(B, {
|
|
371
|
+
...n,
|
|
372
|
+
controller: t
|
|
373
|
+
}, r))
|
|
374
|
+
}), t.api];
|
|
375
|
+
}
|
|
376
|
+
//#endregion
|
|
377
|
+
//#region src/v5/V5Grid.vue?vue&type=script&setup=true&lang.ts
|
|
378
|
+
var G = { class: "lumal-v5-grid" }, K = {
|
|
379
|
+
key: 1,
|
|
380
|
+
class: "lumal-v5-grid__error",
|
|
381
|
+
role: "alert"
|
|
382
|
+
}, q = /*#__PURE__*/ ((e, t) => {
|
|
383
|
+
let n = e.__vccOpts || e;
|
|
384
|
+
for (let [e, r] of t) n[e] = r;
|
|
385
|
+
return n;
|
|
386
|
+
})(/* @__PURE__ */ u({
|
|
387
|
+
__name: "V5Grid",
|
|
388
|
+
props: {
|
|
389
|
+
controller: {},
|
|
390
|
+
tableTitle: {}
|
|
391
|
+
},
|
|
392
|
+
setup(e) {
|
|
393
|
+
let t = e, u = S("tableRef"), d = n(() => t.controller.state.value), f = n(() => d.value.gridOptions ?? {}), h = n(() => f.value.pagerConfig === !1 ? void 0 : f.value.pagerConfig), y = n(() => (f.value.columns ?? []).filter((e) => e.field && e.slots?.default)), w = t.controller.Form;
|
|
394
|
+
return m(() => {
|
|
395
|
+
u.value && t.controller.mount(u.value);
|
|
396
|
+
}), p(() => t.controller.unmount()), (t, n) => (g(), a("section", G, [
|
|
397
|
+
d.value.formOptions ? E((g(), r(x(w), {
|
|
398
|
+
key: 0,
|
|
399
|
+
class: "lumal-v5-grid__form"
|
|
400
|
+
}, null, 512)), [[C, d.value.showSearchForm]]) : i("", !0),
|
|
401
|
+
e.controller.failure.value ? (g(), a("div", K, [o("span", null, b(e.controller.failure.value instanceof Error ? e.controller.failure.value.message : String(e.controller.failure.value)), 1), o("button", {
|
|
402
|
+
type: "button",
|
|
403
|
+
onClick: n[0] ||= (...t) => e.controller.retry && e.controller.retry(...t)
|
|
404
|
+
}, " 重试 ")])) : i("", !0),
|
|
405
|
+
l(x(A), {
|
|
406
|
+
ref_key: "tableRef",
|
|
407
|
+
ref: u,
|
|
408
|
+
rows: e.controller.rows.value,
|
|
409
|
+
columns: e.controller.columns.value,
|
|
410
|
+
"row-key": f.value.rowConfig?.keyField ?? "id",
|
|
411
|
+
loading: e.controller.loading.value || f.value.loading,
|
|
412
|
+
selection: f.value.columns?.some((e) => e.type === "checkbox"),
|
|
413
|
+
"show-column-settings": f.value.toolbarConfig?.custom,
|
|
414
|
+
"table-props": {
|
|
415
|
+
border: f.value.border,
|
|
416
|
+
stripe: f.value.stripe,
|
|
417
|
+
height: f.value.height === "auto" ? void 0 : f.value.height
|
|
418
|
+
},
|
|
419
|
+
onSortChange: e.controller.changeSort,
|
|
420
|
+
onSelectionChange: e.controller.select
|
|
421
|
+
}, s({
|
|
422
|
+
"toolbar-title": T(() => [c(b(e.tableTitle ?? d.value.tableTitle), 1)]),
|
|
423
|
+
toolbar: T(() => [v(t.$slots, "toolbar-actions", {}, void 0, !0)]),
|
|
424
|
+
"toolbar-tools": T(() => [
|
|
425
|
+
v(t.$slots, "toolbar-tools", {}, void 0, !0),
|
|
426
|
+
f.value.toolbarConfig?.search && d.value.formOptions ? (g(), a("button", {
|
|
427
|
+
key: 0,
|
|
428
|
+
type: "button",
|
|
429
|
+
title: "切换查询",
|
|
430
|
+
"aria-label": "切换查询",
|
|
431
|
+
onClick: n[1] ||= (t) => e.controller.api.toggleSearchForm()
|
|
432
|
+
}, [l(x(j), { name: "lumal:filter" })])) : i("", !0),
|
|
433
|
+
f.value.toolbarConfig?.refresh === !1 ? i("", !0) : (g(), a("button", {
|
|
434
|
+
key: 1,
|
|
435
|
+
type: "button",
|
|
436
|
+
title: "刷新",
|
|
437
|
+
"aria-label": "刷新",
|
|
438
|
+
onClick: n[2] ||= (...t) => e.controller.retry && e.controller.retry(...t)
|
|
439
|
+
}, [l(x(j), { name: "lumal:refresh" })]))
|
|
440
|
+
]),
|
|
441
|
+
_: 2
|
|
442
|
+
}, [_(y.value, (e) => ({
|
|
443
|
+
name: `table-${e.field}`,
|
|
444
|
+
fn: T((n) => [v(t.$slots, e.slots.default, {
|
|
445
|
+
row: n.row,
|
|
446
|
+
rowIndex: n.index,
|
|
447
|
+
column: e
|
|
448
|
+
}, void 0, !0)])
|
|
449
|
+
}))]), 1032, [
|
|
450
|
+
"rows",
|
|
451
|
+
"columns",
|
|
452
|
+
"row-key",
|
|
453
|
+
"loading",
|
|
454
|
+
"selection",
|
|
455
|
+
"show-column-settings",
|
|
456
|
+
"table-props",
|
|
457
|
+
"onSortChange",
|
|
458
|
+
"onSelectionChange"
|
|
459
|
+
]),
|
|
460
|
+
f.value.pagerConfig !== !1 && h.value?.enabled !== !1 ? (g(), r(x(O), {
|
|
461
|
+
key: 2,
|
|
462
|
+
page: e.controller.page.value,
|
|
463
|
+
"page-size": e.controller.pageSize.value,
|
|
464
|
+
"page-sizes": h.value?.pageSizes,
|
|
465
|
+
total: e.controller.total.value,
|
|
466
|
+
onChange: e.controller.changePage
|
|
467
|
+
}, null, 8, [
|
|
468
|
+
"page",
|
|
469
|
+
"page-size",
|
|
470
|
+
"page-sizes",
|
|
471
|
+
"total",
|
|
472
|
+
"onChange"
|
|
473
|
+
])) : i("", !0)
|
|
474
|
+
]));
|
|
475
|
+
}
|
|
476
|
+
}), [["__scopeId", "data-v-dc8a8099"]]);
|
|
477
|
+
//#endregion
|
|
478
|
+
//#region src/v5/grid.ts
|
|
479
|
+
function J(e) {
|
|
480
|
+
F(e, [
|
|
481
|
+
"gridOptions",
|
|
482
|
+
"formOptions",
|
|
483
|
+
"tableTitle",
|
|
484
|
+
"showSearchForm",
|
|
485
|
+
"gridEvents"
|
|
486
|
+
], "Grid");
|
|
487
|
+
let t = e.gridOptions ?? {};
|
|
488
|
+
F(t, [
|
|
489
|
+
"columns",
|
|
490
|
+
"data",
|
|
491
|
+
"rowConfig",
|
|
492
|
+
"pagerConfig",
|
|
493
|
+
"proxyConfig",
|
|
494
|
+
"toolbarConfig",
|
|
495
|
+
"loading",
|
|
496
|
+
"height",
|
|
497
|
+
"border",
|
|
498
|
+
"stripe",
|
|
499
|
+
"showOverflow"
|
|
500
|
+
], "gridOptions"), t.toolbarConfig && F(t.toolbarConfig, [
|
|
501
|
+
"custom",
|
|
502
|
+
"refresh",
|
|
503
|
+
"search"
|
|
504
|
+
], "toolbarConfig"), t.rowConfig && F(t.rowConfig, ["keyField"], "rowConfig"), t.pagerConfig && F(t.pagerConfig, [
|
|
505
|
+
"enabled",
|
|
506
|
+
"pageSize",
|
|
507
|
+
"currentPage",
|
|
508
|
+
"pageSizes"
|
|
509
|
+
], "pagerConfig"), t.proxyConfig && (F(t.proxyConfig, [
|
|
510
|
+
"autoLoad",
|
|
511
|
+
"response",
|
|
512
|
+
"ajax"
|
|
513
|
+
], "proxyConfig"), t.proxyConfig.response && F(t.proxyConfig.response, ["result", "total"], "proxyConfig.response"), t.proxyConfig.ajax && F(t.proxyConfig.ajax, ["query"], "proxyConfig.ajax")), e.gridEvents && F(e.gridEvents, [
|
|
514
|
+
"checkboxChange",
|
|
515
|
+
"sortChange",
|
|
516
|
+
"pageChange",
|
|
517
|
+
"proxyQuery",
|
|
518
|
+
"proxyQueryError"
|
|
519
|
+
], "gridEvents");
|
|
520
|
+
for (let e of t.columns ?? []) {
|
|
521
|
+
if (F(e, [
|
|
522
|
+
"field",
|
|
523
|
+
"title",
|
|
524
|
+
"type",
|
|
525
|
+
"width",
|
|
526
|
+
"minWidth",
|
|
527
|
+
"fixed",
|
|
528
|
+
"align",
|
|
529
|
+
"visible",
|
|
530
|
+
"sortable",
|
|
531
|
+
"showOverflow",
|
|
532
|
+
"slots",
|
|
533
|
+
"formatter"
|
|
534
|
+
], "column"), e.type && !["checkbox", "seq"].includes(e.type)) throw Error(`[lumal/v5] 不支持的列类型:${e.type}`);
|
|
535
|
+
if (e.formatter && typeof e.formatter != "function") throw Error("[lumal/v5] formatter 请使用函数,VXE 全局 renderer/formatter 不可用");
|
|
536
|
+
e.slots && F(e.slots, ["default"], "column.slots");
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
function Y(e, t) {
|
|
540
|
+
return t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e);
|
|
541
|
+
}
|
|
542
|
+
function X(e, t) {
|
|
543
|
+
let n = Array.isArray(e) ? e : Y(e, t.proxyConfig?.response?.result ?? "items"), r = Array.isArray(e) ? e.length : Y(e, t.proxyConfig?.response?.total ?? "total");
|
|
544
|
+
if (!Array.isArray(n) || n.some((e) => !e || typeof e != "object" || Array.isArray(e)) || typeof r != "number" || !Number.isFinite(r) || r < 0) throw Error("[lumal/v5] 查询结果必须是数组或 { items, total },其他格式请配置 proxyConfig.response");
|
|
545
|
+
return {
|
|
546
|
+
rows: n,
|
|
547
|
+
total: r
|
|
548
|
+
};
|
|
549
|
+
}
|
|
550
|
+
function Z(e) {
|
|
551
|
+
J(e);
|
|
552
|
+
let t = y({
|
|
553
|
+
showSearchForm: !0,
|
|
554
|
+
...e
|
|
555
|
+
}), r = y(e.gridOptions?.data ?? []), i = y(r.value.length), a = y(e.gridOptions?.pagerConfig ? e.gridOptions.pagerConfig.currentPage ?? 1 : 1), o = y(e.gridOptions?.pagerConfig ? e.gridOptions.pagerConfig.pageSize ?? 10 : 10), s = y(!1), c = y(), l = y({}), u, d = 0, f = !1, p = !1, [m, g] = W({
|
|
556
|
+
...e.formOptions,
|
|
557
|
+
showDefaultActions: !0,
|
|
558
|
+
submitButtonOptions: {
|
|
559
|
+
content: "查询",
|
|
560
|
+
...e.formOptions?.submitButtonOptions
|
|
561
|
+
},
|
|
562
|
+
handleSubmit: async (e) => {
|
|
563
|
+
await t.value.formOptions?.handleSubmit?.(e), a.value = 1, await v();
|
|
564
|
+
},
|
|
565
|
+
handleReset: async () => {
|
|
566
|
+
await t.value.formOptions?.handleReset?.(), a.value = 1, await v();
|
|
567
|
+
}
|
|
568
|
+
});
|
|
569
|
+
function _() {
|
|
570
|
+
if (p) throw Error("[lumal/v5] Grid 已卸载");
|
|
571
|
+
}
|
|
572
|
+
async function v(e = {}) {
|
|
573
|
+
_();
|
|
574
|
+
let n = ++d, f = t.value.gridOptions ?? {}, m = f.proxyConfig?.ajax?.query;
|
|
575
|
+
if (m) {
|
|
576
|
+
s.value = !0, c.value = void 0;
|
|
577
|
+
try {
|
|
578
|
+
let s = {
|
|
579
|
+
...await g.getValues(),
|
|
580
|
+
...e
|
|
581
|
+
}, c = await m({
|
|
582
|
+
page: {
|
|
583
|
+
currentPage: a.value,
|
|
584
|
+
pageSize: o.value
|
|
585
|
+
},
|
|
586
|
+
sort: { ...l.value }
|
|
587
|
+
}, s);
|
|
588
|
+
if (n !== d || p) return;
|
|
589
|
+
let h = X(c, f);
|
|
590
|
+
r.value = h.rows, i.value = h.total, u?.clearSelection(), t.value.gridEvents?.proxyQuery?.({ result: c });
|
|
591
|
+
} catch (e) {
|
|
592
|
+
if (n !== d || p) return;
|
|
593
|
+
throw c.value = e, t.value.gridEvents?.proxyQueryError?.({ error: e }), e;
|
|
594
|
+
} finally {
|
|
595
|
+
n === d && (s.value = !1);
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
}
|
|
599
|
+
function b(e) {
|
|
600
|
+
_();
|
|
601
|
+
let n = typeof e == "function" ? e(t.value) : e, s = t.value.gridOptions, c = n.gridOptions, l = {
|
|
602
|
+
...t.value,
|
|
603
|
+
...n,
|
|
604
|
+
formOptions: n.formOptions ? {
|
|
605
|
+
...t.value.formOptions,
|
|
606
|
+
...n.formOptions
|
|
607
|
+
} : t.value.formOptions,
|
|
608
|
+
gridOptions: {
|
|
609
|
+
...s,
|
|
610
|
+
...c,
|
|
611
|
+
proxyConfig: {
|
|
612
|
+
...s?.proxyConfig,
|
|
613
|
+
...c?.proxyConfig,
|
|
614
|
+
ajax: {
|
|
615
|
+
...s?.proxyConfig?.ajax,
|
|
616
|
+
...c?.proxyConfig?.ajax
|
|
617
|
+
},
|
|
618
|
+
response: {
|
|
619
|
+
...s?.proxyConfig?.response,
|
|
620
|
+
...c?.proxyConfig?.response
|
|
621
|
+
}
|
|
622
|
+
},
|
|
623
|
+
toolbarConfig: {
|
|
624
|
+
...s?.toolbarConfig,
|
|
625
|
+
...c?.toolbarConfig
|
|
626
|
+
}
|
|
627
|
+
}
|
|
628
|
+
};
|
|
629
|
+
if (J(l), t.value = l, c?.data && (r.value = c.data, i.value = c.data.length), c?.pagerConfig && (o.value = c.pagerConfig.pageSize ?? o.value, a.value = c.pagerConfig.currentPage ?? a.value), n.formOptions) {
|
|
630
|
+
let { handleSubmit: e, handleReset: t, ...r } = n.formOptions;
|
|
631
|
+
g.setState(r);
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
let x = n(() => (t.value.gridOptions?.columns ?? []).filter((e) => e.type !== "checkbox").map((e, n) => ({
|
|
635
|
+
field: e.field ?? `__seq_${n}`,
|
|
636
|
+
label: e.title ?? "",
|
|
637
|
+
width: e.width,
|
|
638
|
+
minWidth: e.minWidth,
|
|
639
|
+
fixed: e.fixed,
|
|
640
|
+
align: e.align,
|
|
641
|
+
hidden: e.visible === !1,
|
|
642
|
+
showOverflowTooltip: e.showOverflow ?? t.value.gridOptions?.showOverflow,
|
|
643
|
+
componentProps: { sortable: e.sortable ? "custom" : !1 },
|
|
644
|
+
formatter: e.type === "seq" ? (e, t, n) => (a.value - 1) * o.value + n + 1 : e.formatter ? (t, n, r) => e.formatter({
|
|
645
|
+
cellValue: t,
|
|
646
|
+
row: n,
|
|
647
|
+
rowIndex: r
|
|
648
|
+
}) : void 0
|
|
649
|
+
}))), S = {
|
|
650
|
+
grid: {
|
|
651
|
+
getCheckboxRecords: () => u?.getSelectedRows() ?? [],
|
|
652
|
+
clearCheckboxRow: () => u?.clearSelection(),
|
|
653
|
+
setCheckboxRow: (e, t) => {
|
|
654
|
+
if (!u) throw Error("[lumal/v5] 请先挂载 <Grid />");
|
|
655
|
+
for (let n of Array.isArray(e) ? e : [e]) u.toggleRowSelection(n, t);
|
|
656
|
+
},
|
|
657
|
+
getTableData: () => ({
|
|
658
|
+
fullData: [...r.value],
|
|
659
|
+
tableData: [...r.value]
|
|
660
|
+
})
|
|
661
|
+
},
|
|
662
|
+
formApi: g,
|
|
663
|
+
error: n(() => c.value),
|
|
664
|
+
getState: () => t.value,
|
|
665
|
+
query: v,
|
|
666
|
+
async reload(e) {
|
|
667
|
+
a.value = 1, await v(e);
|
|
668
|
+
},
|
|
669
|
+
setGridOptions: (e) => b({ gridOptions: e }),
|
|
670
|
+
setState: b,
|
|
671
|
+
setLoading: (e) => b({ gridOptions: { loading: e } }),
|
|
672
|
+
toggleSearchForm(e) {
|
|
673
|
+
return b({ showSearchForm: e ?? !t.value.showSearchForm }), !!t.value.showSearchForm;
|
|
674
|
+
}
|
|
675
|
+
};
|
|
676
|
+
function C() {
|
|
677
|
+
d += 1, u = void 0, f = !1, s.value = !1;
|
|
678
|
+
}
|
|
679
|
+
return h(() => {
|
|
680
|
+
C(), p = !0;
|
|
681
|
+
}, !0), {
|
|
682
|
+
api: S,
|
|
683
|
+
Form: m,
|
|
684
|
+
state: t,
|
|
685
|
+
columns: x,
|
|
686
|
+
rows: r,
|
|
687
|
+
total: i,
|
|
688
|
+
page: a,
|
|
689
|
+
pageSize: o,
|
|
690
|
+
loading: s,
|
|
691
|
+
failure: c,
|
|
692
|
+
mount(e) {
|
|
693
|
+
if (_(), f) throw Error("[lumal/v5] 每个 useVbenVxeGrid 只能同时挂载一个 Grid");
|
|
694
|
+
u = e, f = !0, t.value.gridOptions?.proxyConfig?.autoLoad !== !1 && v().catch(() => {});
|
|
695
|
+
},
|
|
696
|
+
unmount: C,
|
|
697
|
+
async changePage(e) {
|
|
698
|
+
a.value = e.page, o.value = e.pageSize, t.value.gridEvents?.pageChange?.({
|
|
699
|
+
currentPage: a.value,
|
|
700
|
+
pageSize: o.value
|
|
701
|
+
}), await v().catch(() => {});
|
|
702
|
+
},
|
|
703
|
+
async changeSort(e) {
|
|
704
|
+
l.value = {
|
|
705
|
+
field: e.prop ?? void 0,
|
|
706
|
+
order: e.order === "ascending" ? "asc" : e.order === "descending" ? "desc" : null
|
|
707
|
+
}, a.value = 1, t.value.gridEvents?.sortChange?.(l.value), await v().catch(() => {});
|
|
708
|
+
},
|
|
709
|
+
select(e) {
|
|
710
|
+
t.value.gridEvents?.checkboxChange?.({ records: e });
|
|
711
|
+
},
|
|
712
|
+
retry: () => v().catch(() => {})
|
|
713
|
+
};
|
|
714
|
+
}
|
|
715
|
+
function Q(e = {}) {
|
|
716
|
+
let t = Z(e);
|
|
717
|
+
return [u({
|
|
718
|
+
name: "LumalVben5Grid",
|
|
719
|
+
inheritAttrs: !1,
|
|
720
|
+
setup: (e, { attrs: n, slots: r }) => () => (I(n, ["tableTitle", "table-title"]), d(q, {
|
|
721
|
+
...n,
|
|
722
|
+
controller: t
|
|
723
|
+
}, r))
|
|
724
|
+
}), t.api];
|
|
725
|
+
}
|
|
726
|
+
//#endregion
|
|
727
|
+
export { P as AccessControl, e as adaptVbenMenus, t as adaptVbenRouteMeta, N as createVbenAccessDirective, M as useAccess, W as useVbenForm, Q as useVbenVxeGrid };
|