/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent } from './../common/events'; import { DropDownsPopupSettings, Suggestion } from '../common/settings'; import { FormComponentProps } from '@progress/kendo-vue-common'; /** * Represents the object of the `change` AutoComplete event. */ export interface AutoCompleteChangeEvent extends ChangeEvent { /** * The selected Suggestion object. */ suggestion?: Suggestion; /** * Represents the selected item. */ item?: any; } /** * Represents the object of the `select` AutoComplete event. */ export interface AutoCompleteChangeEvent extends ChangeEvent { /** * Represents the selected item. */ item?: any; } /** * Represents the object of the `open` AutoComplete event. */ export interface AutoCompleteOpenEvent extends OpenEvent { } /** * Represents the object of the `close` AutoComplete event. */ export interface AutoCompleteCloseEvent extends CloseEvent { } /** * Represents the object of the `focus` AutoComplete event. */ export interface AutoCompleteFocusEvent extends FocusEvent { } /** * Represents the object of the `blur` AutoComplete event. */ export interface AutoCompleteBlurEvent extends BlurEvent { } /** * Represents the props of the [Kendo UI for Vue AutoComplete component]({% slug overview_autocomplete %}). */ export interface AutoCompleteProps extends FormComponentProps { /** * Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})). */ dataItems?: any[]; /** * Sets the opened and closed state of the AutoComplete. */ opened?: boolean; /** * Sets the v-model value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})). */ modelValue?: string; /** * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})). */ value?: string; /** * Sets the default value of the AutoComplete. Similar to the native `input` HTML element. */ defaultValue?: string; /** * The hint that is displayed when the AutoComplete is empty. */ placeholder?: string; /** * Sets the read-only state of the AutoComplete. */ readonly?: boolean; /** * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})). */ suggest?: boolean | string; /** * Sets the disabled state of the AutoComplete. */ disabled?: boolean; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)). */ loading?: boolean; /** * Specifies the `tabIndex` of the AutoComplete. */ tabIndex?: number; /** * Specifies the `accessKey` of the AutoComplete. */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it. */ textField?: string; /** * Renders a floating label for the AutoComplete. */ label?: string; /** * Configures the popup of the AutoComplete. */ popupSettings?: DropDownsPopupSettings; /** * Specifies the id of the component. */ id?: string; /** * 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; /** * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component. */ ariaLabel?: string; /** * If set, the AutoComplete will use it to get the focused item index. * * Default functionality returns the first item which starts with the input text. * * @example * ```jsx-no-run * const focusedItemIndex = (data, inputText, textField) => { * let text = inputText.toLowerCase(); * return data.findIndex(item => * String(textField ? item[textField] : item).toLowerCase().includes(text)); * }; * * * ``` */ focusedItemIndex?: (data: any, inputText: string, textField?: string) => number; /** * Fires each time the popup of the AutoComplete is about to open. */ onOpen?: (event: AutoCompleteOpenEvent) => void; /** * Fires each time the popup of the AutoComplete is about to close. */ onClose?: (event: AutoCompleteCloseEvent) => void; /** * Fires each time the user focuses the AutoComplete. */ onFocus?: (event: AutoCompleteFocusEvent) => void; /** * Fires each time the AutoComplete gets blurred. */ onBlur?: (event: AutoCompleteBlurEvent) => void; /** * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})). */ onChange?: (event: AutoCompleteChangeEvent) => void; /** * Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-items)). Used to override the default appearance of the list items. */ itemRender?: any; /** * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-no-data)). Used to override the default appearance of the element. */ listNoDataRender?: any; /** * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)). */ header?: any; /** * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)). */ footer?: any; /** * Configures the `size` of the AutoComnplete. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the AutoComnplete. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the AutoComnplete. * * The available options are: * - solid * - outline * - flat * * @default undefined */ fillMode?: 'solid' | 'outline' | 'flat'; /** * Sets the data item field that represents the start of a group. Applicable to objects data. */ groupField?: string; /** * Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers. */ groupHeaderItemRender?: any; /** * Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component. */ groupStickyHeaderItemRender?: any; /** * 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; }