UNPKG

@form-renderer/adapter-vue3

Version:
1,722 lines (1,610 loc) 44.5 kB
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 { }