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
TypeScript
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?: {