@progress/kendo-vue-form 8.0.3-develop.2 → 8.0.3-develop.3

package/interfaces/FieldArrayProps.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldValidatorType } from './FieldValidator';
+/**
+ * Represents the props of the FieldArray component that is used inside the Kendo U for Vue Form component.
+ */
+export 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;
+}

package/interfaces/FieldArrayRenderProps.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props that are passed to the component which is rendered by FieldArray.
+ */
+export 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;
+}

package/interfaces/FieldInjectedProps.d.ts

@@ -0,0 +1,163 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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 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;
+}

package/interfaces/FieldProps.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FieldValidatorType } from './FieldValidator';
+/**
+ * Represents the props of the Field component that is used inside the Kendo U for Vue Form component.
+ */
+export 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;
+}

package/interfaces/FieldRenderProps.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props that are passed to the component which is rendered by Field.
+ */
+export 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;
+}

package/interfaces/FieldValidator.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * 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 type FieldValidatorType = (value: any, valueGetter: (name: string) => any, fieldProps: {
+    name: string;
+}) => string | undefined;

package/interfaces/FormProps.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormRenderProps } from './FormRenderProps';
+import { FormValidatorType } from './FormValidator';
+import { FormSubmitClickEvent } from './FormSubmitClickEvent';
+/**
+ * Represents the props of the Kendo U for Vue Form component.
+ */
+export 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;
+}

package/interfaces/FormRenderProps.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KeyValue } from './KeyValue';
+/**
+ * Represents the props that are passed to the `render` option component of the Form.
+ */
+export 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;
+}

package/interfaces/FormSubmitClickEvent.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The FormSubmitClick event.
+ */
+export 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;
+}

package/interfaces/FormValidator.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { KeyValue } from './KeyValue';
+/**
+ * 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 type FormValidatorType = (values: any, valueGetter: (name: string) => any) => KeyValue<string> | undefined;

package/interfaces/KeyValue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ *
+ */
+export interface KeyValue<ValueType> {
+    [name: string]: ValueType;
+}

package/package-metadata.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;