@progress/kendo-vue-form/index.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { FieldValidatorType as FieldValidatorType_2 } from '.';
import { FormRenderProps as FormRenderProps_2 } from './index';
import { FormValidatorType as FormValidatorType_2 } from './index';
import { PropType } from 'vue';
import { PublicProps } from 'vue';

export declare const Field: DefineComponent<    {}, {}, {}, {}, {
handleOnChange(event: any): void;
onNativeComponentChange(event: any): void;
handleOnBlur(): void;
handleOnFocus(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", PublicProps, Readonly<{}> & Readonly<{
onChange?: (...args: any[]) => any;
}>, {
[x: string]: any;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * @hidden
 */
export declare const FieldArray: DefineComponent<ExtractPropTypes<    {
value: PropType<any>;
component: PropType<any>;
validationMessage: PropType<any>;
touched: PropType<any>;
modified: PropType<any>;
validator: PropType<FieldValidatorType_2 | FieldValidatorType_2[]>;
visited: PropType<any>;
valid: PropType<any>;
name: PropType<string>;
id: PropType<any>;
}>, {}, {}, {}, {
onUnshift(event: any): void;
onPush(event: any): void;
onInsert(event: any): void;
onPop(): void;
onRemove(event: any): void;
onReplace(event: any): void;
onMove(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
value: PropType<any>;
component: PropType<any>;
validationMessage: PropType<any>;
touched: PropType<any>;
modified: PropType<any>;
validator: PropType<FieldValidatorType_2 | FieldValidatorType_2[]>;
visited: PropType<any>;
valid: PropType<any>;
name: PropType<string>;
id: PropType<any>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the FieldArray component that is used inside the Kendo U for Vue Form component.
 */
export declare interface FieldArrayProps {
    /**
     * The name of the field in the Form state.
     */
    name: string;
    /**
     * Can be set to a Vue component.
     * [`FieldArrayRenderProps`]({% slug api_form_fieldarrayprops %}).
     */
    component: any;
    /**
     * The validation functions for the FieldArray level.
     * Currently, `validator` supports only synchronous functions.
     */
    validator?: FieldValidatorType | FieldValidatorType[];
    /**
     * @hidden
     */
    [customProp: string]: any;
}

/**
 * Represents the props that are passed to the component which is rendered by FieldArray.
 */
export declare interface FieldArrayRenderProps {
    /**
     * Represents the current value of the FieldArray
     * ([see example]({% slug custom_components_form %}#toc-using-basic-properties)).
     */
    value: any;
    /**
     * Represents the error message that is returned by the validator.
     * The FieldArray is considered valid if the `validationMessage` field is empty.
     */
    validationMessage: string | null;
    /**
     * Indicates if the field is touched.
     * The touched state is set to `true` when the `onBlur` callback is called.
     */
    touched: boolean;
    /**
     * Indicates if the field is modified.
     * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
     */
    modified: boolean;
    /**
     * Indicates if the field is visited.
     * The visited state is set to `true` when the `onFocus` callback is called.
     */
    visited: boolean;
    /**
     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
     */
    valid: boolean;
    /**
     * The name of the field in the Form state.
     */
    name: string;
    /**
     * A callback to add a value to the beginning of the array.
     */
    onUnshift: (options: {
        value: any;
    }) => number;
    /**
     * A callback to add a value to the end of the array.
     */
    onPush: (options: {
        value: any;
    }) => void;
    /**
     * A callback to insert value at given index of the array.
     */
    onInsert: (options: {
        value: any;
        index: number;
    }) => void;
    /**
     * A callback to remove a value from the end of the array. The value is returned.
     */
    onPop: () => any;
    /**
     * A callback to remove a value from given index of the array.
     */
    onRemove: (options: {
        index: number;
    }) => any;
    /**
     * A callback to replace value at given index of the array.
     */
    onReplace: (options: {
        value: any;
        index: number;
    }) => void;
    /**
     * A callback to move a value from one index to another. Useful for drag and drop reordering.
     */
    onMove: (options: {
        prevIndex: number;
        nextIndex: number;
    }) => void;
    /**
     * @hidden
     */
    [customProp: string]: any;
}

/**
 * Represents the props that are passed from the Form component to the components nested inside it.
 *  To use the [KendoFrom Injected Property]({% slug api_form_fieldinjectedprops %}) it should be
 *  [injected](https://v3.vuejs.org/guide/component-provide-inject.html) it in the component that defines the Form content using the below code.
 *
 * ```js-no-run
 *   ...........
 *   inject: {
 *       kendoForm: { default: {} },
 *   }
 *   ...........
 * ```
 */
export declare interface FieldInjectedProps {
    /**
     * Indicates if the Form is ready to be submitted.
     * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
     * If `allowSubmit` is set to `true` and the Form is not valid, the user will be able to set all fields
     * `touched` and `visited` state to true.
     * Useful for toggling the disabled state of the **Submit** button.
     */
    allowSubmit?: boolean;
    /**
     * The key-value pair containing the current errors by field path, combined from both field and form level validators.
     */
    errors?: object;
    /**
     *   Indicates if the Form is modified. If any field is modified, `modified` is set to `true`.
     *  The modified state of field is set to `true` when the `onChange`
     *  callback of the Field component is called for first time.
     */
    modified: boolean;
    /**
     * An object that holds the `modified` fields.
     */
    modifiedByField: object;
    /**
     * Indicates if the Form is successfully submitted.
     *  Useful for detecting if user is leaving the form before saving changes.
     */
    submitted: boolean;
    /**
     *   Indicates if the Form is touched.
     * If any field is touched, `touched` is set to `true`.
     * The touched state of field is set to `true` when the `onBlur`
     * callback of the Field component is called or when the user tries to submit the form.
     */
    touched: boolean;
    /**
     * An object that holds the `touched` fields.
     */
    touchedByField: object;
    /**
     * Indicates if the Form is valid.
     * If any field is invalid, `valid` is set to `false`.
     */
    valid: boolean;
    /**
     *  A callback for getting the value of a field without using the Field component
     *  ([see example]({% slug common_scenarios_form %}#toc-reading-the-field-state)).
     *  Useful for creating and modifying the UI based on the field values.
     */
    valueGetter: (name: string) => any;
    /**
     *   Indicates if the Form is visited.
     * If any field is visited, `visited` is set to `true`.
     * The visited state of field is set to `true` when the `onFocus`
     * callback of the Field component is called or when the user tries to submit the form.
     */
    visited: boolean;
    /**
     * An object that holds the `visited` fields.
     */
    visitedByField: object;
    /**
     * When called without parameters it validates all the fields in the Form.
     * If called with object parameter with keys names - the names of the fields, only these fields are validated.
     */
    validate: (options?: {
        [key: string]: any;
    }) => void;
    /**
     * A callback for resetting the Form.
     */
    onFormReset: () => void;
    /**
     *  A callback for submitting the Form.
     * Can be passed to the `onClick` property of the **Submit** button.
     */
    onSubmit: (event: any) => void;
    /**
     *  A callback you have to call when the rendered component is blurred.
     * Responsible for setting the touched state of the Field.
     */
    onBlur: () => void;
    /**
     *  A callback you have to call when the value of the rendered component is changed
     * ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
     * The `value` property of the event takes precedence over `target.value`.
     */
    onChange: (fieldName: string, event: {
        target?: any;
        value?: any;
    }) => void;
    /**
     * A callback you have to call when the rendered component is focused.
     * Responsible for setting the visited state of the Field.
     */
    onFocus: () => void;
    /**
     * ## Functions used in FieldArray component
     */
    /**
     * A callback to insert value at given index of the array.
     */
    onInsert: (options: {
        index: number;
        value: any;
    }) => void;
    /**
     * A callback to move a value from one index to another. Useful for drag and drop reordering.
     */
    onMove: (options: {
        nextIndex: number;
        prevIndex: number;
    }) => void;
    /**
     * A callback to remove a value from the end of the array. The value is returned.
     */
    onPop: () => any;
    /**
     * A callback to add a value to the end of the array.
     */
    onPush: (options: {
        value: any;
    }) => void;
    /**
     *  A callback to remove a value from given index of the array.
     */
    onRemove: (options: {
        index: number;
    }) => any;
    /**
     * A callback to replace value at given index of the array.
     */
    onReplace: (options: {
        index: number;
        value: any;
    }) => void;
    /**
     * A callback to add a value to the beginning of the array.
     */
    onUnshift: (options: {
        value: any;
    }) => number;
}

/**
 * Represents the props of the Field component that is used inside the Kendo U for Vue Form component.
 */
export declare interface FieldProps {
    /**
     * The name of the field in the Form state.
     * Supports nested fields in the `user.age` and `users[index].name` formats.
     */
    name: string;
    /**
     * The id of the field.
     */
    id?: string;
    /**
     * Can be set to a Vue component or to the name of an HTML element,
     * for example, `input`, `select`, and `textarea`.
     * The props that are passed to component are the
     * [`FieldRenderProps`]({% slug api_form_fieldrenderprops %}).
     */
    component: string | any;
    /**
     * The validation functions for the Field level.
     * Currently, `validator` supports only synchronous functions.
     * Using the array overload with inline array will cause infinite
     *  loop - in this case use `useMemo` hook to memoize the array.
     */
    validator?: FieldValidatorType | FieldValidatorType[];
    /**
     * Called when underlying editor triggers it's onChange event and the Form update it's internal state.
     * Useful for updating related fields.
     * > Keep in mind that Form listens to this editor event and automatically keeps it's internal state up to date.
     * That why this event should be used only for executing custom logic.
     */
    onChange?: (event: any) => void;
    /**
     * @hidden
     */
    resource?: any;
    /**
     * @hidden
     */
    multiple?: boolean;
    /**
     * @hidden
     */
    dataItems?: any[];
    /**
     * @hidden
     */
    textField?: string;
    /**
     * @hidden
     */
    valueField?: string;
    /**
     * @hidden
     */
    colorField?: string;
    /**
     * @hidden
     */
    rows?: number;
    /**
     * @hidden
     */
    field?: any;
    /**
     * @hidden
     */
    start?: any;
    /**
     * @hidden
     */
    value?: any;
    /**
     * @hidden
     */
    width?: string;
    /**
     * @hidden
     */
    editorId?: string;
    /**
     * @hidden
     */
    isAllDay?: boolean;
    /**
     * @hidden
     */
    timezone?: string;
}

/**
 * Represents the props that are passed to the component which is rendered by Field.
 */
export declare interface FieldRenderProps {
    /**
     * A callback you have to call when the value of the rendered component is changed
     * ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
     * The `value` property of the event takes precedence over `target.value`.
     */
    onChange?: (event: {
        target?: any;
        value?: any;
    }) => void;
    /**
     * A callback you have to call when the rendered component is focused.
     * Responsible for setting the visited state of the Field.
     */
    onFocus?: () => void;
    /**
     * A callback you have to call when the rendered component is blurred.
     * Responsible for setting the touched state of the Field.
     */
    onBlur?: () => void;
    /**
     * Represents the current value of the Field
     * ([see example]({% slug custom_components_form %}#toc-using-basic-properties)).
     */
    value: any;
    /**
     * Represents the error message that is returned by the validator.
     * The Field is considered valid if the `validationMessage` field is empty.
     */
    validationMessage: string | null;
    /**
     * Indicates if the field is touched.
     * The touched state is set to `true` when the `onBlur` callback is called.
     */
    touched: boolean;
    /**
     * Indicates if the field is modified.
     * The modified state is set to `true` when the `onChange` callback for the current field is called for first time.
     */
    modified: boolean;
    /**
     * Indicates if the field is visited.
     * The visited state is set to `true` when the `onFocus` callback is called.
     */
    visited: boolean;
    /**
     * A calculated property based on whether `validationMessage` is present and the `touched` state is set to `true`.
     */
    valid: boolean;
    /**
     * The name of the field in the Form state.
     */
    name: string;
    /**
     * @hidden
     */
    [customProp: string]: any;
}

/**
 * The validator function for the Field component. The function arguments are:
 *
 * * value - The current value of the field.
 * * valueGetter - Function which can be used to get other fields value.
 * Usable when validator depends on more than one field. Supports field paths.
 * * fieldProps - Props of the Field component. Currently contains only the `name` prop.
 * Usable when one validator is used across multiple fields.
 *
 * Returns `string` to signify error or `undefined` to signify validation success.
 */
export declare type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
    name: string;
}) => string | undefined;

/**
 * @hidden
 */
export declare const FieldWrapper: DefineComponent<ExtractPropTypes<    {
dir: PropType<any>;
horizontal: PropType<boolean>;
}>, {}, {}, {
fieldClassName(): {
'k-form-field': boolean;
'k-rtl': boolean;
};
}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dir: PropType<any>;
horizontal: PropType<boolean>;
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the Kendo U for Vue FieldWrapper component.
 */
export declare interface FieldWrapperProps {
    /**
     * If set to `true` enable the horizontal layout of the form editors.
     */
    horizontal?: boolean;
    /**
     * @hidden
     */
    [customProp: string]: any;
}

/**
 * @hidden
 */
export declare const Form: DefineComponent<ExtractPropTypes<    {
renderForm: PropType<(props: FormRenderProps_2) => any>;
initialValues: PropType<{
[name: string]: any;
}>;
validator: PropType<FormValidatorType_2>;
ignoreModified: PropType<boolean>;
}>, {}, {
validatorsByField: {};
fields: any[];
unmounted: boolean;
form: {
id: Function;
errors: {};
values: {};
modifiedByField: {};
touchedByField: {};
visitedByField: {};
valid: boolean;
modified: boolean;
touched: boolean;
visited: boolean;
submitted: boolean;
valueGetter: Function;
allowSubmit: boolean;
validate: Function;
onChange: Function;
onSubmit: (...args: any[] | unknown[]) => any;
onFormReset: Function;
registerField: Function;
onFocus: Function;
onBlur: Function;
onUnshift: Function;
onPush: Function;
onInsert: Function;
onPop: Function;
onRemove: Function;
onReplace: Function;
onMove: Function;
};
}, {}, {
isValid(): boolean;
formErrors(): KeyValue<string> | undefined;
getErrors(): KeyValue<string>;
/**
* @hidden
*/
accumulatedForceUpdate(): void;
/**
* @hidden
*/
resetForm(): void;
/**
* Method for resetting the form state outside the form component.
*
* > Use `onReset` only if you cannot achieve the desired behavior
*  through the Field component or by FormRenderProps.
*/
onReset(): void;
addField(field: string): void;
validate(fields: object): void;
onSubmit(event: any): void;
/**
* Method for emitting changes to a specific field outside the form component.
*
* > Use `onChange` only if you cannot achieve the desired behavior
*  through the Field component by FormRenderProps.
*/
onChange(name: string, options: {
value: any;
}): void;
onFocus(name: string): void;
onBlur(name: string): void;
onFieldRegister(name: string, validator: FieldValidatorType | FieldValidatorType[] | undefined): () => void;
isFormValid(errors: KeyValue<any>): boolean;
isFormModified(modified: KeyValue<boolean>, fields: string[]): boolean;
isFormHasNotTouched(touched: KeyValue<boolean>, fields: string[]): boolean;
isFormTouched(touched: KeyValue<boolean>, fields: string[]): boolean;
isFormVisited(visited: KeyValue<boolean>, fields: string[]): boolean;
formHasNotTouched(): any;
allowSubmit(): any;
valueGetter(fieldName: string): any;
valueSetter(fieldName: string, value: any): any;
onArrayAction(name: string): void;
onInsert(name: string, options: {
value: any;
index: number;
}): void;
onUnshift(name: string, options: {
value: any;
}): void;
onPush(name: string, options: {
value: any;
}): void;
onPop(name: string): any;
onRemove(name: string, options: {
index: number;
}): any;
onReplace(name: string, options: {
value: any;
index: number;
}): void;
onMove(name: string, options: {
prevIndex: number;
nextIndex: number;
}): void;
onDestroy(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
submitclick: any;
submit: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
renderForm: PropType<(props: FormRenderProps_2) => any>;
initialValues: PropType<{
[name: string]: any;
}>;
validator: PropType<FormValidatorType_2>;
ignoreModified: PropType<boolean>;
}>> & Readonly<{
onSubmit?: (...args: any[] | unknown[]) => any;
onSubmitclick?: (...args: any[] | unknown[]) => any;
}>, {}, {}, {}, {}, string, () => {
kendoForm: any;
}, true, {}, any>;

/**
 * @hidden
 */
export declare const FormElement: DefineComponent<ExtractPropTypes<    {
horizontal: PropType<boolean>;
size: {
type: PropType<"small" | "medium" | "large">;
validator: (value: string) => boolean;
};
}>, {}, {}, {
formElementClassName(): {
[x: string]: any;
'k-form': boolean;
'k-form-horizontal': boolean;
};
}, {
handleSubmit(e: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
horizontal: PropType<boolean>;
size: {
type: PropType<"small" | "medium" | "large">;
validator: (value: string) => boolean;
};
}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

/**
 * Represents the props of the Kendo U for Vue FormElement component.
 */
export declare interface FormElementProps {
    /**
     * Configures the `size` of the Form.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     * - null&mdash;Does not set a size `class`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large';
    /**
     * If set to `true` enable the horizontal layout of the form editors.
     */
    horizontal?: boolean;
    /**
     * @hidden
     */
    [customProp: string]: any;
}

/**
 * Represents the props of the Kendo U for Vue Form component.
 */
export declare interface FormProps {
    /**
     * The initial field values of the Form.
     *
     * > When you initialize the Form fields, set initial values to them. Otherwise, some
     * components might throw errors related to switching from uncontrolled to controlled mode.
     */
    initialValues?: {
        [name: string]: any;
    };
    /**
     * The validation function for the Form level.
     * Should return key-value pair where the key is the field path and the value is the error message.
     * Nested fields are supported, e.g.: 'users[0].name'.
     * You can use the same field path to access the value from the
     * values object using the `getter` function from the `kendo-vue-common` package.
     * Currently, `validator` supports only synchronous functions.
     */
    validator?: FormValidatorType;
    /**
     * The submission handler for the Form.
     * Called when at least one field has been modified, the user pressed
     *  the **Submit** button,  and the form validation was successful.
     */
    onSubmit?: (values: {
        [name: string]: any;
    }, event?: any) => void;
    /**
     * Called every time the user presses the **Submit** button.
     * Useful in advanced scenarios when you need to handle every
     * submit event, even when the form is invalid or not modified state.
     */
    onSubmitclick?: (event: FormSubmitClickEvent) => void;
    /**
     * The Form content that will be rendered.
     */
    renderForm?: (props: FormRenderProps) => any;
    /**
     * Set this to `true` to allow the form submit without modified fields.
     */
    ignoreModified?: boolean;
}

/**
 * Represents the props that are passed to the `render` option component of the Form.
 */
export declare interface FormRenderProps {
    /**
     * A callback for submitting the Form.
     * Can be passed to the `onClick` property of the **Submit** button.
     */
    onSubmit?: (event: any) => void;
    /**
     * A callback for emiting changes to a specific field without using the Field component
     * ([see example]({% slug common_scenarios_form %}#toc-changing-the-field-value)).
     *
     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
     */
    onChange?: (name: string, options: {
        value: any;
    }) => void;
    /**
     * A callback for resetting the Form.
     */
    onFormreset?: () => void;
    /**
     * The key-value pair containing the current errors by field path,
     *  combined from both field and form level validators.
     */
    errors: KeyValue<string>;
    /**
     * Indicates if the Form is valid.
     * If any field is invalid, `valid` is set to `false`.
     */
    valid: boolean;
    /**
     * Indicates if the Form is touched.
     * If any field is touched, `touched` is set to `true`.
     * The touched state of field is set to `true` when the `onBlur`
     * callback of the Field component is called or when the user tries to submit the form.
     */
    touched: boolean;
    /**
     * Indicates if the Form is visited.
     * If any field is visited, `visited` is set to `true`.
     * The visited state of field is set to `true` when the `onFocus`
     * callback of the Field component is called or when the user tries to submit the form.
     */
    visited: boolean;
    /**
     * Indicates if the Form is modified.
     * If any field is modified, `modified` is set to `true`.
     * The modified state of field is set to `true` when the `onChange`
     * callback of the Field component is called for first time.
     */
    modified: boolean;
    /**
     * Indicates if the Form is successfuly submitted.
     * Useful for detecting if user is leaving the form before saving changes.
     */
    submitted: boolean;
    /**
     * Indicates if the Form is ready to be submitted.
     * * If `allowSubmit` is set to `true` and the Form is valid, the user will be able to submit the form.
     * * If `allowSubmit` is set to `true` and the Form is not valid, the user will be able to set all fields
     * `touched` and `visited` state to true.
     *
     * Useful for toggling the disabled state of the **Submit** button.
     */
    allowSubmit: boolean;
    /**
     * A callback for getting the value of a field without using the Field component
     * ([see example]({% slug common_scenarios_form %}#toc-reading-the-field-state)).
     * Useful for creating and modifying the UI based on the field values.
     */
    valueGetter: (name: string) => any;
}

/**
 * The FormSubmitClick event.
 */
export declare interface FormSubmitClickEvent {
    /**
     * Contains the current values of the form.
     */
    values: {
        [name: string]: any;
    };
    /**
     * The native event.
     */
    event?: any;
    /**
     * Represents the validity state of the form.
     */
    isValid: boolean;
    /**
     * Represents the modified state of the form.
     */
    isModified: boolean;
}

/**
 * The validator function for the Form component.
 *
 * * values - The current values of the form.
 * * valueGetter - Function which can be used to get field value. Supports field paths.
 *
 * Returns key-value pair with errors if such are present. The key
 * is the field path, where the value is the error message.
 */
export declare type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;

/**
 *
 */
export declare interface KeyValue<ValueType> {
    [name: string]: ValueType;
}

export { }