@form-renderer/adapter-vue3
Version:
Vue3 adapter for FormEngine
1,722 lines (1,610 loc) • 44.5 kB
TypeScript
import { Component } from 'vue';
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { ComputedRef } from 'vue';
import { DeepReadonly } from 'vue';
import { DefineComponent } from 'vue';
import { FormEngine } from '@form-renderer/engine';
import { FormModel as FormModel_3 } from '@form-renderer/engine';
import { FormSchema as FormSchema_3 } from '@form-renderer/engine';
import { JsonSchemaNode } from '@form-renderer/engine';
import { ListOperator } from '@form-renderer/engine';
import { PublicProps } from 'vue';
import { Ref } from 'vue';
import { RenderNode } from '@form-renderer/engine';
import { RenderSchema as RenderSchema_2 } from '@form-renderer/engine';
import { ShallowRef } from 'vue';
import { ValidationResult } from '@form-renderer/engine';
import { ValidatorFn } from '@form-renderer/engine';
import { VNode } from 'vue';
declare const __VLS_component: DefineComponent<Props, {
getEngine: () => ReactiveEngine | undefined;
getRegistry: () => ComponentRegistry | undefined;
getEventHandler: () => EventHandler | undefined;
getValue: (path?: string) => any;
updateValue: (path: string, value: any) => void;
updateValues: (values: Record<string, any>) => void;
getListOperator: (path: string) => {
append: (row: any) => void;
insert: (index: number, row: any) => any;
remove: (index: number) => any;
move: (from: number, to: number) => any;
swap: (a: number, b: number) => any;
replace: (index: number, row: any) => any;
clear: () => any;
} | undefined;
validate: (paths?: string[]) => Promise<ValidationResult>;
submit: () => Promise<void>;
reset: (target?: any | "default") => Promise<void>;
flush: () => void;
registerComponent: (definition: ComponentDefinition) => void;
registerComponents: (definitions: ComponentDefinition[]) => void;
registerPreset: (preset: ComponentPreset) => void;
scrollToField: (path: string) => void;
focusField: (path: string) => void;
waitFlush: () => Promise<void>;
destroy: () => void;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
submit: (model: FormModel) => any;
"field-blur": (event: {
path: string;
event: FocusEvent;
}) => any;
"field-focus": (event: {
path: string;
event: FocusEvent;
}) => any;
"update:model": (model: FormModel) => any;
change: (event: {
path: string;
value: any;
}) => any;
"list-change": (event: {
[key: string]: any;
path: string;
operation: string;
}) => any;
validate: (result: ValidationResult) => any;
ready: (engine: ReactiveEngine) => any;
}, string, PublicProps, Readonly<Props> & Readonly<{
onSubmit?: ((model: FormModel) => any) | undefined;
"onField-blur"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
"onField-focus"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
"onUpdate:model"?: ((model: FormModel) => any) | undefined;
onChange?: ((event: {
path: string;
value: any;
}) => any) | undefined;
"onList-change"?: ((event: {
[key: string]: any;
path: string;
operation: string;
}) => any) | undefined;
onValidate?: ((result: ValidationResult) => any) | undefined;
onReady?: ((engine: ReactiveEngine) => any) | undefined;
}>, {
options: {
engine?: {
enableUpdateScheduler?: boolean;
};
eventHandler?: {
enableBatch?: boolean;
batchDelay?: number;
};
render?: {
showRequiredAsterisk?: boolean;
labelAlign?: "left" | "right" | "top";
labelWidth?: string | number;
};
formItem?: Component;
theme?: {
size?: "large" | "default" | "small";
classPrefix?: string;
};
};
}, {}, {}, {}, string, ComponentProvideOptions, false, {
schemaRendererRef: unknown;
}, HTMLDivElement>;
declare const __VLS_component_2: any;
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
'before-form'?(_: {}): any;
'after-form'?(_: {}): any;
};
refs: {
schemaRendererRef: unknown;
};
rootEl: HTMLDivElement;
};
declare function __VLS_template_2(): any;
declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
declare type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S;
};
};
declare type __VLS_WithTemplateSlots_2<T, S> = T & {
new (): {
$slots: S;
};
};
/**
* 批量执行 Promise
* @param promises Promise 数组
* @param concurrency 并发数
* @returns 执行结果
*/
export declare function batchPromises<T>(promises: (() => Promise<T>)[], concurrency?: number): Promise<T[]>;
/**
* 批量更新管理器
*/
export declare class BatchUpdateManager {
private pending;
private timer;
private flushCallback;
constructor(flushCallback: (updates: UpdateItem[]) => void);
/**
* 调度更新
* @param path 路径
* @param value 值
*/
scheduleUpdate(path: string, value: any): void;
/**
* 立即执行所有更新
*/
flush(): void;
/**
* 清空待处理的更新
*/
clear(): void;
/**
* 是否有待处理的更新
*/
hasPending(): boolean;
/**
* 获取待处理的更新数量
*/
getPendingCount(): number;
}
/**
* 构建校验上下文
*
* 这是一个便利函数,一次性获取所有校验相关信息。
*
* @param field - 字段配置
* @param computed - 计算属性
* @returns 校验上下文
*
* @example
* ```ts
* const context = buildValidationContext(field, computed)
* if (!context.shouldValidate) {
* return [] // 不需要校验
* }
*
* const rules = []
* if (context.required) {
* rules.push({ required: true, message: '必填' })
* }
* context.validators.forEach(v => {
* rules.push(convertValidator(v))
* })
* ```
*/
export declare function buildValidationContext(field: FormField, computed: ComputedProperties): ValidationContext;
/**
* 组件定义
*/
export declare interface ComponentDefinition<T = any> {
/**
* 组件名称(唯一标识)
*/
name: string;
/**
* Vue 组件
*/
component: Component;
/**
* 组件类型
*/
type: ComponentType;
/**
* 默认属性
*/
defaultProps?: Record<string, any>;
/**
* 值转换器
*/
valueTransformer?: ValueTransformer<T>;
/**
* 事件映射
*/
eventMapping?: EventMapping;
/**
* 是否需要 FormItem 包裹
*/
needFormItem?: boolean;
/**
* 自定义渲染逻辑
*/
customRender?: (props: RenderProps) => VNode;
}
/**
* 组件预设
*/
export declare interface ComponentPreset {
/**
* 预设名称
*/
name: string;
/**
* 组件定义列表
*/
components: ComponentDefinition[];
/**
* 表单项包装组件(如 UI 库的 FormItem)
*/
formItem?: Component;
/**
* Rule 转换器(可选)
*
* 用于将 Engine 的 validators 转换为 UI 框架的 rules
*/
ruleConverter?: RuleConverter;
/**
* 主题配置
*/
theme?: ThemeConfig;
/**
* 初始化函数
*/
setup?: () => void | Promise<void>;
}
/**
* 组件注册中心
* 负责管理所有注册的组件定义,支持单个注册、批量注册和预设注册
*/
export declare class ComponentRegistry {
private components;
/**
* 注册单个组件
*/
register(definition: ComponentDefinition): void;
/**
* 批量注册组件
*/
registerBatch(definitions: ComponentDefinition[]): void;
/**
* 获取组件定义
*/
get(name: string): ComponentDefinition | undefined;
/**
* 检查组件是否存在
*/
has(name: string): boolean;
/**
* 按类型获取所有组件
*/
getByType(type: ComponentType): ComponentDefinition[];
/**
* 注册组件预设
*/
registerPreset(preset: ComponentPreset): void;
/**
* 获取所有已注册的组件名称
*/
getRegisteredNames(): string[];
/**
* 获取所有已注册的组件定义
*/
getAll(): ComponentDefinition[];
/**
* 清空所有注册的组件
*/
clear(): void;
/**
* 注销单个组件
*/
unregister(name: string): boolean;
/**
* 验证组件定义的有效性
*/
private validateDefinition;
/**
* 克隆注册表(用于创建隔离的组件环境)
*/
clone(): ComponentRegistry;
/**
* 合并另一个注册表(用于组合多个预设)
*/
merge(other: ComponentRegistry, overwrite?: boolean): void;
/**
* 获取注册表统计信息
*/
getStats(): {
total: number;
byType: Record<ComponentType, number>;
};
}
/**
* 组件注册表(内部使用)
*/
declare interface ComponentRegistry_2 {
/**
* 注册组件
*/
register(definition: ComponentDefinition): void;
/**
* 批量注册
*/
registerBatch(definitions: ComponentDefinition[]): void;
/**
* 获取组件定义
*/
get(name: string): ComponentDefinition | undefined;
/**
* 检查组件是否存在
*/
has(name: string): boolean;
/**
* 按类型获取组件
*/
getByType(type: ComponentType): ComponentDefinition[];
/**
* 注册预设
*/
registerPreset(preset: ComponentPreset): void;
/**
* 清空注册表
*/
clear(): void;
}
/**
* 组件类型
*/
export declare type ComponentType = 'field' | 'layout' | 'list' | 'form';
/**
* 计算属性接口(与 Engine 的 RenderNode.computed 对应)
*/
export declare interface ComputedProperties {
required?: boolean;
disabled?: boolean;
readonly?: boolean;
ifShow?: boolean;
show?: boolean;
}
/**
* 创建批量更新函数
* @param handler 处理函数
* @returns 批量更新函数
*/
export declare function createBatchUpdate<T extends any[]>(handler: (...args: T) => void): (...args: T) => void;
/**
* 创建一个新的组件注册表实例
*/
export declare function createComponentRegistry(): ComponentRegistry;
/**
* 从组件映射创建组件定义
* @param components 组件映射
* @returns 组件定义列表
*/
export declare function createDefinitionsFromMap(components: Record<string, Component>): ComponentDefinition[];
/**
* 创建事件处理器实例
*/
export declare function createEventHandler(engine: ReactiveEngine, registry: ComponentRegistry, options?: EventHandlerOptions): EventHandler;
/**
* 创建标准的字段组件 Emits 定义
*/
export declare function createFieldEmits(): Array<'update:modelValue' | 'change' | 'focus' | 'blur'>;
/**
* 创建标准的字段组件 Props 定义
*/
export declare function createFieldProps(): {
modelValue: {
type: (ObjectConstructor | ArrayConstructor | DateConstructor | NumberConstructor | BooleanConstructor | StringConstructor)[];
default: undefined;
};
disabled: {
type: BooleanConstructor;
default: boolean;
};
readonly: {
type: BooleanConstructor;
default: boolean;
};
placeholder: {
type: StringConstructor;
default: string;
};
};
/**
* 创建性能监控器
*
* @example
* ```typescript
* const monitor = createPerformanceMonitor()
*
* const { updateValue } = useFormAdapter({
* schema,
* onChange: ({ path, value }) => {
* const start = performance.now()
* handleChange(path, value)
* monitor.recordUpdate(performance.now() - start)
* }
* })
*
* // 定期查看性能
* setInterval(() => {
* monitor.report()
* }, 5000)
* ```
*/
export declare function createPerformanceMonitor(): PerformanceMonitor;
/**
* 创建响应式引擎实例
*/
export declare function createReactiveEngine(options: ReactiveEngineOptions): ReactiveEngine;
/**
* 创建渲染上下文
* @param base 基础上下文
* @param overrides 覆盖属性
* @returns 新的渲染上下文
*/
export declare function createRenderContext(base: RenderContext, overrides?: Partial<RenderContext>): RenderContext;
/**
* 监控组件渲染次数
*/
export declare function createRenderCounter(): {
increment: () => number;
getCount: () => number;
reset: () => void;
};
/**
* 创建更新队列
* @param options 选项
* @returns 更新队列
*/
export declare function createUpdateQueue(options: {
maxSize?: number;
flushDelay?: number;
onFlush: (updates: UpdateItem[]) => void;
}): {
/**
* 添加更新
*/
add(update: UpdateItem): void;
/**
* 立即执行
*/
flush: () => void;
/**
* 清空队列
*/
clear(): void;
/**
* 获取队列大小
*/
size(): number;
};
/**
* 创建更新调度器实例
*/
export declare function createUpdateScheduler(engine: FormEngine): UpdateScheduler;
/**
* 通用工具函数
*/
/**
* 防抖函数
* @param fn 要防抖的函数
* @param delay 延迟时间(毫秒)
* @returns 防抖后的函数
*/
export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
/**
* 深拷贝对象
* @param obj 对象
* @returns 拷贝后的对象
*/
export declare function deepClone<T>(obj: T): T;
/**
* 合并对象(深度合并)
* @param target 目标对象
* @param sources 源对象
* @returns 合并后的对象
*/
export declare function deepMerge<T extends Record<string, any>>(target: T, ...sources: Partial<T>[]): T;
/**
* 快速定义 Checkbox/Switch 类组件
*/
export declare function defineBooleanComponent(name: string, component: Component, options?: Partial<Omit<ComponentDefinition, 'name' | 'component' | 'type'>>): ComponentDefinition;
/**
* 快速定义 DatePicker 类组件
*/
export declare function defineDateComponent(name: string, component: Component, options?: Partial<Omit<ComponentDefinition, 'name' | 'component' | 'type'>>): ComponentDefinition;
/**
* 创建字段组件定义的快捷方法
*/
export declare function defineFieldComponent(options: {
name: string;
component: Component;
valueType?: 'string' | 'number' | 'boolean' | 'array' | 'date' | 'custom';
defaultProps?: Record<string, any>;
valueTransformer?: ValueTransformer;
eventMapping?: EventMapping;
needFormItem?: boolean;
}): ComponentDefinition;
/**
* 快速定义 Input 类组件
*/
export declare function defineInputComponent(name: string, component: Component, options?: Partial<Omit<ComponentDefinition, 'name' | 'component' | 'type'>>): ComponentDefinition;
/**
* 创建布局组件定义的快捷方法
*/
export declare function defineLayoutComponent(options: {
name: string;
component: Component;
defaultProps?: Record<string, any>;
}): ComponentDefinition;
/**
* 创建列表组件定义的快捷方法
*/
export declare function defineListComponent(options: {
name: string;
component: Component;
defaultProps?: Record<string, any>;
}): ComponentDefinition;
/**
* 快速定义 NumberInput 类组件
*/
export declare function defineNumberComponent(name: string, component: Component, options?: Partial<Omit<ComponentDefinition, 'name' | 'component' | 'type'>>): ComponentDefinition;
/**
* 快速定义 Select 类组件(多选)
*/
export declare function defineSelectComponent(name: string, component: Component, multiple?: boolean, options?: Partial<Omit<ComponentDefinition, 'name' | 'component' | 'type'>>): ComponentDefinition;
/**
* 延迟执行
* @param ms 毫秒数
* @returns Promise
*/
export declare function delay(ms: number): Promise<void>;
/**
* 事件处理器
* 负责处理所有用户交互事件,协调 ReactiveEngine 和 ComponentRegistry
*/
export declare class EventHandler {
private engine;
private registry;
private batchManager?;
private options;
constructor(engine: ReactiveEngine, registry: ComponentRegistry, options?: EventHandlerOptions);
/**
* 处理字段值变化
*/
handleFieldChange(path: string, value: any, componentName: string): void;
/**
* 处理字段聚焦
*/
handleFieldFocus(_path: string, _event?: FocusEvent): void;
/**
* 处理字段失焦
*/
handleFieldBlur(_path: string, _event?: FocusEvent): void;
/**
* 处理列表添加行
*/
handleListAdd(path: string, defaultRow?: any): void;
/**
* 处理列表删除行
*/
handleListRemove(path: string, index: number): void;
/**
* 处理列表移动行
*/
handleListMove(path: string, from: number, to: number): void;
/**
* 处理列表插入行
*/
handleListInsert(path: string, index: number, row?: any): void;
/**
* 批量更新多个字段
*/
batchUpdate(updates: Array<{
path: string;
value: any;
component?: string;
}>): void;
/**
* 立即刷新所有待处理的批量更新
*/
flush(): void;
/**
* 销毁事件处理器
*/
destroy(): void;
/**
* 应用值转换器
*/
private transformValue;
/**
* 更新引擎(支持批量)
*/
private updateEngine;
/**
* 统一的错误处理
*/
private handleError;
}
/**
* 事件处理器配置选项
*/
export declare interface EventHandlerOptions {
/**
* 是否启用批量更新
* @default false
*/
enableBatch?: boolean;
/**
* 批量更新延迟(毫秒)
* @default 16
*/
batchDelay?: number;
/**
* 值转换错误处理
*/
onTransformError?: (error: Error, path: string, value: any) => void;
/**
* 更新错误处理
*/
onUpdateError?: (error: Error, path: string, value: any) => void;
}
/**
* 事件映射
*/
export declare interface EventMapping {
/**
* 值变化事件,默认: 'update:modelValue'
*/
onChange?: string;
/**
* 输入事件(某些组件需要)
*/
onInput?: string;
/**
* 聚焦事件
*/
onFocus?: string;
/**
* 失焦事件
*/
onBlur?: string;
}
/**
* 提取 required 配置
*
* @param field - 字段配置
* @param computed - 计算属性
* @returns required 状态,如果不需要校验则返回 undefined
*
* @example
* ```ts
* const required = extractRequired(field, computed)
* if (required) {
* // 添加必填校验
* }
* ```
*/
export declare function extractRequired(_field: FormField, computed: ComputedProperties): boolean | undefined;
/**
* 提取 validators
*
* @param field - 字段配置
* @param computed - 计算属性
* @returns 校验器数组,如果不需要校验则返回空数组
*
* @example
* ```ts
* const validators = extractValidators(field, computed)
* validators.forEach(validator => {
* // 转换为 UI 框架的 rule
* })
* ```
*/
export declare function extractValidators(field: FormField, computed: ComputedProperties): ValidatorFn[];
/**
* 字段组件 Emits 类型
*/
export declare interface FieldComponentEmits {
(e: 'update:modelValue', value: any): void;
(e: 'change', value: any): void;
(e: 'focus', event: FocusEvent): void;
(e: 'blur', event: FocusEvent): void;
}
/**
* 字段组件 Props 类型
*/
export declare interface FieldComponentProps {
modelValue: any;
disabled?: boolean;
readonly?: boolean;
placeholder?: string;
[key: string]: any;
}
export declare const FieldWrapper: DefineComponent<Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"field-change": (event: {
path: string;
value: any;
component: string;
}) => any;
"field-blur": (event: {
path: string;
event: FocusEvent;
}) => any;
"field-focus": (event: {
path: string;
event: FocusEvent;
}) => any;
}, string, PublicProps, Readonly<Props_5> & Readonly<{
"onField-change"?: ((event: {
path: string;
value: any;
component: string;
}) => any) | undefined;
"onField-blur"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
"onField-focus"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
export declare const FormAdapter: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export declare const FormContainer: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
/**
* 字段配置接口(与 Engine 的 RenderNode 部分字段对应)
*/
export declare interface FormField {
validators?: ValidatorFn[];
required?: any;
[key: string]: any;
}
export declare type FormModel = Record<string, any>;
declare type FormModel_2 = Record<string, any>;
export declare type FormSchema = JsonSchemaNode;
declare type FormSchema_2 = JsonSchemaNode;
/**
* 生成唯一 ID
* @param prefix 前缀
* @returns 唯一 ID
*/
export declare function generateId(prefix?: string): string;
/**
* 获取嵌套对象的值
* @param obj 对象
* @param path 路径
* @param defaultValue 默认值
* @returns 值
*/
export declare function get(obj: any, path: string, defaultValue?: any): any;
/**
* 获取组件事件映射
* @param definition 组件定义
* @returns 事件映射
*/
export declare function getEventMapping(definition: ComponentDefinition): Required<NonNullable<ComponentDefinition['eventMapping']>>;
/**
* 按路径获取嵌套对象的值(get 的别名,用于语义化)
* @param obj 对象
* @param path 路径
* @param defaultValue 默认值
* @returns 值
*/
export declare function getValueByPath(obj: any, path: string, defaultValue?: any): any;
/**
* 按路径分组更新项
* @param updates 更新项
* @returns 分组后的更新项
*/
export declare function groupUpdatesByPath(updates: UpdateItem[]): Map<string, UpdateItem[]>;
/**
* 安装函数(Vue 插件)
*/
export declare function install(_app: any): void;
/**
* 判断是否为组件预设
* @param value 值
* @returns 是否为预设
*/
export declare function isComponentPreset(value: any): value is ComponentPreset;
/**
* 判断是否为空值
* @param value 值
* @returns 是否为空
*/
export declare function isEmpty(value: any): boolean;
export declare const LayoutContainer: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"list-add": (event: {
path: string;
}) => any;
"list-remove": (event: {
path: string;
index: number;
}) => any;
"list-move": (event: {
path: string;
from: number;
to: number;
}) => any;
"field-change": (event: {
path: string;
value: any;
component: string;
}) => any;
"field-blur": (event: {
path: string;
event: FocusEvent;
}) => any;
"field-focus": (event: {
path: string;
event: FocusEvent;
}) => any;
}, string, PublicProps, Readonly<Props_3> & Readonly<{
"onList-add"?: ((event: {
path: string;
}) => any) | undefined;
"onList-remove"?: ((event: {
path: string;
index: number;
}) => any) | undefined;
"onList-move"?: ((event: {
path: string;
from: number;
to: number;
}) => any) | undefined;
"onField-change"?: ((event: {
path: string;
value: any;
component: string;
}) => any) | undefined;
"onField-blur"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
"onField-focus"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
export declare const ListContainer: DefineComponent<Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
"list-add": (event: {
path: string;
value: any;
}) => any;
"list-remove": (event: {
path: string;
index: number;
}) => any;
"list-move": (event: {
path: string;
from: number;
to: number;
}) => any;
"field-change": (event: {
path: string;
value: any;
component: string;
}) => any;
"field-blur": (event: {
path: string;
event: FocusEvent;
}) => any;
"field-focus": (event: {
path: string;
event: FocusEvent;
}) => any;
}, string, PublicProps, Readonly<Props_4> & Readonly<{
"onList-add"?: ((event: {
path: string;
value: any;
}) => any) | undefined;
"onList-remove"?: ((event: {
path: string;
index: number;
}) => any) | undefined;
"onList-move"?: ((event: {
path: string;
from: number;
to: number;
}) => any) | undefined;
"onField-change"?: ((event: {
path: string;
value: any;
component: string;
}) => any) | undefined;
"onField-blur"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
"onField-focus"?: ((event: {
path: string;
event: FocusEvent;
}) => any) | undefined;
}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
/**
* 性能计时器辅助函数
*
* @example
* ```typescript
* const monitor = createPerformanceMonitor()
*
* const timer = measurePerformance(() => {
* // 你的操作
* updateValue('name', 'John')
* }, (duration) => {
* monitor.recordUpdate(duration)
* })
* ```
*/
export declare function measurePerformance<T>(fn: () => T, callback?: (duration: number) => void): T;
/**
* 异步性能计时
*
* @example
* ```typescript
* await measurePerformanceAsync(async () => {
* await validate()
* }, (duration) => {
* console.log('校验耗时:', duration, 'ms')
* })
* ```
*/
export declare function measurePerformanceAsync<T>(fn: () => Promise<T>, callback?: (duration: number) => void): Promise<T>;
/**
* 合并组件定义(用于扩展已有组件)
*/
export declare function mergeComponentDefinition(base: ComponentDefinition, overrides: Partial<ComponentDefinition>): ComponentDefinition;
/**
* 获取组件 props
* @param definition 组件定义
* @param props 原始 props
* @returns 合并后的 props
*/
export declare function mergeComponentProps(definition: ComponentDefinition, props: Record<string, any>): Record<string, any>;
/**
* 合并更新项
* @param updates 更新项数组
* @returns 合并后的更新项(相同路径取最后一个)
*/
export declare function mergeUpdates(updates: UpdateItem[]): UpdateItem[];
/**
* 判断组件是否需要 FormItem
* @param definition 组件定义
* @returns 是否需要 FormItem
*/
export declare function needsFormItem(definition: ComponentDefinition): boolean;
/**
* 标准化组件定义
* 处理默认值、类型推断等
*/
export declare function normalizeComponent(options: NormalizeOptions): ComponentDefinition;
/**
* 批量标准化组件定义
*/
export declare function normalizeComponents(options: NormalizeOptions[]): ComponentDefinition[];
/**
* 组件标准化选项
*/
export declare interface NormalizeOptions {
name: string;
component: Component;
type?: ComponentType;
defaultProps?: Record<string, any>;
valueTransformer?: ValueTransformer;
eventMapping?: EventMapping;
needFormItem?: boolean;
customRender?: any;
}
/**
* 性能监控工具
*/
/**
* 性能指标
*/
export declare interface PerformanceMetrics {
/**
* 更新总次数
*/
updateCount: number;
/**
* 渲染总次数
*/
renderCount: number;
/**
* 平均更新耗时(ms)
*/
averageUpdateTime: number;
/**
* 最后一次更新耗时(ms)
*/
lastUpdateTime: number;
/**
* 最长更新耗时(ms)
*/
maxUpdateTime: number;
/**
* 最短更新耗时(ms)
*/
minUpdateTime: number;
/**
* 总耗时(ms)
*/
totalTime: number;
}
/**
* 性能监控器
*/
export declare interface PerformanceMonitor {
/**
* 记录一次更新
*/
recordUpdate: (duration: number) => void;
/**
* 记录一次渲染
*/
recordRender: () => void;
/**
* 获取性能指标
*/
getMetrics: () => PerformanceMetrics;
/**
* 重置指标
*/
reset: () => void;
/**
* 打印报告
*/
report: () => void;
}
/**
* FormAdapter Props
*/
declare interface Props {
schema: FormSchema;
model?: FormModel;
components?: ComponentDefinition[] | ComponentPreset;
options?: {
engine?: {
enableUpdateScheduler?: boolean;
};
eventHandler?: {
enableBatch?: boolean;
batchDelay?: number;
};
render?: {
showRequiredAsterisk?: boolean;
labelAlign?: 'left' | 'right' | 'top';
labelWidth?: string | number;
};
formItem?: Component;
theme?: {
size?: 'large' | 'default' | 'small';
classPrefix?: string;
};
};
}
declare interface Props_2 {
node: RenderNode;
context: RenderContext;
}
declare interface Props_3 {
node: RenderNode;
context: RenderContext;
}
declare interface Props_4 {
node: RenderNode;
context: RenderContext;
}
declare interface Props_5 {
node: RenderNode;
context: RenderContext;
}
/**
* 响应式引擎
* 将 FormEngine 与 Vue3 响应式系统集成
*/
export declare class ReactiveEngine {
private engine;
private renderSchemaRef;
private modelRef;
private subscriptions;
private isDestroyed;
private updateScheduler?;
constructor(options: ReactiveEngineOptions);
/**
* 设置事件监听器
*/
private setupEventListeners;
/**
* 处理值变化
* 🔥 简化:Engine 已采用不可变更新,直接获取新引用即可
*/
private handleValueChange;
/**
* 处理结构变化
* 🔥 简化:Engine 已采用不可变更新,直接获取新引用即可
*/
private handleStructureChange;
/**
* 获取响应式的渲染 Schema(只读)
*/
getRenderSchema(): DeepReadonly<ShallowRef<RenderSchema>>;
/**
* 获取响应式的数据模型(只读)
*/
getModel(): DeepReadonly<ShallowRef<FormModel_2>>;
/**
* 获取原始 FormEngine 实例
*/
getEngine(): FormEngine;
/**
* 更新值
*/
updateValue(path: string, value: any): void;
updateValue(updates: Record<string, any>): void;
/**
* 立即刷新所有待处理的更新(仅在启用调度器时有效)
*/
flush(): void;
/**
* 等待刷新所有待处理的更新(仅在启用调度器时有效)
*/
waitFlush(): Promise<void>;
/**
* 设置表单 Schema
*/
setFormSchema(schema: FormSchema_2): void;
/**
* 重置表单
* @param target - 重置目标
* - 不传:重置到初始状态(initialModel)
* - 'default':重置到 schema 的 defaultValue
* - 具体对象:重置到指定值
*/
reset(target?: any | 'default'): void;
/**
* 校验表单
*/
validate(paths?: string[]): Promise<any>;
/**
* 获取列表操作器
* 返回一个包装了 FormEngine list 方法的对象
*/
getListOperator(path: string): {
append: (row: any) => void;
insert: (index: number, row: any) => any;
remove: (index: number) => any;
move: (from: number, to: number) => any;
swap: (a: number, b: number) => any;
replace: (index: number, row: any) => any;
clear: () => any;
};
/**
* 销毁引擎,清理所有订阅
*/
destroy(): void;
/**
* 检查引擎是否已销毁
*/
get destroyed(): boolean;
}
declare type ReactiveEngine_2 = ReactiveEngine;
/**
* 响应式引擎选项
*/
export declare interface ReactiveEngineOptions {
schema: FormSchema_2;
model?: FormModel_2;
enableUpdateScheduler?: boolean;
}
/**
* 渲染上下文
*/
export declare interface RenderContext {
/**
* FormEngine 实例
*/
engine: ReactiveEngine_2;
/**
* 组件注册表
*/
registry: ComponentRegistry_2;
/**
* 事件处理器
*/
eventHandler?: any;
/**
* 当前渲染路径
*/
path: string[];
/**
* 渲染深度
*/
depth: number;
/**
* 父节点类型
*/
parentType?: ComponentType;
/**
* 列表行索引(列表项专用)
*/
rowIndex?: number;
/**
* FormItem 组件
*/
formItem?: Component;
/**
* Rule 转换器(可选)
*/
ruleConverter?: RuleConverter;
/**
* 配置选项
*/
options?: any;
}
/**
* 渲染属性
*/
declare interface RenderProps {
/**
* 渲染节点
*/
node: RenderNode;
/**
* 渲染上下文
*/
context: RenderContext;
/**
* 字段值(字段组件专用)
*/
value?: any;
/**
* 更新值函数(字段组件专用)
*/
updateValue?: (value: any) => void;
}
declare type RenderSchema = RenderNode;
/**
* Rule 转换器类型
*
* 将 Engine 的 validators 转换为 UI 框架特定的 rules 格式。
*
* @param node - 渲染节点(包含 validators、required 等)
* @param computed - 计算属性(包含 disabled、show 等)
* @param context - 渲染上下文(包含 engine 等,用于访问表单数据)
* @returns 框架特定的 rules 数组
*
* @example
* ```ts
* const converter: RuleConverter = (node, computed, context) => {
* if (!computed.show || computed.disabled) {
* return []
* }
*
* const rules = []
* if (computed.required) {
* rules.push({ required: true, message: '必填' })
* }
* // 可以使用 context.engine 访问表单数据
* // 转换 validators...
* return rules
* }
* ```
*/
export declare type RuleConverter = (node: RenderNode, computed: Record<string, any>, context: RenderContext) => any[];
export declare const SchemaRenderer: DefineComponent<Props_2, {
containerRef: Ref<any, any>;
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, any, any>;
/**
* 设置嵌套对象的值
* @param obj 对象
* @param path 路径
* @param value 值
*/
export declare function set(obj: any, path: string, value: any): void;
/**
* 判断字段是否需要校验
*
* 字段需要满足以下条件才会被校验:
* - 字段参与渲染(ifShow = true)
* - 字段可见(show = true)
* - 字段未被禁用(disabled = false)
*
* @param field - 字段配置
* @param computed - 计算属性
* @returns 是否需要校验
*
* @example
* ```ts
* const field = { validators: [...] }
* const computed = { ifShow: true, show: true, disabled: false }
* const result = shouldValidateField(field, computed) // true
* ```
*/
export declare function shouldValidateField(_field: FormField, computed: ComputedProperties): boolean;
/**
* 主题配置
*/
export declare interface ThemeConfig {
/**
* 组件大小
*/
size?: 'large' | 'default' | 'small';
/**
* 自定义类名前缀
*/
classPrefix?: string;
/**
* 自定义样式变量
*/
cssVariables?: Record<string, string>;
}
/**
* 节流函数
* @param fn 要节流的函数
* @param limit 限制时间(毫秒)
* @returns 节流后的函数
*/
export declare function throttle<T extends (...args: any[]) => any>(fn: T, limit: number): (...args: Parameters<T>) => void;
/**
* 值转换错误
*/
export declare class TransformError extends Error {
componentName: string;
value: any;
constructor(message: string, componentName: string, value: any);
}
/**
* 尝试执行函数
* @param fn 函数
* @param fallback 失败时的返回值
* @returns 执行结果
*/
export declare function tryCall<T>(fn: () => T, fallback?: T): T | undefined;
/**
* 更新项(批量更新用)
*/
declare interface UpdateItem {
/**
* 更新路径
*/
path: string;
/**
* 更新值
*/
value: any;
}
/**
* 更新调度器
* 负责批量收集和调度更新,减少不必要的引擎调用和渲染
*/
export declare class UpdateScheduler {
private engine;
private pendingUpdates;
private timer;
private flushCallbacks;
constructor(engine: FormEngine);
/**
* 调度一个更新
* 多个连续的更新会被合并为一次批量更新
*/
scheduleUpdate(path: string, value: any, callback?: () => void): void;
/**
* 批量调度多个更新
*/
scheduleBatch(updates: Record<string, any>, callback?: () => void): void;
/**
* 立即刷新所有待处理的更新
*/
flush(): void;
/**
* 取消所有待处理的更新
*/
cancel(): void;
/**
* 检查是否有待处理的更新
*/
hasPending(): boolean;
/**
* 获取待处理更新的数量
*/
getPendingCount(): number;
/**
* 获取待处理的更新路径列表
*/
getPendingPaths(): string[];
/**
* 销毁调度器
*/
destroy(): void;
}
/**
* 按路径更新嵌套对象的值(set 的别名,用于语义化)
* @param obj 对象
* @param path 路径
* @param value 值
*/
export declare function updateValueByPath(obj: any, path: string, value: any): void;
/**
* 字段组件开发辅助函数
* 提供标准的值处理、事件处理逻辑
*
* @example
* ```vue
* <script setup lang="ts">
* import { useFieldComponent } from '@form-renderer/adapter-vue3-vue'
*
* const props = defineProps<FieldComponentProps>()
* const emit = defineEmits<FieldComponentEmits>()
*
* const { internalValue, handleChange, handleFocus, handleBlur, isDisabled } =
* useFieldComponent({ props, emit })
* </script>
* ```
*/
export declare function useFieldComponent(options: UseFieldComponentOptions): UseFieldComponentReturn;
/**
* useFieldComponent 选项
*/
export declare interface UseFieldComponentOptions {
props: FieldComponentProps;
emit: FieldComponentEmits;
valueTransformer?: ValueTransformer;
validateOnChange?: boolean;
validateOnBlur?: boolean;
}
/**
* useFieldComponent 返回值
*/
export declare interface UseFieldComponentReturn {
internalValue: Ref<any>;
isDisabled: ComputedRef<boolean>;
handleChange: (value: any) => void;
handleFocus: (event: FocusEvent) => void;
handleBlur: (event: FocusEvent) => void;
}
/**
* 表单适配器组合式函数
* 提供编程式的表单管理能力
*
* @example
* ```typescript
* const {
* renderSchema,
* model,
* validate,
* submit,
* reset
* } = useFormAdapter({
* schema: mySchema,
* model: myModel,
* components: ElementPlusPreset,
* onSubmit: async (data) => {
* await api.submit(data)
* }
* })
* ```
*/
export declare function useFormAdapter(options: UseFormAdapterOptions): UseFormAdapterReturn;
/**
* useFormAdapter 选项
*/
export declare interface UseFormAdapterOptions {
/**
* 表单 Schema
*/
schema: FormSchema_3;
/**
* 表单数据
*/
model?: FormModel_3;
/**
* 组件定义
*/
components?: ComponentDefinition[] | ComponentPreset;
/**
* 引擎配置
*/
engineOptions?: Partial<ReactiveEngineOptions>;
/**
* 事件处理器配置
*/
eventHandlerOptions?: EventHandlerOptions;
/**
* 初始化完成回调
*/
onReady?: (engine: ReactiveEngine) => void;
/**
* 值变化回调
*/
onChange?: (event: {
path: string;
value: any;
}) => void;
/**
* 校验完成回调
*/
onValidate?: (result: ValidationResult) => void;
/**
* 提交回调
*/
onSubmit?: (model: FormModel_3) => Promise<void> | void;
}
/**
* useFormAdapter 返回值
*/
export declare interface UseFormAdapterReturn {
engine: Readonly<Ref<ReactiveEngine | undefined>>;
registry: Readonly<Ref<ComponentRegistry | undefined>>;
eventHandler: Readonly<Ref<EventHandler | undefined>>;
renderSchema: ComputedRef<RenderSchema_2 | undefined>;
model: ComputedRef<FormModel_3 | undefined>;
loading: Readonly<Ref<boolean>>;
errors: Readonly<Ref<ValidationErrors | undefined>>;
init: () => Promise<void>;
getValue: (path?: string) => any;
updateValue: (path: string, value: any) => void;
updateValues: (values: Record<string, any>) => void;
validate: (paths?: string[]) => Promise<ValidationResult>;
submit: () => Promise<void>;
reset: () => void;
destroy: () => void;
registerComponent: (def: ComponentDefinition) => void;
registerComponents: (defs: ComponentDefinition[]) => void;
registerPreset: (preset: ComponentPreset) => void;
getListOperator: (path: string) => ListOperator | undefined;
}
/**
* 校验上下文
*/
export declare interface ValidationContext {
/** 是否必填 */
required: boolean;
/** 校验器列表 */
validators: ValidatorFn[];
/** 是否应该校验 */
shouldValidate: boolean;
}
/**
* 校验错误类型
*/
export declare interface ValidationErrors {
[path: string]: string[];
}
/**
* 值转换器
*/
export declare interface ValueTransformer<T = any, U = any> {
/**
* 引擎值转组件值
*/
toComponent: (engineValue: T) => U;
/**
* 组件值转引擎值
*/
fromComponent: (componentValue: U) => T;
}
export declare const version = "0.0.1";
/**
* 为组件定义添加通用属性包装
*/
export declare function wrapWithCommonProps(definition: ComponentDefinition, commonProps: Record<string, any>): ComponentDefinition;
export { }