UNPKG

@form-renderer/adapter-vue3

Version:
1,785 lines (1,784 loc) 48 kB
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 };