@progress/kendo-vue-inputs 8.0.3-develop.1 → 8.0.3-develop.3

package/textarea/interfaces/TextAreaProps.d.ts

@@ -0,0 +1,191 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { TextAreaBlurEvent } from './TextAreaBlurEvent';
+import { TextAreaChangeEvent } from './TextAreaChangeEvent';
+import { TextAreaFlow } from './TextAreaFlow';
+import { TextAreaFocusEvent } from './TextAreaFocusEvent';
+import { TextAreaResize } from './TextAreaResize';
+/**
+ * Represents the props of the [Kendo UI for Vue TextArea component]({% slug overview_textarea %}).
+ */
+export interface TextAreaProps extends FormComponentProps {
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Identifies the title of the TextArea component.
+     */
+    title?: string;
+    /**
+     * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    minlength?: string;
+    /**
+     * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    maxlength?: string;
+    /**
+     * Specifies if the textarea element will resize its height automatically ([see example]({% slug sizing_textarea %})).
+     * Defaults to `false`.
+     */
+    autoSize?: boolean;
+    modelValue?: string | string[] | number;
+    /**
+     * Specifies a list of CSS classes that will be added to the TextArea.
+     */
+    className?: string;
+    /**
+     * The default value of the TextArea ([see example]({% slug default_textarea %})).
+     */
+    defaultValue?: string | string[] | number;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Specifies if the TextArea is disabled ([see example]({% slug disabled_textarea %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the read-only state of the TextArea.
+     */
+    readOnly?: boolean;
+    /**
+     * Specifies an exact height size for the TextArea to take ([see example]({% slug sizing_textarea %})).
+     */
+    rows?: number;
+    /**
+     * Sets the `id` of the TextArea.
+     */
+    id?: string;
+    /**
+     * Specifies the `name` property of the `textarea` DOM element.
+     */
+    name?: string;
+    /**
+     * The hint that is displayed when the TextArea is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the `tabIndex` property of the TextArea.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Configures the `size` of the NumericTextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the NumericTextBox.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the NumericTextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     *
+     * @default undefined
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Sets the value to be submitted ([see example]({% slug controlled_textarea %})).
+     */
+    value?: string | string[] | number;
+    /**
+     * If set to `false`, no visual representation of the invalid state of the component will be applied.
+     *
+     * @default true
+     */
+    validityStyles?: boolean;
+    /**
+     * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
+     * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
+     */
+    iconName?: string;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix?: boolean | string | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix?: boolean | string | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon?: boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon?: boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton?: boolean;
+    /**
+     * Defines additional class to the wrapper element.
+     */
+    wrapperClass?: string;
+    /**
+     * Defines the flow direction of the TextArea sections.
+     */
+    flow?: TextAreaFlow | string;
+    /**
+     * Defines the way the TextArea will resize.
+     */
+    resizable?: TextAreaResize | string;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: string;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
+    /**
+     * The event handler that will be fired when the changes the selected value.
+     */
+    onChange?: (event: TextAreaChangeEvent) => void;
+    /**
+     * The event handler that will be fired when TextArea is focused.
+     */
+    onFocus?: (event: TextAreaFocusEvent) => void;
+    /**
+     * The event handler that will be fired when TextArea is blurred.
+     */
+    onBlur?: (event: TextAreaBlurEvent) => void;
+}

package/textarea/interfaces/TextAreaResize.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Specifies the resize direction of the TextArea sections.
+ *
+ * The possible values are:
+ * `vertical`(Default) —TextArea can be resized only vertically.
+ * `horizontal`—TextArea can be resized only horizontally.
+ * `both`—TextArea can be resized both vertically and horizontally.
+ * `none`—TextArea can not be manually resized.
+ */
+export type TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none';
+/**
+ * Specifies the enum options for resize direction of the TextArea sections.
+ */
+export declare enum TextAreaResizeEnum {
+    /**
+     * `both`—TextArea can be resized both vertically and horizontally.
+     */
+    both = "both",
+    /**
+     * `horizontal`—TextArea can be resized only horizontally.
+     */
+    horizontal = "horizontal",
+    /**
+     * `vertical`(Default) —TextArea can be resized only vertically.
+     */
+    vertical = "vertical",
+    /**
+     * `none`—TextArea can not be manually resized.
+     */
+    none = "none"
+}

package/textbox/TextBox.d.ts

@@ -0,0 +1,422 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { PropType } from 'vue';
+import { TextBoxFocusEvent } from './interfaces/TextBoxFocusEvent';
+import { TextBoxBlurEvent } from './interfaces/TextBoxBlurEvent';
+export interface TextBoxChangeEvent {
+    /**
+     * A reference to the native event.
+     */
+    event: any;
+    /**
+     * The name of the event that is triggred. The value of this prop is `change`.
+     */
+    eventName: string;
+    /**
+     * The current value of the TextBox.
+     */
+    value: string | string[] | number;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue TextBox component]({% slug overview_textbox %}).
+ * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextBoxElement).
+ */
+export interface TextBoxProps extends FormComponentProps {
+    /**
+     * Renders a floating label for the TextBox component.
+     */
+    id?: string;
+    label?: string;
+    value?: string | string[] | number;
+    modelValue?: string | number;
+    defaultValue?: string | string[] | number | undefined;
+    disabled?: boolean;
+    validate?: boolean;
+    /**
+     * Configures the `size` of the TextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TextBox.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     *
+     * @default undefined
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    dir?: string;
+    /**
+     * Fires when the `change` event of the input is triggered.
+     */
+    onChange?: (event: TextBoxChangeEvent) => void;
+    /**
+     * Fires when the `input` event of the input is triggered.
+     */
+    onTextBox?: (event: any) => void;
+    /**
+     * Fires when the input is focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Fires when the input is blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires when the 'keyup' input event is triggered.
+     */
+    onKeyup?: (event: any) => void;
+    /**
+     * Fires when the 'keydown' input event is triggered.
+     */
+    onKeydown?: (event: any) => void;
+    /**
+     * Fires when the 'keypress' input event is triggered.
+     */
+    onKeypress?: (event: any) => void;
+    /**
+     * Specifies the placeholder of an `input` element. Used to define if the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * Defines a string prop that controls the input icon. This property works only with the Kendo UI for Vue FontIcons.
+     * Check the [Icons]({% slug icons %}) article for more information about how the Font Icon can be loaded to your project.
+     */
+    iconName?: string;
+    /**
+     *
+     * @obsolete Use `prefix` instead.
+     *
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputPrefix?: boolean | string | Object | Function;
+    /**
+     * Defines if the inputPrefix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    prefix?: boolean | string | Object | Function;
+    /**
+     *
+     * @obsolete Use `suffix` instead.
+     *
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    inputSuffix?: boolean | string | Object | Function;
+    /**
+     * Defines if the inputSuffix will be shown. Accepts a slot name, a `render` function, or a Vue component.
+     */
+    suffix?: boolean | string | Object | Function;
+    /**
+     * Defines a boolean prop that controls whether to show the validation icon. Defaults to 'false'.
+     */
+    showValidationIcon?: boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the loading icon. Defaults to 'false'.
+     */
+    showLoadingIcon?: boolean;
+    /**
+     * Defines a boolean prop that controls whether to show the clear icon. Defaults to 'false'.
+     */
+    showClearButton?: boolean;
+    /**
+     * Defines additional class to the wrapper element.
+     */
+    wrapperClass?: string;
+    /**
+     * Defines additional class to the input element.
+     */
+    inputClass?: string;
+    /**
+     * Defines the built-in [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/minlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `minlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    minlength?: string;
+    /**
+     * Defines the built-in [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) property of the text inputs.
+     * * As the property is directly passed to the internal [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) element, when defining it, it should be written as it is - `maxlength`. Camel-case and kebap-case won't work in this scenario.
+     */
+    maxlength?: string;
+    /**
+     * Defines the built-in [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) property of the input element inside the TextBox.
+     */
+    tabIndex?: number;
+    /**
+     * Defines the role of the input element inside the TextBox.
+     */
+    role?: string;
+    /**
+     * Defines the built-in [title](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) property of the input element inside the TextBox.
+     */
+    title?: string;
+    /**
+     * Defines the built-in [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) property of the input element inside the TextBox.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the built-in HTML attributes of the inner focusable input element.
+     * Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes?: Object;
+}
+/**
+ * @hidden
+ */
+declare const TextBox: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | number>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<string | number | string[]>;
+        default: string;
+    };
+    value: {
+        type: PropType<string | number | string[]>;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    dir: {
+        type: PropType<string>;
+    };
+    id: StringConstructor;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validate: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    iconName: PropType<string>;
+    inputPrefix: PropType<string | boolean | Object | Function>;
+    prefix: PropType<string | boolean | Object | Function>;
+    inputSuffix: PropType<string | boolean | Object | Function>;
+    suffix: PropType<string | boolean | Object | Function>;
+    showValidationIcon: PropType<boolean>;
+    showLoadingIcon: PropType<boolean>;
+    showClearButton: PropType<boolean>;
+    inputClass: PropType<string>;
+    wrapperClass: PropType<string>;
+    tabIndex: PropType<number>;
+    role: PropType<string>;
+    title: PropType<string>;
+    ariaLabel: PropType<string>;
+    inputAttributes: PropType<Object>;
+}>, {
+    inputRef: import('vue').Ref<any, any>;
+}, {
+    hasMounted: boolean;
+    autofill: boolean;
+    currentValue: string | number | string[];
+    valueDuringOnChange: string;
+    focused: boolean;
+}, {
+    spanClassNames(): {
+        'k-floating-label-container': boolean;
+        'k-focus': any;
+        'k-empty': boolean;
+        'k-autofill': any;
+        'k-invalid': boolean;
+        'k-rtl': boolean;
+    };
+    inputInnerClass(): {
+        [x: number]: any;
+        'k-input-inner': boolean;
+    };
+    computedValue(): any;
+}, {
+    updateValidClass(): void;
+    emitFocus(e: any): void;
+    emitBlur(e: any): void;
+    handleKeydown(e: any): void;
+    handleKeyup(e: any): void;
+    handleKeypress(e: any): void;
+    clearClick(event: any): void;
+    focus(): void;
+    validity(): {
+        customError: boolean;
+        valid: any;
+        badTextBox: any;
+        patternMismatch: any;
+        rangeOverflow: any;
+        rangeUnderflow: any;
+        stepMismatch: any;
+        tooLong: any;
+        tooShort: any;
+        typeMismatch: any;
+        valueMissing: any;
+    };
+    isInvalid(state: Object): boolean;
+    setValidity(): void;
+    handleInput(event: any): void;
+    handleChange(event: any): void;
+    emitUpdate(event: any, eventName: string, value: any): void;
+    handleAutoFill(e: any): void;
+    handleAutoFillEnd(e: any): void;
+    name: () => any;
+    inputWrapperClass(): {
+        [x: string]: any;
+        [x: number]: any;
+        'k-textbox': boolean;
+        'k-input': boolean;
+        'k-invalid': boolean;
+        'k-required': any;
+        'k-disabled': any;
+    };
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    input: (event: Event) => true;
+    change: (event: TextBoxChangeEvent) => true;
+    changemodel: (value: string | number) => true;
+    'update:modelValue': (value: string | number) => true;
+    focus: (event: TextBoxFocusEvent) => true;
+    blur: (event: TextBoxBlurEvent) => true;
+    keyup: (event: KeyboardEvent) => true;
+    keydown: (event: KeyboardEvent) => true;
+    keypress: (event: KeyboardEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: {
+        type: PropType<string | number>;
+        default: any;
+    };
+    disabled: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    defaultValue: {
+        type: PropType<string | number | string[]>;
+        default: string;
+    };
+    value: {
+        type: PropType<string | number | string[]>;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    placeholder: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    dir: {
+        type: PropType<string>;
+    };
+    id: StringConstructor;
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validate: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    iconName: PropType<string>;
+    inputPrefix: PropType<string | boolean | Object | Function>;
+    prefix: PropType<string | boolean | Object | Function>;
+    inputSuffix: PropType<string | boolean | Object | Function>;
+    suffix: PropType<string | boolean | Object | Function>;
+    showValidationIcon: PropType<boolean>;
+    showLoadingIcon: PropType<boolean>;
+    showClearButton: PropType<boolean>;
+    inputClass: PropType<string>;
+    wrapperClass: PropType<string>;
+    tabIndex: PropType<number>;
+    role: PropType<string>;
+    title: PropType<string>;
+    ariaLabel: PropType<string>;
+    inputAttributes: PropType<Object>;
+}>> & Readonly<{
+    onInput?: (event: Event) => any;
+    onBlur?: (event: TextBoxBlurEvent) => any;
+    onChange?: (event: TextBoxChangeEvent) => any;
+    onFocus?: (event: TextBoxFocusEvent) => any;
+    onKeydown?: (event: KeyboardEvent) => any;
+    onKeypress?: (event: KeyboardEvent) => any;
+    onKeyup?: (event: KeyboardEvent) => any;
+    onChangemodel?: (value: string | number) => any;
+    "onUpdate:modelValue"?: (value: string | number) => any;
+}>, {
+    required: boolean;
+    disabled: boolean;
+    modelValue: string | number;
+    defaultValue: string | number | string[];
+    valid: boolean;
+    validityStyles: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TextBox };

package/textbox/interfaces/TextBoxBlurEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onBlur` TextBox event.
+ */
+export interface TextBoxBlurEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}

package/textbox/interfaces/TextBoxFocusEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` TextBox event.
+ */
+export interface TextBoxFocusEvent {
+    /**
+     * The native FocusEvent from the DOM.
+     */
+    event: FocusEvent;
+}