@form-renderer/adapter-vue3
Version:
Vue3 adapter for FormEngine
1,785 lines (1,784 loc) • 48 kB
JavaScript
var Pe = Object.defineProperty;
var Se = (n, t, e) => t in n ? Pe(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var b = (n, t, e) => Se(n, typeof t != "symbol" ? t + "" : t, e);
import { shallowRef as _, readonly as se, defineComponent as D, ref as M, computed as m, createBlock as V, openBlock as C, resolveDynamicComponent as L, mergeProps as U, withModifiers as _e, withCtx as G, renderSlot as W, createElementBlock as S, Fragment as I, renderList as k, normalizeClass as de, createElementVNode as j, watch as Q, nextTick as Me, toHandlers as ae, createCommentVNode as pe, onMounted as fe, onBeforeUnmount as me } from "vue";
import { FormEngine as Be } from "@form-renderer/engine";
function nt(n, t) {
let e = null;
return function(...r) {
e !== null && clearTimeout(e), e = setTimeout(() => {
n(...r), e = null;
}, t);
};
}
function ot(n, t) {
let e = !1;
return function(...r) {
e || (n(...r), e = !0, setTimeout(() => {
e = !1;
}, t));
};
}
function rt(n = "id") {
return `${n}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
}
function st(n) {
return n === "" || n === null || n === void 0 || Array.isArray(n) && n.length === 0;
}
function ie(n) {
if (n === null || typeof n != "object")
return n;
if (n instanceof Date)
return new Date(n.getTime());
if (n instanceof Array)
return n.map((t) => ie(t));
if (n instanceof Object) {
const t = {};
for (const e in n)
n.hasOwnProperty(e) && (t[e] = ie(n[e]));
return t;
}
return n;
}
function le(n, ...t) {
if (!t.length) return n;
const e = t.shift();
if (Z(n) && Z(e))
for (const o in e)
Z(e[o]) ? (n[o] || Object.assign(n, { [o]: {} }), le(
n[o],
e[o]
)) : Object.assign(n, { [o]: e[o] });
return le(n, ...t);
}
function Z(n) {
return n && typeof n == "object" && !Array.isArray(n);
}
function Le(n, t, e) {
const o = t.split(".");
let r = n;
for (const i of o)
if (r = r?.[i], r === void 0)
return e;
return r;
}
function Ue(n, t, e) {
const o = t.split(".");
let r = n;
for (let i = 0; i < o.length - 1; i++) {
const u = o[i];
(!(u in r) || typeof r[u] != "object") && (r[u] = {}), r = r[u];
}
r[o[o.length - 1]] = e;
}
function at(n, t, e) {
Ue(n, t, e);
}
function he(n, t, e) {
return Le(n, t, e);
}
function it(n) {
return new Promise((t) => setTimeout(t, n));
}
function lt(n, t) {
try {
return n();
} catch (e) {
return console.error("Error in tryCall:", e), t;
}
}
async function ut(n, t = 5) {
const e = [], o = [];
for (const r of n) {
const i = r().then((u) => {
e.push(u);
});
o.push(i), o.length >= t && (await Promise.race(o), o.splice(
o.findIndex((u) => u === i),
1
));
}
return await Promise.all(o), e;
}
function ct(n) {
return n && typeof n == "object" && "name" in n && "components" in n && Array.isArray(n.components);
}
function dt(n) {
return Object.entries(n).map(([t, e]) => ({
name: t,
component: e,
type: "field",
needFormItem: !0
}));
}
function pt(n, t = {}) {
return {
...n,
...t,
path: t.path || n.path,
depth: t.depth ?? n.depth
};
}
function ft(n, t) {
return {
...n.defaultProps,
...t
};
}
function Ie(n) {
return {
onChange: "update:modelValue",
onFocus: "focus",
onBlur: "blur",
onInput: "input",
...n.eventMapping
};
}
function mt(n) {
return n.type === "field" && n.needFormItem !== !1;
}
class ke {
constructor(t) {
b(this, "pending", /* @__PURE__ */ new Map());
b(this, "timer", null);
b(this, "flushCallback");
this.flushCallback = t;
}
/**
* 调度更新
* @param path 路径
* @param value 值
*/
scheduleUpdate(t, e) {
this.pending.set(t, e), this.timer || (this.timer = requestAnimationFrame(() => {
this.flush();
}));
}
/**
* 立即执行所有更新
*/
flush() {
if (this.pending.size === 0) return;
const t = Array.from(this.pending.entries()).map(([e, o]) => ({
path: e,
value: o
}));
this.pending.clear(), this.timer = null, this.flushCallback(t);
}
/**
* 清空待处理的更新
*/
clear() {
this.timer !== null && (cancelAnimationFrame(this.timer), this.timer = null), this.pending.clear();
}
/**
* 是否有待处理的更新
*/
hasPending() {
return this.pending.size > 0;
}
/**
* 获取待处理的更新数量
*/
getPendingCount() {
return this.pending.size;
}
}
function ht(n) {
let t = [], e = null;
return (...o) => {
t.push(o), e || (e = requestAnimationFrame(() => {
const r = [...t];
t = [], e = null, r.forEach((i) => n(...i));
}));
};
}
function Oe(n) {
const t = /* @__PURE__ */ new Map();
for (const e of n)
t.set(e.path, e.value);
return Array.from(t.entries()).map(([e, o]) => ({
path: e,
value: o
}));
}
function gt(n) {
const t = /* @__PURE__ */ new Map();
for (const e of n) {
const o = e.path.split(".")[0];
t.has(o) || t.set(o, []), t.get(o).push(e);
}
return t;
}
function vt(n) {
const { maxSize: t = 100, flushDelay: e = 16, onFlush: o } = n, r = [];
let i = null;
const u = () => {
if (r.length === 0) return;
const g = [...r];
r.length = 0, i = null, o(Oe(g));
}, c = () => {
i || (i = setTimeout(u, e));
};
return {
/**
* 添加更新
*/
add(g) {
r.push(g), r.length >= t ? u() : c();
},
/**
* 立即执行
*/
flush: u,
/**
* 清空队列
*/
clear() {
r.length = 0, i && (clearTimeout(i), i = null);
},
/**
* 获取队列大小
*/
size() {
return r.length;
}
};
}
function yt() {
const n = {
updateCount: 0,
renderCount: 0,
averageUpdateTime: 0,
lastUpdateTime: 0,
maxUpdateTime: 0,
minUpdateTime: 1 / 0,
totalTime: 0
};
return {
recordUpdate: (u) => {
n.updateCount++, n.totalTime += u, n.lastUpdateTime = u, n.averageUpdateTime = n.totalTime / n.updateCount, u > n.maxUpdateTime && (n.maxUpdateTime = u), u < n.minUpdateTime && (n.minUpdateTime = u);
},
recordRender: () => {
n.renderCount++;
},
getMetrics: () => ({ ...n }),
reset: () => {
n.updateCount = 0, n.renderCount = 0, n.averageUpdateTime = 0, n.lastUpdateTime = 0, n.maxUpdateTime = 0, n.minUpdateTime = 1 / 0, n.totalTime = 0;
},
report: () => {
console.group("📊 FormAdapter 性能报告"), console.log("更新次数:", n.updateCount), console.log("渲染次数:", n.renderCount), console.log("平均更新耗时:", n.averageUpdateTime.toFixed(2), "ms"), console.log("最后更新耗时:", n.lastUpdateTime.toFixed(2), "ms"), console.log("最长更新耗时:", n.maxUpdateTime.toFixed(2), "ms"), console.log(
"最短更新耗时:",
n.minUpdateTime === 1 / 0 ? "N/A" : n.minUpdateTime.toFixed(2) + " ms"
), console.log("总耗时:", n.totalTime.toFixed(2), "ms");
const u = n.averageUpdateTime;
let c = "优秀";
u > 50 ? c = "较差" : u > 30 ? c = "一般" : u > 15 && (c = "良好"), console.log("性能评级:", c), console.groupEnd();
}
};
}
function Ct(n, t) {
const e = performance.now();
try {
const o = n(), r = performance.now() - e;
return t && t(r), o;
} catch (o) {
const r = performance.now() - e;
throw t && t(r), o;
}
}
async function Ft(n, t) {
const e = performance.now();
try {
const o = await n(), r = performance.now() - e;
return t && t(r), o;
} catch (o) {
const r = performance.now() - e;
throw t && t(r), o;
}
}
function bt() {
let n = 0;
return {
increment: () => ++n,
getCount: () => n,
reset: () => {
n = 0;
}
};
}
function N(n, t) {
return !(t.ifShow === !1 || t.show === !1 || t.disabled === !0);
}
function wt(n, t) {
if (N(n, t))
return t.required ?? !1;
}
function Rt(n, t) {
return N(n, t) ? n.validators || [] : [];
}
function Et(n, t) {
const e = N(n, t);
return {
required: e && (t.required ?? !1),
validators: e ? n.validators || [] : [],
shouldValidate: e
};
}
class ee {
constructor() {
b(this, "components", /* @__PURE__ */ new Map());
}
/**
* 注册单个组件
*/
register(t) {
this.validateDefinition(t), this.components.set(t.name, t);
}
/**
* 批量注册组件
*/
registerBatch(t) {
t.forEach((e) => this.register(e));
}
/**
* 获取组件定义
*/
get(t) {
return this.components.get(t);
}
/**
* 检查组件是否存在
*/
has(t) {
return this.components.has(t);
}
/**
* 按类型获取所有组件
*/
getByType(t) {
return Array.from(this.components.values()).filter(
(e) => e.type === t
);
}
/**
* 注册组件预设
*/
registerPreset(t) {
t.setup && t.setup(), this.registerBatch(t.components);
}
/**
* 获取所有已注册的组件名称
*/
getRegisteredNames() {
return Array.from(this.components.keys());
}
/**
* 获取所有已注册的组件定义
*/
getAll() {
return Array.from(this.components.values());
}
/**
* 清空所有注册的组件
*/
clear() {
this.components.clear();
}
/**
* 注销单个组件
*/
unregister(t) {
return this.components.delete(t);
}
/**
* 验证组件定义的有效性
*/
validateDefinition(t) {
if (!t.name)
throw new Error("Component definition must have a name");
if (!t.component)
throw new Error(`Component "${t.name}" must have a component`);
if (!t.type)
throw new Error(`Component "${t.name}" must have a type`);
const e = ["field", "layout", "list", "form"];
if (!e.includes(t.type))
throw new Error(
`Component "${t.name}" has invalid type "${t.type}". Valid types are: ${e.join(", ")}`
);
}
/**
* 克隆注册表(用于创建隔离的组件环境)
*/
clone() {
const t = new ee();
return this.components.forEach((e, o) => {
t.components.set(o, { ...e });
}), t;
}
/**
* 合并另一个注册表(用于组合多个预设)
*/
merge(t, e = !1) {
t.components.forEach((o, r) => {
(e || !this.components.has(r)) && this.components.set(r, o);
});
}
/**
* 获取注册表统计信息
*/
getStats() {
const t = {
field: 0,
layout: 0,
list: 0,
form: 0
};
return this.components.forEach((e) => {
t[e.type]++;
}), {
total: this.components.size,
byType: t
};
}
}
function ge() {
return new ee();
}
function J(n) {
const {
name: t,
component: e,
type: o = "field",
defaultProps: r = {},
valueTransformer: i,
eventMapping: u,
needFormItem: c = o === "field",
customRender: g
} = n;
if (!t || !e)
throw new Error("Component name and component are required");
const h = {
onChange: "update:modelValue",
...u
};
return {
name: t,
component: e,
type: o,
defaultProps: r,
valueTransformer: i,
eventMapping: h,
needFormItem: c,
customRender: g
};
}
function z(n) {
const { valueType: t = "string", valueTransformer: e, ...o } = n;
let r = e;
return !r && t !== "custom" && (r = De(t)), J({
...o,
type: "field",
valueTransformer: r
});
}
function xt(n) {
return J({
...n,
type: "layout",
needFormItem: !1
});
}
function Vt(n) {
return J({
...n,
type: "list",
needFormItem: !1
});
}
function De(n) {
return {
string: {
toComponent: (e) => e ?? "",
fromComponent: (e) => e || void 0
},
number: {
toComponent: (e) => e == null ? "" : Number(e),
fromComponent: (e) => {
if (e === "" || e === null || e === void 0) return;
const o = Number(e);
return isNaN(o) ? void 0 : o;
}
},
boolean: {
toComponent: (e) => !!e,
fromComponent: (e) => !!e
},
array: {
toComponent: (e) => e ?? [],
fromComponent: (e) => Array.isArray(e) ? e.length > 0 ? e : void 0 : []
},
date: {
toComponent: (e) => e ? new Date(e) : null,
fromComponent: (e) => {
if (e)
return e instanceof Date ? e.toISOString() : e;
}
}
}[n];
}
function At(n) {
return n.map((t) => J(t));
}
function Tt(n, t) {
return {
...n,
...t,
defaultProps: {
...n.defaultProps,
...t.defaultProps
},
eventMapping: {
...n.eventMapping,
...t.eventMapping
}
};
}
function Pt(n, t) {
return {
...n,
defaultProps: {
...t,
...n.defaultProps
}
};
}
function St(n, t, e) {
return z({
name: n,
component: t,
valueType: "string",
...e
});
}
function _t(n, t, e = !1, o) {
return z({
name: n,
component: t,
valueType: e ? "array" : "string",
...o
});
}
function Mt(n, t, e) {
return z({
name: n,
component: t,
valueType: "date",
...e
});
}
function Bt(n, t, e) {
return z({
name: n,
component: t,
valueType: "number",
...e
});
}
function Lt(n, t, e) {
return z({
name: n,
component: t,
valueType: "boolean",
...e
});
}
class ve {
constructor(t) {
b(this, "engine");
b(this, "pendingUpdates", /* @__PURE__ */ new Map());
b(this, "timer", null);
b(this, "flushCallbacks", /* @__PURE__ */ new Set());
this.engine = t;
}
/**
* 调度一个更新
* 多个连续的更新会被合并为一次批量更新
*/
scheduleUpdate(t, e, o) {
this.pendingUpdates.set(t, e), o && this.flushCallbacks.add(o), this.timer || (this.timer = requestAnimationFrame(() => {
this.flush();
}));
}
/**
* 批量调度多个更新
*/
scheduleBatch(t, e) {
Object.entries(t).forEach(([o, r]) => {
this.pendingUpdates.set(o, r);
}), e && this.flushCallbacks.add(e), this.timer || (this.timer = requestAnimationFrame(() => {
this.flush();
}));
}
/**
* 立即刷新所有待处理的更新
*/
flush() {
if (this.timer && (cancelAnimationFrame(this.timer), this.timer = null), this.pendingUpdates.size === 0)
return;
const t = Object.fromEntries(this.pendingUpdates);
this.pendingUpdates.clear();
try {
this.engine.updateValue(t), this.flushCallbacks.forEach((e) => {
try {
e();
} catch (o) {
console.error("Error in flush callback:", o);
}
});
} catch (e) {
throw console.error("Error flushing updates:", e), e;
} finally {
this.flushCallbacks.clear();
}
}
/**
* 取消所有待处理的更新
*/
cancel() {
this.timer && (cancelAnimationFrame(this.timer), this.timer = null), this.pendingUpdates.clear(), this.flushCallbacks.clear();
}
/**
* 检查是否有待处理的更新
*/
hasPending() {
return this.pendingUpdates.size > 0;
}
/**
* 获取待处理更新的数量
*/
getPendingCount() {
return this.pendingUpdates.size;
}
/**
* 获取待处理的更新路径列表
*/
getPendingPaths() {
return Array.from(this.pendingUpdates.keys());
}
/**
* 销毁调度器
*/
destroy() {
this.cancel();
}
}
function Ut(n) {
return new ve(n);
}
class $e {
constructor(t) {
b(this, "engine");
b(this, "renderSchemaRef");
b(this, "modelRef");
b(this, "subscriptions", []);
b(this, "isDestroyed", !1);
b(this, "updateScheduler");
const { schema: e, model: o, enableUpdateScheduler: r = !1 } = t;
this.engine = new Be({ schema: e, model: o }), this.renderSchemaRef = _(this.engine.getRenderSchema()), this.modelRef = _(this.engine.getValue()), r && (this.updateScheduler = new ve(this.engine)), this.setupEventListeners();
}
/**
* 设置事件监听器
*/
setupEventListeners() {
const t = this.engine.onValueChange((e) => {
this.isDestroyed || (e.event.kind === "value" ? this.handleValueChange(e) : e.event.kind === "structure" && this.handleStructureChange());
});
this.subscriptions.push(t);
}
/**
* 处理值变化
* 🔥 简化:Engine 已采用不可变更新,直接获取新引用即可
*/
handleValueChange(t) {
this.modelRef.value = this.engine.getValue(), this.renderSchemaRef.value = this.engine.getRenderSchema();
}
/**
* 处理结构变化
* 🔥 简化:Engine 已采用不可变更新,直接获取新引用即可
*/
handleStructureChange() {
this.renderSchemaRef.value = this.engine.getRenderSchema(), this.modelRef.value = this.engine.getValue();
}
/**
* 获取响应式的渲染 Schema(只读)
*/
getRenderSchema() {
return se(this.renderSchemaRef);
}
/**
* 获取响应式的数据模型(只读)
*/
getModel() {
return se(this.modelRef);
}
/**
* 获取原始 FormEngine 实例
*/
getEngine() {
return this.engine;
}
updateValue(t, e) {
if (this.isDestroyed) {
console.warn("Cannot update value on destroyed ReactiveEngine");
return;
}
this.updateScheduler ? typeof t == "string" ? this.updateScheduler.scheduleUpdate(t, e) : this.updateScheduler.scheduleBatch(t) : typeof t == "string" ? this.engine.updateValue(t, e) : this.engine.updateValue(t);
}
/**
* 立即刷新所有待处理的更新(仅在启用调度器时有效)
*/
flush() {
this.updateScheduler && this.updateScheduler.flush();
}
/**
* 等待刷新所有待处理的更新(仅在启用调度器时有效)
*/
waitFlush() {
return this.engine ? this.engine.waitFlush() : Promise.resolve();
}
/**
* 设置表单 Schema
*/
setFormSchema(t) {
if (this.isDestroyed) {
console.warn("Cannot set schema on destroyed ReactiveEngine");
return;
}
this.engine.setFormSchema(t), this.renderSchemaRef.value = this.engine.getRenderSchema(), this.modelRef.value = this.engine.getValue();
}
/**
* 重置表单
* @param target - 重置目标
* - 不传:重置到初始状态(initialModel)
* - 'default':重置到 schema 的 defaultValue
* - 具体对象:重置到指定值
*/
reset(t) {
if (this.isDestroyed) {
console.warn("Cannot reset destroyed ReactiveEngine");
return;
}
this.engine.reset(t), this.modelRef.value = this.engine.getValue(), this.renderSchemaRef.value = this.engine.getRenderSchema();
}
/**
* 校验表单
*/
async validate(t) {
return this.isDestroyed ? (console.warn("Cannot validate destroyed ReactiveEngine"), { valid: !1, errors: {} }) : this.engine.validate(t);
}
/**
* 获取列表操作器
* 返回一个包装了 FormEngine list 方法的对象
*/
getListOperator(t) {
if (this.isDestroyed)
throw new Error("Cannot get list operator from destroyed ReactiveEngine");
return {
append: (e) => {
this.engine.listAppend(t, e);
},
insert: (e, o) => this.engine.listInsert(t, e, o),
remove: (e) => this.engine.listRemove(t, e),
move: (e, o) => this.engine.listMove(t, e, o),
swap: (e, o) => this.engine.listSwap(t, e, o),
replace: (e, o) => this.engine.listReplace(t, e, o),
clear: () => this.engine.listClear(t)
};
}
/**
* 销毁引擎,清理所有订阅
*/
destroy() {
this.isDestroyed || (this.isDestroyed = !0, this.subscriptions.forEach((t) => t()), this.subscriptions = [], this.updateScheduler && (this.updateScheduler.destroy(), this.updateScheduler = void 0));
}
/**
* 检查引擎是否已销毁
*/
get destroyed() {
return this.isDestroyed;
}
}
function ye(n) {
return new $e(n);
}
class ze {
constructor(t, e, o = {}) {
b(this, "engine");
b(this, "registry");
b(this, "batchManager");
b(this, "options");
this.engine = t, this.registry = e, this.options = {
enableBatch: !1,
batchDelay: 16,
...o
}, this.options.enableBatch && (this.batchManager = new ke((r) => {
const i = r.reduce(
(u, c) => (u[c.path] = c.value, u),
{}
);
this.engine.updateValue(i);
}));
}
/**
* 处理字段值变化
*/
handleFieldChange(t, e, o) {
try {
const r = this.registry.get(o);
if (!r) {
console.warn(`Component "${o}" not found in registry`);
return;
}
const i = this.transformValue(e, r);
this.updateEngine(t, i);
} catch (r) {
this.handleError(r, t, e, "transform");
}
}
/**
* 处理字段聚焦
*/
handleFieldFocus(t, e) {
}
/**
* 处理字段失焦
*/
handleFieldBlur(t, e) {
}
/**
* 处理列表添加行
*/
handleListAdd(t, e) {
try {
const o = this.engine.getListOperator(t), r = e ?? {};
o.append(r);
} catch (o) {
this.handleError(o, t, e, "list-add");
}
}
/**
* 处理列表删除行
*/
handleListRemove(t, e) {
try {
this.engine.getListOperator(t).remove(e);
} catch (o) {
this.handleError(o, t, e, "list-remove");
}
}
/**
* 处理列表移动行
*/
handleListMove(t, e, o) {
try {
this.engine.getListOperator(t).move(e, o);
} catch (r) {
this.handleError(r, t, { from: e, to: o }, "list-move");
}
}
/**
* 处理列表插入行
*/
handleListInsert(t, e, o) {
try {
this.engine.getListOperator(t).insert(e, o ?? {});
} catch (r) {
this.handleError(r, t, { index: e, row: o }, "list-insert");
}
}
/**
* 批量更新多个字段
*/
batchUpdate(t) {
try {
const e = {};
for (const { path: o, value: r, component: i } of t)
if (i) {
const u = this.registry.get(i);
e[o] = this.transformValue(r, u);
} else
e[o] = r;
this.engine.updateValue(e);
} catch (e) {
this.handleError(e, "", t, "batch-update");
}
}
/**
* 立即刷新所有待处理的批量更新
*/
flush() {
this.batchManager && this.batchManager.flush();
}
/**
* 销毁事件处理器
*/
destroy() {
this.batchManager && (this.batchManager.clear(), this.batchManager = void 0);
}
/**
* 应用值转换器
*/
transformValue(t, e) {
if (!e?.valueTransformer?.fromComponent)
return t;
try {
return e.valueTransformer.fromComponent(t);
} catch (o) {
throw new ue(
`Failed to transform value: ${o}`,
e.name,
t
);
}
}
/**
* 更新引擎(支持批量)
*/
updateEngine(t, e) {
this.batchManager ? this.batchManager.scheduleUpdate(t, e) : this.engine.updateValue(t, e);
}
/**
* 统一的错误处理
*/
handleError(t, e, o, r) {
console.error(`EventHandler error [${r}] at "${e}":`, t), t instanceof ue ? this.options.onTransformError?.(t, e, o) : this.options.onUpdateError?.(t, e, o);
}
}
class ue extends Error {
constructor(t, e, o) {
super(t), this.componentName = e, this.value = o, this.name = "TransformError";
}
}
function Ce(n, t, e) {
return new ze(n, t, e);
}
const qe = /* @__PURE__ */ D({
__name: "FormContainer",
props: {
node: {},
context: {}
},
emits: ["submit", "field-change", "field-blur", "field-focus", "list-add", "list-remove", "list-move"],
setup(n, { expose: t, emit: e }) {
const o = n, r = e, i = M(), u = m(() => o.node.component ? o.context.registry.get(o.node.component)?.component : null), c = m(() => ({
...o.node.formProps,
...o.node.componentProps,
// 传递 model 给 Form 组件(Element Plus 的 el-form 需要)
modelValue: o.context.engine?.getModel().value
})), g = m(() => {
const s = ["form-adapter-root"];
return o.context.options?.theme?.classPrefix && s.push(`${o.context.options.theme.classPrefix}form`), s;
}), h = m(() => o.node.children || []), y = m(() => ({
...o.context,
depth: o.context.depth + 1,
parentType: "form"
})), R = () => {
r("submit");
}, E = (s) => {
r("field-change", s);
}, x = (s) => {
r("field-blur", s);
}, A = (s) => {
r("field-focus", s);
}, f = (s) => {
r("list-add", s);
}, T = (s) => {
r("list-remove", s);
}, w = (s) => {
r("list-move", s);
};
return t({
formRef: i
}), (s, v) => (C(), V(L(u.value || "div"), U({
ref_key: "formRef",
ref: i
}, c.value, {
class: g.value,
onSubmit: _e(R, ["prevent"])
}), {
default: G(() => [
W(s.$slots, "before-form", {}, void 0, !0),
(C(!0), S(I, null, k(h.value, (d, a) => (C(), V(O, {
key: d.path || a,
node: d,
context: y.value,
onFieldChange: E,
onFieldBlur: x,
onFieldFocus: A,
onListAdd: f,
onListRemove: T,
onListMove: w
}, null, 8, ["node", "context"]))), 128)),
W(s.$slots, "after-form", {}, void 0, !0)
]),
_: 3
}, 16, ["class"]));
}
}), q = (n, t) => {
const e = n.__vccOpts || n;
for (const [o, r] of t)
e[o] = r;
return e;
}, ce = /* @__PURE__ */ q(qe, [["__scopeId", "data-v-ef247ce9"]]), He = /* @__PURE__ */ D({
__name: "LayoutContainer",
props: {
node: {},
context: {}
},
emits: ["field-change", "field-blur", "field-focus", "list-add", "list-remove", "list-move"],
setup(n, { emit: t }) {
const e = n, o = t, r = m(() => e.node.component ? e.context.registry.get(e.node.component)?.component : null), i = m(() => ({
...e.node.componentProps
})), u = m(() => {
const f = ["layout-container"];
return e.node.computed?.show === !1 && f.push("hidden"), f;
}), c = m(() => {
const f = e.node.children;
return Array.isArray(f) && !Array.isArray(f[0]) ? f : [];
}), g = m(() => ({
...e.context,
depth: e.context.depth + 1,
parentType: "layout"
})), h = (f) => {
o("field-change", f);
}, y = (f) => {
o("field-blur", f);
}, R = (f) => {
o("field-focus", f);
}, E = (f) => {
o("list-add", f);
}, x = (f) => {
o("list-remove", f);
}, A = (f) => {
o("list-move", f);
};
return (f, T) => r.value ? (C(), V(L(r.value), U({ key: 0 }, i.value, { class: u.value }), {
default: G(() => [
(C(!0), S(I, null, k(c.value, (w, s) => (C(), V(O, {
key: w.path || s,
node: w,
context: g.value,
onFieldChange: h,
onFieldBlur: y,
onFieldFocus: R,
onListAdd: E,
onListRemove: x,
onListMove: A
}, null, 8, ["node", "context"]))), 128))
]),
_: 1
}, 16, ["class"])) : (C(!0), S(I, { key: 1 }, k(c.value, (w, s) => (C(), V(O, {
key: w.path || s,
node: w,
context: g.value,
onFieldChange: h,
onFieldBlur: y,
onFieldFocus: R,
onListAdd: E,
onListRemove: x,
onListMove: A
}, null, 8, ["node", "context"]))), 128));
}
}), je = /* @__PURE__ */ q(He, [["__scopeId", "data-v-1b078edd"]]), We = { class: "list-row-actions" }, Qe = ["onClick"], Ge = /* @__PURE__ */ D({
__name: "ListContainer",
props: {
node: {},
context: {}
},
emits: ["field-change", "field-blur", "field-focus", "list-add", "list-remove", "list-move"],
setup(n, { emit: t }) {
const e = n, o = t, r = m(() => e.node.component ? e.context.registry.get(e.node.component)?.component : null), i = m(() => ({
...e.node.componentProps,
title: e.node.label
})), u = m(() => {
const s = ["list-container"];
return e.node.computed?.show === !1 && s.push("hidden"), s;
}), c = m(() => {
const s = e.context.engine.getModel()?.value, v = he(s, e.node.path);
return Array.isArray(v) ? v : [];
}), g = m(() => e.node.children), h = (s) => ({
...e.context,
depth: e.context.depth + 1,
parentType: "list",
rowIndex: s
}), y = (s, v, d) => {
if (s) {
if (s.type === "field") {
if (s.defaultValue !== void 0 && s.prop)
if (typeof s.defaultValue == "function")
try {
v[s.prop] = s.defaultValue(d);
} catch (a) {
console.error(
`Error evaluating defaultValue for field ${s.prop}:`,
a
);
}
else
v[s.prop] = s.defaultValue;
} else if (s.type === "layout" && s.properties)
for (const a of Object.values(s.properties))
y(a, v, d);
else if (s.type === "list" && s.prop && v[s.prop] === void 0)
if (s.defaultValue !== void 0)
if (typeof s.defaultValue == "function")
try {
v[s.prop] = s.defaultValue(d);
} catch (a) {
console.error(
`Error evaluating defaultValue for list ${s.prop}:`,
a
);
}
else
v[s.prop] = s.defaultValue;
else
v[s.prop] = [];
}
}, R = () => {
let s = {};
const v = {
mode: "list-add",
getValue: (a) => {
const p = e.context.engine.getModel()?.value;
return a ? e.context.engine.getEngine().getValue(a) : p;
},
getListLength: () => c.value.length,
getRowData: () => s
};
if (e.node.defaultValue !== void 0)
if (typeof e.node.defaultValue == "function")
try {
s = e.node.defaultValue(v);
} catch (a) {
console.error("Error evaluating list-level defaultValue:", a), s = {};
}
else
s = e.node.defaultValue;
const d = e.context.engine.getEngine().getSchema(e.node.path);
if (d && d.items)
for (const a of Object.values(d.items))
y(a, s, v);
o("list-add", {
path: e.node.path,
value: s
});
}, E = (s) => {
o("list-add", s);
}, x = (s) => {
o("list-remove", { path: e.node.path, index: s });
}, A = (s, v) => {
o("list-move", { path: e.node.path, from: s, to: v });
}, f = (s) => {
o("field-change", s);
}, T = (s) => {
o("field-blur", s);
}, w = (s) => {
o("field-focus", s);
};
return (s, v) => r.value ? (C(), V(L(r.value), U({ key: 0 }, i.value, {
rows: c.value,
class: u.value,
onAdd: R,
onRemove: x,
onMove: A
}), {
default: G(({ index: d }) => [
(C(!0), S(I, null, k(g.value?.[d], (a, p) => (C(), V(O, {
key: a.prop || p,
node: a,
context: h(d),
onFieldChange: f,
onFieldBlur: T,
onFieldFocus: w,
onListAdd: E
}, null, 8, ["node", "context"]))), 128))
]),
_: 1
}, 16, ["rows", "class"])) : (C(), S("div", {
key: 1,
class: de(u.value)
}, [
(C(!0), S(I, null, k(c.value, (d, a) => (C(), S("div", {
key: d.__key || a,
class: "list-row"
}, [
(C(!0), S(I, null, k(g.value?.[a], (p, F) => (C(), V(O, {
key: p.prop || F,
node: p,
context: h(a),
onFieldChange: f,
onFieldBlur: T,
onFieldFocus: w
}, null, 8, ["node", "context"]))), 128)),
j("div", We, [
j("button", {
type: "button",
onClick: (p) => x(a)
}, "删除", 8, Qe)
])
]))), 128)),
j("div", { class: "list-actions" }, [
j("button", {
type: "button",
onClick: R
}, "添加")
])
], 2));
}
}), Je = /* @__PURE__ */ q(Ge, [["__scopeId", "data-v-7ed0d7fa"]]), Ke = /* @__PURE__ */ D({
__name: "FieldWrapper",
props: {
node: {},
context: {}
},
emits: ["field-change", "field-blur", "field-focus"],
setup(n, { emit: t }) {
const e = n, o = t, r = m(
() => e.context.registry.get(e.node.component || "")
), i = m(() => r.value?.component), u = m(
() => r.value?.needFormItem ? e.context.formItem : null
), c = m(() => r.value?.needFormItem ?? !0), g = M(!0), h = m(() => {
const a = e.context.engine.getModel().value;
return he(a, e.node.path);
}), y = M();
Q(
h,
async (a) => {
g.value = !1;
const p = r.value?.valueTransformer;
y.value = p?.toComponent?.(a) ?? a, await Me(), g.value = !0;
},
{ immediate: !0 }
);
const R = m(() => {
const a = e.node.computed?.componentProps || e.node.componentProps;
return {
...r.value?.defaultProps,
...a,
disabled: e.node.computed?.disabled,
readonly: e.node.computed?.readonly,
placeholder: e.node.placeholder
};
}), E = m(() => {
const a = e.context.ruleConverter?.(
e.node,
e.node.computed || {},
e.context
// 传递 context,让转换器能访问 engine
), p = e.node.computed?.formItemProps || e.node.formItemProps;
return {
label: e.node.label,
name: e.node.path,
// 用于 el-form 的 prop
required: e.node.computed?.required,
rules: a,
// 传递转换后的 rules
...p
};
}), x = m(() => {
const a = [];
return e.node.computed?.show === !1 && a.push("hidden"), a;
}), A = ["onChange", "onInput", "onFocus", "onBlur"], f = m(() => r.value ? r.value?.eventMapping || Ie(r.value) : {
onChange: "update:modelValue",
onInput: "input",
onFocus: "focus",
onBlur: "blur"
}), T = m(() => {
const a = {};
f.value.onChange && (a[f.value.onChange] = w), f.value.onFocus && (a[f.value.onFocus] = d), f.value.onBlur && (a[f.value.onBlur] = v), f.value.onInput && (a[f.value.onInput] = s);
const p = e.node.componentProps || {};
return Object.keys(p).forEach((F) => {
if (F.startsWith("on") && typeof p[F] == "function" && !A.includes(F)) {
const B = F.slice(2).toLowerCase();
a[B] = p[F];
}
}), a;
}), w = (a) => {
let p;
if (a && a.target && "value" in a.target ? p = a.target.value : p = a, g.value) {
const B = r.value?.valueTransformer?.fromComponent?.(p) ?? p;
o("field-change", {
path: e.node.path,
value: B,
component: e.node.component || ""
});
}
}, s = (a) => {
let p;
if (a && a.target && "value" in a.target ? p = a.target.value : p = a, g.value) {
const B = r.value?.valueTransformer?.fromComponent?.(p) ?? p;
o("field-change", {
path: e.node.path,
value: B,
component: e.node.component || ""
});
}
}, v = (a) => {
o("field-blur", { path: e.node.path, event: a });
}, d = (a) => {
o("field-focus", { path: e.node.path, event: a });
};
return (a, p) => c.value && u.value ? (C(), V(L(u.value), U({ key: 0 }, E.value, { class: x.value }), {
default: G(() => [
(C(), V(L(i.value), U({
modelValue: y.value,
"onUpdate:modelValue": p[0] || (p[0] = (F) => y.value = F)
}, R.value, ae(T.value)), null, 16, ["modelValue"]))
]),
_: 1
}, 16, ["class"])) : (C(), V(L(i.value), U({
key: 1,
modelValue: y.value,
"onUpdate:modelValue": p[1] || (p[1] = (F) => y.value = F)
}, R.value, ae(T.value)), null, 16, ["modelValue"]));
}
}), Xe = /* @__PURE__ */ q(Ke, [["__scopeId", "data-v-43b92528"]]), O = /* @__PURE__ */ D({
__name: "SchemaRenderer",
props: {
node: {},
context: {}
},
setup(n, { expose: t }) {
const e = n, o = M(), r = m(() => e.node.computed?.ifShow !== !1), i = m(() => ({
form: ce,
layout: je,
list: Je,
field: Xe
})[e.node.type] || ce);
return t({
containerRef: o
}), (u, c) => r.value ? (C(), V(L(i.value), {
key: 0,
node: n.node,
context: n.context,
ref_key: "containerRef",
ref: o
}, null, 8, ["node", "context"])) : pe("", !0);
}
}), Ye = /* @__PURE__ */ D({
__name: "FormAdapter",
props: {
schema: {},
model: {},
components: {},
options: { default: () => ({}) }
},
emits: ["update:model", "change", "field-blur", "field-focus", "list-change", "validate", "submit", "ready"],
setup(n, { expose: t, emit: e }) {
const o = n, r = e, i = _(), u = _(), c = _(), g = M(), h = m(() => i.value?.getRenderSchema().value), y = m(() => !i.value || !u.value || !c.value ? null : {
engine: i.value,
// 传入 ReactiveEngine 实例,而不是原始的 FormEngine
registry: u.value,
eventHandler: c.value,
options: o.options,
// formItem: props.options?.formItem,
formItem: o.options?.formItem ?? (Array.isArray(o.components) ? void 0 : o.components?.formItem),
// 从 ComponentPreset 中提取 ruleConverter
ruleConverter: Array.isArray(o.components) ? void 0 : o.components?.ruleConverter,
path: [],
depth: 0
}), R = m(() => {
const l = [];
return o.options?.theme?.classPrefix && l.push(`${o.options.theme.classPrefix}form-adapter`), o.options?.theme?.size && l.push(`size-${o.options.theme.size}`), l;
}), E = () => {
u.value = ge(), o.components && (Array.isArray(o.components) ? u.value.registerBatch(o.components) : u.value.registerPreset(o.components)), i.value = ye({
schema: o.schema,
model: o.model,
enableUpdateScheduler: o.options?.engine?.enableUpdateScheduler
}), c.value = Ce(
i.value,
u.value,
{
enableBatch: o.options?.eventHandler?.enableBatch,
batchDelay: o.options?.eventHandler?.batchDelay
}
), Q(
() => i.value?.getModel().value,
(l) => {
l && r("update:model", l);
}
// 不需要 deep: true,因为 ModelManager 使用 immutable update,每次更新都会创建新的引用
);
}, x = (l) => {
c.value?.handleFieldChange(
l.path,
l.value,
l.component
), r("change", { path: l.path, value: l.value });
}, A = (l) => {
c.value?.handleFieldBlur(l.path, l.event), r("field-blur", l);
}, f = (l) => {
c.value?.handleFieldFocus(l.path, l.event), r("field-focus", l);
}, T = (l) => {
c.value?.handleListAdd(l.path, l.value), r("list-change", { path: l.path, operation: "add" });
}, w = (l) => {
c.value?.handleListRemove(l.path, l.index), r("list-change", {
path: l.path,
operation: "remove",
index: l.index
});
}, s = (l) => {
c.value?.handleListMove(l.path, l.from, l.to), r("list-change", {
path: l.path,
operation: "move",
from: l.from,
to: l.to
});
}, v = (l) => {
if (i.value)
return l ? i.value.getEngine().getValue(l) : i.value.getModel().value;
}, d = (l, P) => {
i.value?.updateValue(l, P);
}, a = (l) => {
i.value?.updateValue(l);
}, p = () => {
const l = g.value;
if (!l) return null;
const P = l.containerRef;
return P ? P.formRef : null;
}, F = async (l) => {
if (!i.value)
return {
ok: !1,
errors: [],
errorByPath: {}
};
if (!Array.isArray(o.components) && o.components?.ruleConverter) {
const K = p();
if (K && typeof K.validate == "function")
try {
if (await K.validate())
return r("validate", !0), !0;
} catch (X) {
const Y = [], H = {};
Array.isArray(X) && X.forEach((re) => {
const $ = {
path: re.field || "",
message: re.message || "校验失败",
code: "VALIDATION_ERROR"
};
Y.push($), H[$.path] || (H[$.path] = []), H[$.path].push($);
});
const oe = {
ok: !1,
errors: Y,
errorByPath: H
};
return r("validate", oe), oe;
}
}
const ne = await i.value.validate(l);
return r("validate", ne), ne;
}, B = async () => {
if (await F() === !0) {
const P = i.value?.getModel().value;
P && r("submit", P);
}
}, Fe = async (l) => {
await i.value?.reset(l);
}, be = (l) => {
u.value?.register(l);
}, we = (l) => {
u.value?.registerBatch(l);
}, Re = (l) => {
u.value?.registerPreset(l);
}, Ee = (l) => i.value?.getListOperator(l), xe = (l) => {
console.log("scrollToField:", l);
}, Ve = (l) => {
console.log("focusField:", l);
}, Ae = () => {
c.value?.flush(), i.value?.flush();
}, Te = async () => {
await i.value?.waitFlush();
}, te = () => {
c.value?.destroy(), i.value?.destroy();
};
return Q(
() => o.schema,
(l) => {
i.value && l && i.value.setFormSchema(l);
},
{ deep: !0 }
), fe(() => {
E(), i.value && r("ready", i.value);
}), me(() => {
te();
}), t({
// 核心实例访问
getEngine: () => i.value,
getRegistry: () => u.value,
getEventHandler: () => c.value,
// 数据操作
getValue: v,
updateValue: d,
updateValues: a,
// 列表操作
getListOperator: Ee,
// 校验
validate: F,
// 表单操作
submit: B,
reset: Fe,
flush: Ae,
// 组件注册
registerComponent: be,
registerComponents: we,
registerPreset: Re,
// 工具方法
scrollToField: xe,
focusField: Ve,
waitFlush: Te,
// 生命周期
destroy: te
}), (l, P) => (C(), S("div", {
class: de(["form-adapter", R.value])
}, [
W(l.$slots, "before-form", {}, void 0, !0),
h.value && y.value ? (C(), V(O, {
key: 0,
ref_key: "schemaRendererRef",
ref: g,
node: h.value,
context: y.value,
onFieldChange: x,
onFieldBlur: A,
onFieldFocus: f,
onListAdd: T,
onListRemove: w,
onListMove: s
}, null, 8, ["node", "context"])) : pe("", !0),
W(l.$slots, "after-form", {}, void 0, !0)
], 2));
}
}), It = /* @__PURE__ */ q(Ye, [["__scopeId", "data-v-1cd25b93"]]);
function kt(n) {
const t = _(), e = _(), o = _(), r = M(!1), i = M(), u = m(
() => t.value?.getRenderSchema().value
), c = m(() => t.value?.getModel().value), g = async () => {
e.value = ge(), n.components && (Array.isArray(n.components) ? e.value.registerBatch(n.components) : e.value.registerPreset(n.components)), t.value = ye({
schema: n.schema,
model: n.model,
...n.engineOptions
}), o.value = Ce(
t.value,
e.value,
n.eventHandlerOptions
), t.value && n.onReady?.(t.value);
}, h = (d) => {
if (t.value)
return d ? t.value.getEngine().getValue(d) : t.value.getModel().value;
}, y = (d, a) => {
if (!t.value) {
console.warn("Engine not initialized");
return;
}
t.value.updateValue(d, a), n.onChange?.({ path: d, value: a });
}, R = (d) => {
if (!t.value) {
console.warn("Engine not initialized");
return;
}
t.value.updateValue(d), Object.entries(d).forEach(([a, p]) => {
n.onChange?.({ path: a, value: p });
});
}, E = async (d) => {
if (!t.value)
return { ok: !1, errors: [], errorByPath: {} };
r.value = !0;
try {
const a = await t.value.validate(d);
if (a === !0)
i.value = void 0;
else {
const p = {};
Array.isArray(a.errors) && a.errors.forEach((F) => {
p[F.path] || (p[F.path] = []), p[F.path].push(F.message);
}), i.value = p;
}
return n.onValidate?.(a), a;
} finally {
r.value = !1;
}
}, x = async () => {
if (await E() === !0 && c.value) {
r.value = !0;
try {
await n.onSubmit?.(c.value);
} catch (a) {
throw console.error("Submit error:", a), a;
} finally {
r.value = !1;
}
}
}, A = () => {
t.value?.reset(), i.value = void 0;
}, f = (d) => {
e.value?.register(d);
}, T = (d) => {
e.value?.registerBatch(d);
}, w = (d) => {
e.value?.registerPreset(d);
}, s = (d) => t.value?.getListOperator(d), v = () => {
o.value?.destroy(), t.value?.destroy(), i.value = void 0;
};
return fe(() => {
g();
}), me(() => {
v();
}), {
// 状态(只读)
engine: t,
registry: e,
eventHandler: o,
renderSchema: u,
model: c,
loading: r,
errors: i,
// 方法
init: g,
getValue: h,
updateValue: y,
updateValues: R,
validate: E,
submit: x,
reset: A,
destroy: v,
// 组件注册
registerComponent: f,
registerComponents: T,
registerPreset: w,
// 列表操作
getListOperator: s
};
}
function Ot(n) {
const { props: t, emit: e, valueTransformer: o } = n, r = M(t.modelValue);
Q(
() => t.modelValue,
(h) => {
r.value = o?.toComponent?.(h) ?? h;
},
{ immediate: !0 }
);
const i = m(() => !!(t.disabled || t.readonly));
return {
internalValue: r,
isDisabled: i,
handleChange: (h) => {
const y = o?.fromComponent?.(h) ?? h;
r.value = y, e("update:modelValue", y), e("change", y), n.validateOnChange;
},
handleFocus: (h) => {
e("focus", h);
},
handleBlur: (h) => {
e("blur", h), n.validateOnBlur;
}
};
}
function Dt() {
return {
modelValue: {
type: [String, Number, Boolean, Array, Object, Date],
default: void 0
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
placeholder: {
type: String,
default: ""
}
};
}
function $t() {
return ["update:modelValue", "change", "focus", "blur"];
}
const Ze = "0.0.1";
function zt(n) {
console.log("Adapter installed", Ze);
}
export {
ke as BatchUpdateManager,
ee as ComponentRegistry,
ze as EventHandler,
Xe as FieldWrapper,
It as FormAdapter,
ce as FormContainer,
je as LayoutContainer,
Je as ListContainer,
$e as ReactiveEngine,
O as SchemaRenderer,
ue as TransformError,
ve as UpdateScheduler,
ut as batchPromises,
Et as buildValidationContext,
ht as createBatchUpdate,
ge as createComponentRegistry,
dt as createDefinitionsFromMap,
Ce as createEventHandler,
$t as createFieldEmits,
Dt as createFieldProps,
yt as createPerformanceMonitor,
ye as createReactiveEngine,
pt as createRenderContext,
bt as createRenderCounter,
vt as createUpdateQueue,
Ut as createUpdateScheduler,
nt as debounce,
ie as deepClone,
le as deepMerge,
Lt as defineBooleanComponent,
Mt as defineDateComponent,
z as defineFieldComponent,
St as defineInputComponent,
xt as defineLayoutComponent,
Vt as defineListComponent,
Bt as defineNumberComponent,
_t as defineSelectComponent,
it as delay,
wt as extractRequired,
Rt as extractValidators,
rt as generateId,
Le as get,
Ie as getEventMapping,
he as getValueByPath,
gt as groupUpdatesByPath,
zt as install,
ct as isComponentPreset,
st as isEmpty,
Ct as measurePerformance,
Ft as measurePerformanceAsync,
Tt as mergeComponentDefinition,
ft as mergeComponentProps,
Oe as mergeUpdates,
mt as needsFormItem,
J as normalizeComponent,
At as normalizeComponents,
Ue as set,
N as shouldValidateField,
ot as throttle,
lt as tryCall,
at as updateValueByPath,
Ot as useFieldComponent,
kt as useFormAdapter,
Ze as version,
Pt as wrapWithCommonProps
};