import { VNode } from 'vue'; import { FieldContext, FieldMeta } from 'zan-hook-form'; import { BaseFormProps, FormValues, SlotFormType } from './BaseForm.type'; import { FieldType } from './FormItem.type'; import { RuleExpression } from './Rule.type'; type WatchData = any; export interface FieldProps extends Partial> { field?: FieldContext; /** * 字段类型 'field'|'formItem' * @default 'field' */ type?: string; /** * field 的 label 配置项目,会与错误信息拼接 */ label?: string; /** * 字段名称 * - 'a.b' * - 'a[0]' * - 'a.0.b' */ name: string; /** * 自定义表单验证(类型:string, object)与 useFormItem 的 rules 一致 */ rules?: RuleExpression; /** * 联动表单值, 不会触发表单验证 tip: 默认为 undefined 不会被赋值 */ modelValue?: T; /** * 降低field.initialValue的优先级 */ initialValueOverride?: boolean; /** * 表单默认值, tip: 只是单纯设置默认值,不会联动,优先级高 */ initialValue?: T; /** * 禁用自动绑定节点的自动收集数据功能 * - 手动绑定使用v-bind="{filed}", 需要设置此属性,可能受控的节点的value,onChange 与 modelValue,onUpdate:modelValue 自已手动设置的属性冲突,会导致数据无法正确收集 */ disableBind?: boolean; /** * 组件卸载时是否保留字段, 优先级比form上的配置高 * @default {false} 不保留 */ keepValueOnUnmount?: boolean; /** * 如果 input 组件上的属性需要联动表单项,这个配置可以重置表单项的值 * @deprecated */ watchDataFn?: (values: FormValues) => WatchData; /** * 不传递时只要 watchDataFn 返回的数据变动就是执行表单的重置 * @deprecated */ watchReset?: (watchData: WatchData) => boolean; /** * WatchData 变化是是执行的函数 * @deprecated */ watchCallback?: (watchData: WatchData) => void; /** * 联动原则 * - `string[]`: 直接指定字段名称 * - `'scope'`: 作用域嵌套关系 * - `'contain'`: 字段名称包含关系,data字段会依赖data.a和data.b */ linkVerify?: string[] | 'scope' | 'contain'; /** * 收集此field域下的所有错误信息,并展示当前field的FormErrorMessage组件中,且当前field作用域下的其他field下的FormErrorMessage不会展示错误 */ collectScopeError?: boolean; /** * 解除collectScopeErrorMessage作用域的控制, */ isolationCollectScope?: boolean; /** * 表单字段的其他信息 */ meta?: any; } export type FieldExposes = { /** * 重置表单项的状态 * @param state */ resetField: FieldContext['resetField']; /** * 重置表单值 * @param state */ handleReset: FieldContext['handleReset']; /** * 手动验证此项表单 */ validate: FieldContext['validate']; /** * 设置表单项状态 * @param state */ setState: FieldContext['setState']; /** * 设置表单项的 touched 状态 * @param isTouched */ setTouched: FieldContext['setTouched']; /** * 设置表单项的错误提示 * @param message */ setErrors: FieldContext['setErrors']; /** * 设置表单项的值 * @param value * @param shouldValidate */ setValue: FieldContext['setValue']; /** * 获取 input ref 实例 */ getInput: () => any; }; export type FieldDefaultSlotProps = { form: SlotFormType; name: string; values: any; meta: FieldMeta; required?: boolean; errorMessage?: string; errors: string[]; field: FieldType; }; export type FieldSlots = { /** * 会自动绑定组件的 props.modelValue, emits['update:modelValue'], emits['blur'] 或者(原始input) props.value, emits['change'], emits['blur'] */ default: (props: FieldDefaultSlotProps) => VNode; }; export {};