devextreme-vue/cjs/text-box.d.ts

DevExtreme Vue UI and Visualization Components

/*!
 * devextreme-vue
 * Version: 25.1.5
 * Build date: Wed Sep 03 2025
 *
 * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
 *
 * This software may be modified and distributed under the terms
 * of the MIT license. See the LICENSE file in the root of the project for details.
 *
 * https://github.com/DevExpress/devextreme-vue
 */

import { PropType } from "vue";
import TextBox, { Properties } from "devextreme/ui/text_box";
import { TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position, ValidationStatus, TextEditorButtonLocation, ButtonStyle } from "devextreme/common";
import { TextBoxType, ChangeEvent, ContentReadyEvent, CopyEvent, CutEvent, DisposingEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InitializedEvent, InputEvent, KeyDownEvent, KeyUpEvent, OptionChangedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box";
import { dxButtonOptions, ClickEvent, ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, OptionChangedEvent as ButtonOptionChangedEvent } from "devextreme/ui/button";
type AccessibleOptions = Pick<Properties, "accessKey" | "activeStateEnabled" | "buttons" | "disabled" | "elementAttr" | "focusStateEnabled" | "height" | "hint" | "hoverStateEnabled" | "inputAttr" | "isDirty" | "isValid" | "label" | "labelMode" | "mask" | "maskChar" | "maskInvalidMessage" | "maskRules" | "maxLength" | "mode" | "name" | "onChange" | "onContentReady" | "onCopy" | "onCut" | "onDisposing" | "onEnterKey" | "onFocusIn" | "onFocusOut" | "onInitialized" | "onInput" | "onKeyDown" | "onKeyUp" | "onOptionChanged" | "onPaste" | "onValueChanged" | "placeholder" | "readOnly" | "rtlEnabled" | "showClearButton" | "showMaskMode" | "spellcheck" | "stylingMode" | "tabIndex" | "text" | "useMaskedValue" | "validationError" | "validationErrors" | "validationMessageMode" | "validationMessagePosition" | "validationStatus" | "value" | "valueChangeEvent" | "visible" | "width">;
interface DxTextBox extends AccessibleOptions {
    readonly instance?: TextBox;
}
declare const DxTextBox: import("@vue/runtime-core").DefineComponent<{
    accessKey: StringConstructor;
    activeStateEnabled: BooleanConstructor;
    buttons: PropType<(string | TextEditorButton)[]>;
    disabled: BooleanConstructor;
    elementAttr: PropType<Record<string, any>>;
    focusStateEnabled: BooleanConstructor;
    height: (NumberConstructor | StringConstructor)[];
    hint: StringConstructor;
    hoverStateEnabled: BooleanConstructor;
    inputAttr: {};
    isDirty: BooleanConstructor;
    isValid: BooleanConstructor;
    label: StringConstructor;
    labelMode: PropType<LabelMode>;
    mask: StringConstructor;
    maskChar: StringConstructor;
    maskInvalidMessage: StringConstructor;
    maskRules: {};
    maxLength: (NumberConstructor | StringConstructor)[];
    mode: PropType<TextBoxType>;
    name: StringConstructor;
    onChange: PropType<(e: ChangeEvent) => void>;
    onContentReady: PropType<(e: ContentReadyEvent) => void>;
    onCopy: PropType<(e: CopyEvent) => void>;
    onCut: PropType<(e: CutEvent) => void>;
    onDisposing: PropType<(e: DisposingEvent) => void>;
    onEnterKey: PropType<(e: EnterKeyEvent) => void>;
    onFocusIn: PropType<(e: FocusInEvent) => void>;
    onFocusOut: PropType<(e: FocusOutEvent) => void>;
    onInitialized: PropType<(e: InitializedEvent) => void>;
    onInput: PropType<(e: InputEvent) => void>;
    onKeyDown: PropType<(e: KeyDownEvent) => void>;
    onKeyUp: PropType<(e: KeyUpEvent) => void>;
    onOptionChanged: PropType<(e: OptionChangedEvent) => void>;
    onPaste: PropType<(e: PasteEvent) => void>;
    onValueChanged: PropType<(e: ValueChangedEvent) => void>;
    placeholder: StringConstructor;
    readOnly: BooleanConstructor;
    rtlEnabled: BooleanConstructor;
    showClearButton: BooleanConstructor;
    showMaskMode: PropType<MaskMode>;
    spellcheck: BooleanConstructor;
    stylingMode: PropType<EditorStyle>;
    tabIndex: NumberConstructor;
    text: StringConstructor;
    useMaskedValue: BooleanConstructor;
    validationError: {};
    validationErrors: PropType<any[]>;
    validationMessageMode: PropType<ValidationMessageMode>;
    validationMessagePosition: PropType<Position>;
    validationStatus: PropType<ValidationStatus>;
    value: StringConstructor;
    valueChangeEvent: StringConstructor;
    visible: BooleanConstructor;
    width: (NumberConstructor | StringConstructor)[];
}, unknown, unknown, {
    instance(): TextBox;
}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
    "update:isActive": null;
    "update:hoveredElement": null;
    "update:accessKey": null;
    "update:activeStateEnabled": null;
    "update:buttons": null;
    "update:disabled": null;
    "update:elementAttr": null;
    "update:focusStateEnabled": null;
    "update:height": null;
    "update:hint": null;
    "update:hoverStateEnabled": null;
    "update:inputAttr": null;
    "update:isDirty": null;
    "update:isValid": null;
    "update:label": null;
    "update:labelMode": null;
    "update:mask": null;
    "update:maskChar": null;
    "update:maskInvalidMessage": null;
    "update:maskRules": null;
    "update:maxLength": null;
    "update:mode": null;
    "update:name": null;
    "update:onChange": null;
    "update:onContentReady": null;
    "update:onCopy": null;
    "update:onCut": null;
    "update:onDisposing": null;
    "update:onEnterKey": null;
    "update:onFocusIn": null;
    "update:onFocusOut": null;
    "update:onInitialized": null;
    "update:onInput": null;
    "update:onKeyDown": null;
    "update:onKeyUp": null;
    "update:onOptionChanged": null;
    "update:onPaste": null;
    "update:onValueChanged": null;
    "update:placeholder": null;
    "update:readOnly": null;
    "update:rtlEnabled": null;
    "update:showClearButton": null;
    "update:showMaskMode": null;
    "update:spellcheck": null;
    "update:stylingMode": null;
    "update:tabIndex": null;
    "update:text": null;
    "update:useMaskedValue": null;
    "update:validationError": null;
    "update:validationErrors": null;
    "update:validationMessageMode": null;
    "update:validationMessagePosition": null;
    "update:validationStatus": null;
    "update:value": null;
    "update:valueChangeEvent": null;
    "update:visible": null;
    "update:width": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
    accessKey: StringConstructor;
    activeStateEnabled: BooleanConstructor;
    buttons: PropType<(string | TextEditorButton)[]>;
    disabled: BooleanConstructor;
    elementAttr: PropType<Record<string, any>>;
    focusStateEnabled: BooleanConstructor;
    height: (NumberConstructor | StringConstructor)[];
    hint: StringConstructor;
    hoverStateEnabled: BooleanConstructor;
    inputAttr: {};
    isDirty: BooleanConstructor;
    isValid: BooleanConstructor;
    label: StringConstructor;
    labelMode: PropType<LabelMode>;
    mask: StringConstructor;
    maskChar: StringConstructor;
    maskInvalidMessage: StringConstructor;
    maskRules: {};
    maxLength: (NumberConstructor | StringConstructor)[];
    mode: PropType<TextBoxType>;
    name: StringConstructor;
    onChange: PropType<(e: ChangeEvent) => void>;
    onContentReady: PropType<(e: ContentReadyEvent) => void>;
    onCopy: PropType<(e: CopyEvent) => void>;
    onCut: PropType<(e: CutEvent) => void>;
    onDisposing: PropType<(e: DisposingEvent) => void>;
    onEnterKey: PropType<(e: EnterKeyEvent) => void>;
    onFocusIn: PropType<(e: FocusInEvent) => void>;
    onFocusOut: PropType<(e: FocusOutEvent) => void>;
    onInitialized: PropType<(e: InitializedEvent) => void>;
    onInput: PropType<(e: InputEvent) => void>;
    onKeyDown: PropType<(e: KeyDownEvent) => void>;
    onKeyUp: PropType<(e: KeyUpEvent) => void>;
    onOptionChanged: PropType<(e: OptionChangedEvent) => void>;
    onPaste: PropType<(e: PasteEvent) => void>;
    onValueChanged: PropType<(e: ValueChangedEvent) => void>;
    placeholder: StringConstructor;
    readOnly: BooleanConstructor;
    rtlEnabled: BooleanConstructor;
    showClearButton: BooleanConstructor;
    showMaskMode: PropType<MaskMode>;
    spellcheck: BooleanConstructor;
    stylingMode: PropType<EditorStyle>;
    tabIndex: NumberConstructor;
    text: StringConstructor;
    useMaskedValue: BooleanConstructor;
    validationError: {};
    validationErrors: PropType<any[]>;
    validationMessageMode: PropType<ValidationMessageMode>;
    validationMessagePosition: PropType<Position>;
    validationStatus: PropType<ValidationStatus>;
    value: StringConstructor;
    valueChangeEvent: StringConstructor;
    visible: BooleanConstructor;
    width: (NumberConstructor | StringConstructor)[];
}>> & {
    "onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
    "onUpdate:accessKey"?: ((...args: any[]) => any) | undefined;
    "onUpdate:activeStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:disabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:elementAttr"?: ((...args: any[]) => any) | undefined;
    "onUpdate:focusStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:height"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hint"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hoverStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onContentReady"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onDisposing"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onInitialized"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onOptionChanged"?: ((...args: any[]) => any) | undefined;
    "onUpdate:rtlEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:tabIndex"?: ((...args: any[]) => any) | undefined;
    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
    "onUpdate:width"?: ((...args: any[]) => any) | undefined;
    "onUpdate:text"?: ((...args: any[]) => any) | undefined;
    "onUpdate:stylingMode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
    "onUpdate:buttons"?: ((...args: any[]) => any) | undefined;
    "onUpdate:inputAttr"?: ((...args: any[]) => any) | undefined;
    "onUpdate:isDirty"?: ((...args: any[]) => any) | undefined;
    "onUpdate:isValid"?: ((...args: any[]) => any) | undefined;
    "onUpdate:label"?: ((...args: any[]) => any) | undefined;
    "onUpdate:labelMode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:maxLength"?: ((...args: any[]) => any) | undefined;
    "onUpdate:name"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onChange"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onCopy"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onCut"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onEnterKey"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onFocusIn"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onFocusOut"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onInput"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onKeyDown"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onKeyUp"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onPaste"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onValueChanged"?: ((...args: any[]) => any) | undefined;
    "onUpdate:placeholder"?: ((...args: any[]) => any) | undefined;
    "onUpdate:readOnly"?: ((...args: any[]) => any) | undefined;
    "onUpdate:showClearButton"?: ((...args: any[]) => any) | undefined;
    "onUpdate:spellcheck"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationError"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationErrors"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationMessageMode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationMessagePosition"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationStatus"?: ((...args: any[]) => any) | undefined;
    "onUpdate:valueChangeEvent"?: ((...args: any[]) => any) | undefined;
    "onUpdate:mode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:mask"?: ((...args: any[]) => any) | undefined;
    "onUpdate:maskChar"?: ((...args: any[]) => any) | undefined;
    "onUpdate:maskInvalidMessage"?: ((...args: any[]) => any) | undefined;
    "onUpdate:maskRules"?: ((...args: any[]) => any) | undefined;
    "onUpdate:showMaskMode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:useMaskedValue"?: ((...args: any[]) => any) | undefined;
}, {
    activeStateEnabled: boolean;
    disabled: boolean;
    focusStateEnabled: boolean;
    hoverStateEnabled: boolean;
    rtlEnabled: boolean;
    visible: boolean;
    isDirty: boolean;
    isValid: boolean;
    readOnly: boolean;
    showClearButton: boolean;
    spellcheck: boolean;
    useMaskedValue: boolean;
}>;
declare const DxButton: import("@vue/runtime-core").DefineComponent<{
    location: PropType<TextEditorButtonLocation>;
    name: StringConstructor;
    options: PropType<Record<string, any> | dxButtonOptions>;
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
    "update:isActive": null;
    "update:hoveredElement": null;
    "update:location": null;
    "update:name": null;
    "update:options": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
    location: PropType<TextEditorButtonLocation>;
    name: StringConstructor;
    options: PropType<Record<string, any> | dxButtonOptions>;
}>> & {
    "onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
    "onUpdate:name"?: ((...args: any[]) => any) | undefined;
    "onUpdate:location"?: ((...args: any[]) => any) | undefined;
    "onUpdate:options"?: ((...args: any[]) => any) | undefined;
}, {}>;
declare const DxOptions: import("@vue/runtime-core").DefineComponent<{
    accessKey: StringConstructor;
    activeStateEnabled: BooleanConstructor;
    disabled: BooleanConstructor;
    elementAttr: PropType<Record<string, any>>;
    focusStateEnabled: BooleanConstructor;
    height: (NumberConstructor | StringConstructor)[];
    hint: StringConstructor;
    hoverStateEnabled: BooleanConstructor;
    icon: StringConstructor;
    onClick: PropType<(e: ClickEvent) => void>;
    onContentReady: PropType<(e: ButtonContentReadyEvent) => void>;
    onDisposing: PropType<(e: ButtonDisposingEvent) => void>;
    onInitialized: PropType<(e: ButtonInitializedEvent) => void>;
    onOptionChanged: PropType<(e: ButtonOptionChangedEvent) => void>;
    rtlEnabled: BooleanConstructor;
    stylingMode: PropType<ButtonStyle>;
    tabIndex: NumberConstructor;
    template: {};
    text: StringConstructor;
    type: PropType<string>;
    useSubmitBehavior: BooleanConstructor;
    validationGroup: StringConstructor;
    visible: BooleanConstructor;
    width: (NumberConstructor | StringConstructor)[];
}, unknown, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
    "update:isActive": null;
    "update:hoveredElement": null;
    "update:accessKey": null;
    "update:activeStateEnabled": null;
    "update:disabled": null;
    "update:elementAttr": null;
    "update:focusStateEnabled": null;
    "update:height": null;
    "update:hint": null;
    "update:hoverStateEnabled": null;
    "update:icon": null;
    "update:onClick": null;
    "update:onContentReady": null;
    "update:onDisposing": null;
    "update:onInitialized": null;
    "update:onOptionChanged": null;
    "update:rtlEnabled": null;
    "update:stylingMode": null;
    "update:tabIndex": null;
    "update:template": null;
    "update:text": null;
    "update:type": null;
    "update:useSubmitBehavior": null;
    "update:validationGroup": null;
    "update:visible": null;
    "update:width": null;
}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
    accessKey: StringConstructor;
    activeStateEnabled: BooleanConstructor;
    disabled: BooleanConstructor;
    elementAttr: PropType<Record<string, any>>;
    focusStateEnabled: BooleanConstructor;
    height: (NumberConstructor | StringConstructor)[];
    hint: StringConstructor;
    hoverStateEnabled: BooleanConstructor;
    icon: StringConstructor;
    onClick: PropType<(e: ClickEvent) => void>;
    onContentReady: PropType<(e: ButtonContentReadyEvent) => void>;
    onDisposing: PropType<(e: ButtonDisposingEvent) => void>;
    onInitialized: PropType<(e: ButtonInitializedEvent) => void>;
    onOptionChanged: PropType<(e: ButtonOptionChangedEvent) => void>;
    rtlEnabled: BooleanConstructor;
    stylingMode: PropType<ButtonStyle>;
    tabIndex: NumberConstructor;
    template: {};
    text: StringConstructor;
    type: PropType<string>;
    useSubmitBehavior: BooleanConstructor;
    validationGroup: StringConstructor;
    visible: BooleanConstructor;
    width: (NumberConstructor | StringConstructor)[];
}>> & {
    "onUpdate:isActive"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hoveredElement"?: ((...args: any[]) => any) | undefined;
    "onUpdate:accessKey"?: ((...args: any[]) => any) | undefined;
    "onUpdate:activeStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:disabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:elementAttr"?: ((...args: any[]) => any) | undefined;
    "onUpdate:focusStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:height"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hint"?: ((...args: any[]) => any) | undefined;
    "onUpdate:hoverStateEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onContentReady"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onDisposing"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onInitialized"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onOptionChanged"?: ((...args: any[]) => any) | undefined;
    "onUpdate:rtlEnabled"?: ((...args: any[]) => any) | undefined;
    "onUpdate:tabIndex"?: ((...args: any[]) => any) | undefined;
    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
    "onUpdate:width"?: ((...args: any[]) => any) | undefined;
    "onUpdate:icon"?: ((...args: any[]) => any) | undefined;
    "onUpdate:template"?: ((...args: any[]) => any) | undefined;
    "onUpdate:text"?: ((...args: any[]) => any) | undefined;
    "onUpdate:onClick"?: ((...args: any[]) => any) | undefined;
    "onUpdate:stylingMode"?: ((...args: any[]) => any) | undefined;
    "onUpdate:type"?: ((...args: any[]) => any) | undefined;
    "onUpdate:useSubmitBehavior"?: ((...args: any[]) => any) | undefined;
    "onUpdate:validationGroup"?: ((...args: any[]) => any) | undefined;
}, {
    activeStateEnabled: boolean;
    disabled: boolean;
    focusStateEnabled: boolean;
    hoverStateEnabled: boolean;
    rtlEnabled: boolean;
    visible: boolean;
    useSubmitBehavior: boolean;
}>;
export default DxTextBox;
export { DxTextBox, DxButton, DxOptions };
import type * as DxTextBoxTypes from "devextreme/ui/text_box_types";
export { DxTextBoxTypes };