UNPKG

vue-formic-dynamic-forms

Version:

Powerful library for creating dynamic, validated forms in Vue 3 based on JSON schemas

1,189 lines (1,182 loc) 242 kB
import { App } from 'vue'; import { AsyncValidationResult as AsyncValidationResult_2 } from '../types'; import { AsyncValidationResult as AsyncValidationResult_3 } from '..'; import { default as CheckboxField } from './CheckboxField.vue'; import { Component } from 'vue'; import { ComponentOptionsMixin } from 'vue'; import { ComponentProvideOptions } from 'vue'; import { ComputedRef } from 'vue'; import { ConditionalLogic as ConditionalLogic_2 } from './field'; import { ConditionsEngine as ConditionsEngine_2 } from '..'; import { DefineComponent } from 'vue'; import { FieldOption as FieldOption_2 } from '../types'; import { FieldOption as FieldOption_3 } from '..'; import { FieldSchema as FieldSchema_2 } from '../types'; import { FieldType as FieldType_2 } from '../types'; import { FieldType as FieldType_3 } from '..'; import { FormGroup as FormGroup_2 } from '../types'; import { FormSchema as FormSchema_2 } from './form'; import { PublicProps } from 'vue'; import { Ref } from 'vue'; import { ValidationEngine as ValidationEngine_2 } from '..'; import { ValidationResult as ValidationResult_2 } from '../types'; import { WritableComputedRef } from 'vue'; declare const __VLS_component: DefineComponent<Props, { formHandler: { formData: Readonly<Ref< { readonly [x: string]: any; }, { readonly [x: string]: any; }>>; formState: { readonly values: { readonly [x: string]: any; }; readonly errors: { readonly [x: string]: string; }; readonly touched: { readonly [x: string]: boolean; }; readonly dirty: { readonly [x: string]: boolean; }; readonly isSubmitting: boolean; readonly isValidating: boolean; readonly isValid: boolean; readonly isDirty: boolean; readonly submitCount: number; readonly fields: { readonly [x: string]: { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }; }; }; schema: { readonly fields: readonly { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }[]; readonly config?: { readonly validateOnChange?: boolean | undefined; readonly validateOnBlur?: boolean | undefined; readonly validateOnSubmit?: boolean | undefined; readonly resetOnSubmit?: boolean | undefined; readonly preventSubmitOnEnter?: boolean | undefined; readonly formClass?: string | undefined; readonly fieldWrapperClass?: string | undefined; readonly errorClass?: string | undefined; readonly locale?: string | undefined; readonly messages?: { readonly [x: string]: string; } | undefined; } | undefined; readonly groups?: readonly { readonly name: string; readonly label?: string | undefined; readonly description?: string | undefined; readonly fields: readonly string[]; readonly collapsible?: boolean | undefined; readonly collapsed?: boolean | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; }[] | undefined; readonly layout?: "vertical" | "horizontal" | "inline" | "grid" | undefined; readonly title?: string | undefined; readonly description?: string | undefined; }; fields: Record<string, { fieldState: Readonly<Ref< { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }, { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }>>; fieldValue: WritableComputedRef<any, any>; fieldOptions: Readonly<Ref<readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[], readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[]>>; loadingOptions: Readonly<Ref<boolean, boolean>>; isVisible: ComputedRef<boolean>; isDisabled: ComputedRef<boolean | undefined>; isRequired: ComputedRef<boolean>; hasError: ComputedRef<boolean>; isValidating: ComputedRef<boolean>; validateField: () => Promise<AsyncValidationResult_2>; resetField: () => void; setValue: (value: any) => void; setError: (error: string | null) => void; clearError: () => void; loadOptions: () => Promise<void>; handleFocus: () => void; handleBlur: () => void; handleInput: (event: Event) => void; handleChange: (event: Event) => void; inputAttrs: ComputedRef< { [k: string]: any; }>; inputClasses: ComputedRef<string>; fieldSchema: { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }; }>; visibleFields: ComputedRef<FieldSchema_2[]>; isFormValid: ComputedRef<boolean>; isFormDirty: ComputedRef<boolean>; fieldErrors: ComputedRef< { field: string; message: string; type: string; value: any; }[]>; validateForm: () => Promise<ValidationResult_2>; validateField: (fieldName: string) => Promise<boolean>; submitForm: () => Promise<void>; resetForm: () => void; setFormValues: (values: Record<string, any>) => void; setFormErrors: (errors: Record<string, string>) => void; clearFormErrors: () => void; getFieldData: (fieldName: string) => { fieldState: Readonly<Ref< { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }, { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }>>; fieldValue: WritableComputedRef<any, any>; fieldOptions: Readonly<Ref<readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[], readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[]>>; loadingOptions: Readonly<Ref<boolean, boolean>>; isVisible: ComputedRef<boolean>; isDisabled: ComputedRef<boolean | undefined>; isRequired: ComputedRef<boolean>; hasError: ComputedRef<boolean>; isValidating: ComputedRef<boolean>; validateField: () => Promise<AsyncValidationResult_2>; resetField: () => void; setValue: (value: any) => void; setError: (error: string | null) => void; clearError: () => void; loadOptions: () => Promise<void>; handleFocus: () => void; handleBlur: () => void; handleInput: (event: Event) => void; handleChange: (event: Event) => void; inputAttrs: ComputedRef< { [k: string]: any; }>; inputClasses: ComputedRef<string>; fieldSchema: { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }; } | undefined; getAllFieldsData: () => Record<string, { fieldState: Readonly<Ref< { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }, { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }>>; fieldValue: WritableComputedRef<any, any>; fieldOptions: Readonly<Ref<readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[], readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[]>>; loadingOptions: Readonly<Ref<boolean, boolean>>; isVisible: ComputedRef<boolean>; isDisabled: ComputedRef<boolean | undefined>; isRequired: ComputedRef<boolean>; hasError: ComputedRef<boolean>; isValidating: ComputedRef<boolean>; validateField: () => Promise<AsyncValidationResult_2>; resetField: () => void; setValue: (value: any) => void; setError: (error: string | null) => void; clearError: () => void; loadOptions: () => Promise<void>; handleFocus: () => void; handleBlur: () => void; handleInput: (event: Event) => void; handleChange: (event: Event) => void; inputAttrs: ComputedRef< { [k: string]: any; }>; inputClasses: ComputedRef<string>; fieldSchema: { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }; }>; handleFieldFocus: (fieldName: string) => void; handleFieldBlur: (fieldName: string) => void; validationEngine: ValidationEngine_2; conditionsEngine: ConditionsEngine_2; dispose: () => void; }; validateForm: () => Promise<ValidationResult_2>; validateField: (fieldName: string) => Promise<boolean>; resetForm: typeof handleReset; submitForm: typeof handleSubmit; setFormValues: (values: Record<string, any>) => void; setFormErrors: (errors: Record<string, string>) => void; clearFormErrors: () => void; getFieldData: (fieldName: string) => { fieldState: Readonly<Ref< { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }, { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }>>; fieldValue: WritableComputedRef<any, any>; fieldOptions: Readonly<Ref<readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[], readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[]>>; loadingOptions: Readonly<Ref<boolean, boolean>>; isVisible: ComputedRef<boolean>; isDisabled: ComputedRef<boolean | undefined>; isRequired: ComputedRef<boolean>; hasError: ComputedRef<boolean>; isValidating: ComputedRef<boolean>; validateField: () => Promise<AsyncValidationResult_2>; resetField: () => void; setValue: (value: any) => void; setError: (error: string | null) => void; clearError: () => void; loadOptions: () => Promise<void>; handleFocus: () => void; handleBlur: () => void; handleInput: (event: Event) => void; handleChange: (event: Event) => void; inputAttrs: ComputedRef< { [k: string]: any; }>; inputClasses: ComputedRef<string>; fieldSchema: { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }; } | undefined; formData: Readonly<Ref< { readonly [x: string]: any; }, { readonly [x: string]: any; }>>; formState: { readonly values: { readonly [x: string]: any; }; readonly errors: { readonly [x: string]: string; }; readonly touched: { readonly [x: string]: boolean; }; readonly dirty: { readonly [x: string]: boolean; }; readonly isSubmitting: boolean; readonly isValidating: boolean; readonly isValid: boolean; readonly isDirty: boolean; readonly submitCount: number; readonly fields: { readonly [x: string]: { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }; }; }; isValid: ComputedRef<boolean>; isDirty: ComputedRef<boolean>; }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { validate: (errors: Record<string, string>) => any; submit: (data: Record<string, any>, isValid: boolean) => any; change: (fieldName: string, value: any, formData: Record<string, any>) => any; blur: (fieldName: string, value: any) => any; focus: (fieldName: string, value: any) => any; reset: () => any; }, string, PublicProps, Readonly<Props> & Readonly<{ onValidate?: ((errors: Record<string, string>) => any) | undefined; onSubmit?: ((data: Record<string, any>, isValid: boolean) => any) | undefined; onChange?: ((fieldName: string, value: any, formData: Record<string, any>) => any) | undefined; onBlur?: ((fieldName: string, value: any) => any) | undefined; onFocus?: ((fieldName: string, value: any) => any) | undefined; onReset?: (() => any) | undefined; }>, { debounceValidation: number; initialData: Record<string, any>; customComponents: Record<string, Component>; allowInvalidSubmit: boolean; showGlobalErrors: boolean; showResetButton: boolean; submitText: string; resetText: string; }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLFormElement>; declare const __VLS_component_2: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, { customComponents: Record<string, Component>; }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>; declare const __VLS_component_3: DefineComponent<Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_3> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>; declare const __VLS_component_4: DefineComponent<Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_4> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>; declare const __VLS_component_5: DefineComponent<Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>; declare function __VLS_template_2(): { attrs: Partial<{}>; slots: Partial<Record<string, (_: any) => any>> & Partial<Record<string, (_: any) => any>> & { header?(_: { schema: { readonly fields: readonly { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: { readonly [x: string]: any; } | undefined; readonly group?: string | undefined; readonly order?: number | undefined; readonly slots?: { readonly prefix?: string | undefined; readonly suffix?: string | undefined; readonly help?: string | undefined; } | undefined; }[]; readonly config?: { readonly validateOnChange?: boolean | undefined; readonly validateOnBlur?: boolean | undefined; readonly validateOnSubmit?: boolean | undefined; readonly resetOnSubmit?: boolean | undefined; readonly preventSubmitOnEnter?: boolean | undefined; readonly formClass?: string | undefined; readonly fieldWrapperClass?: string | undefined; readonly errorClass?: string | undefined; readonly locale?: string | undefined; readonly messages?: { readonly [x: string]: string; } | undefined; } | undefined; readonly groups?: readonly { readonly name: string; readonly label?: string | undefined; readonly description?: string | undefined; readonly fields: readonly string[]; readonly collapsible?: boolean | undefined; readonly collapsed?: boolean | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; }[] | undefined; readonly layout?: "vertical" | "horizontal" | "inline" | "grid" | undefined; readonly title?: string | undefined; readonly description?: string | undefined; }; state: { readonly values: { readonly [x: string]: any; }; readonly errors: { readonly [x: string]: string; }; readonly touched: { readonly [x: string]: boolean; }; readonly dirty: { readonly [x: string]: boolean; }; readonly isSubmitting: boolean; readonly isValidating: boolean; readonly isValid: boolean; readonly isDirty: boolean; readonly submitCount: number; readonly fields: { readonly [x: string]: { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }; }; }; }): any; errors?(_: { errors: { field: string; message: string; type: string; value: any; }[]; state: { readonly values: { readonly [x: string]: any; }; readonly errors: { readonly [x: string]: string; }; readonly touched: { readonly [x: string]: boolean; }; readonly dirty: { readonly [x: string]: boolean; }; readonly isSubmitting: boolean; readonly isValidating: boolean; readonly isValid: boolean; readonly isDirty: boolean; readonly submitCount: number; readonly fields: { readonly [x: string]: { readonly value: any; readonly error: string | null; readonly touched: boolean; readonly dirty: boolean; readonly validating: boolean; readonly valid: boolean; readonly visible: boolean; readonly disabled: boolean; readonly required: boolean; }; }; }; }): any; group?(_: { group: FormGroup_2; fields: (FieldSchema_2 | undefined)[]; schema: { readonly fields: readonly { readonly name: string; readonly type: FieldType_2; readonly label?: string | undefined; readonly description?: string | undefined; readonly defaultValue?: any; readonly validation?: { readonly required?: boolean | undefined; readonly minLength?: number | undefined; readonly maxLength?: number | undefined; readonly min?: number | undefined; readonly max?: number | undefined; readonly pattern?: (string | RegExp) | undefined; readonly email?: boolean | undefined; readonly url?: boolean | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => string | boolean | Promise<string | boolean>) | undefined; readonly message?: string | undefined; } | undefined; readonly externalValidation?: { readonly yup?: any; readonly zod?: any; readonly veeValidate?: string | ((value: any) => any) | undefined; readonly custom?: ((value: any, formData: Record<string, any>) => any) | undefined; } | undefined; readonly options?: (() => Promise<FieldOption_2[]>) | readonly { readonly label: string; readonly value: any; readonly disabled?: boolean | undefined; readonly description?: string | undefined; }[] | undefined; readonly attributes?: { readonly placeholder?: string | undefined; readonly readonly?: boolean | undefined; readonly disabled?: boolean | undefined; readonly autocomplete?: string | undefined; readonly pattern?: string | undefined; readonly min?: number | string | undefined; readonly max?: number | string | undefined; readonly step?: number | string | undefined; readonly multiple?: boolean | undefined; readonly accept?: string | undefined; readonly rows?: number | undefined; readonly cols?: number | undefined; readonly maxlength?: number | undefined; readonly minlength?: number | undefined; } | undefined; readonly conditions?: { readonly show?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly hide?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly required?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly disabled?: readonly { readonly field: string; readonly operator: "equals" | "notEquals" | "contains" | "notContains" | "gt" | "gte" | "lt" | "lte" | "empty" | "notEmpty" | "in" | "notIn"; readonly value?: any; readonly values?: readonly any[] | undefined; }[] | undefined; readonly logic?: "and" | "or" | undefined; } | undefined; readonly wrapperClass?: string | undefined; readonly fieldClass?: string | undefined; readonly labelClass?: string | undefined; readonly errorClass?: string | undefined; readonly component?: string | undefined; readonly props?: {