/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events'; import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings'; import { FormComponentProps } from '@progress/kendo-vue-common'; import { SVGIcon } from '@progress/kendo-svg-icons'; /** * Represents the object of the `filterChange` DropDownList event. */ export interface DropDownListFilterChangeEvent extends FilterChangeEvent { } /** * Represents the object of the `change` DropDownList event. */ export interface DropDownListChangeEvent extends ChangeEvent { } /** * Represents the object of the `open` DropDownList event. */ export interface DropDownListOpenEvent extends OpenEvent { } /** * Represents the object of the `close` DropDownList event. */ export interface DropDownListCloseEvent extends CloseEvent { } /** * Represents the object of the `focus` DropDownList event. */ export interface DropDownListFocusEvent extends FocusEvent { } /** * Represents the object of the `blur` DropDownList event. */ export interface DropDownListBlurEvent extends BlurEvent { } /** * Represents the object of the `pageChange` DropDownList event. */ export interface DropDownListPageChangeEvent extends PageChangeEvent { } /** * Represents the props of the [KendoVue DropDownList component]({% slug overview_dropdownlist %}). */ export interface DropDownListProps extends FormComponentProps { /** * Specifies the id of the component. */ id?: string; /** * Specifies the title of the component. */ title?: 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; /** * There is no placeholder concept when it comes to DropDownList/HTML select element. The approach * that we recommend in such cases is to use the default Item as it is shown here ([see example]({% slug defaultitem_dropdownlist %})). */ placeholder?: string; /** * Sets the validate of the input. */ validate?: boolean; /** * Sets the data of the DropDownList ([see example]({% slug binding_dropdownlist %})). */ dataItems?: any[]; /** * Sets the text of the default empty item. The type of the defined value has to match the data type. */ defaultItem?: any; /** * Sets the delay before an item search is performed. When filtration is disabled, use this option. */ delay?: number; /** * Enables a case-insensitive search. When filtering is disabled, use this option. */ ignoreCase?: boolean; /** * Sets the opened and closed state of the DropDownList. */ opened?: boolean; /** * The styles that are applied to the DropDownList. */ style?: any; /** * @hidden */ modelValue?: any; /** * Sets the value of the DropDownList ([see example]({% slug binding_dropdownlist %})). It can either be of the primitive (string, numbers) or of the complex (objects) type. */ value?: any; /** * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element. */ defaultValue?: any; /** * Sets additional classes to the DropDownList. */ className?: string; /** * Defines the name for an existing arrow icon. */ icon?: string; /** * Defines the svg icon in a Kendo UI for Vue theme. */ svgIcon?: SVGIcon; /** * Sets CSS classes to the expand `icon` DOM element. */ iconClassName?: string; /** * Sets the disabled state of the DropDownList. */ disabled?: boolean; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})). */ filterable?: boolean; /** * Sets the value of filtering input. */ filter?: string; /** * Sets the loading state of the DropDownList. */ loading?: boolean; /** * Specifies the `tabIndex` of the DropDownList. */ tabIndex?: number; /** * Specifies the `accessKey` of the DropDownList. */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug defaultitem_dropdownlist %})). If the data contains only primitive values, do not define it. */ textField?: string; /** * Sets the data item field that represents the item value. */ valueField?: string; /** * Specifies the type of the selected value. If set to true, the selected value has to be of a primitive value. */ valuePrimitive?: boolean; /** * Sets the key for comparing the data items of the DropDownList. If `dataItemKey` is not set, the DropDownList compares the items by reference ([see example]({% slug binding_dropdownlist %}#toc-datasets-of-objects)). */ dataItemKey?: string; /** * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select` element. */ valueMap?: (value: any) => any; /** * Renders a floating label for the DropDownList. */ label?: string; /** * Configures the popup of the DropDownList. */ popupSettings?: DropDownsPopupSettings; /** * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})). */ virtual?: VirtualizationSettings; /** * If set, the DropDownList will use it to get the focused item index. * * Default functionality returns the first item which starts with the input text. * */ focusedItemIndex?: (data: any, inputText: string, textField?: string) => number; /** * Fires each time the popup of the DropDownList is about to open. */ onOpen?: (event: DropDownListOpenEvent) => void; /** * Fires each time the popup of the DropDownList is about to close. */ onClose?: (event: DropDownListCloseEvent) => void; /** * Fires each time the user focuses the DropDownList. */ onFocus?: (event: DropDownListFocusEvent) => void; /** * Fires each time the DropDownList gets blurred. */ onBlur?: (event: DropDownListBlurEvent) => void; /** * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})). */ onChange?: (event: DropDownListChangeEvent) => void; /** * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value. */ onFilterchange?: (event: DropDownListFilterChangeEvent) => void; /** * Fires when both the virtual scrolling of the DropDownList is enabled and the component requires data for another page ([see example]({% slug virtualization_dropdownlist %})). */ onPagechange?: (event: DropDownListPageChangeEvent) => void; /** * Fires when a DropDownList item is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-items)). Used to override the default appearance of the list items. */ itemRender?: any; /** * Fires when the element which renders the value is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-values)). Used to override the default appearance of the element. */ valueRender?: any; /** * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-no-data)). Used to override the default appearance of the element. */ listNoDataRender?: any; /** * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)). */ header?: any; /** * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)). */ footer?: any; /** * Specifies the `name` property of the `select` DOM element. */ name?: string; /** * If set to `false`, the DropDownList will not navigate over its data through left and right keys. * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys. */ leftRightKeysNavigation?: boolean; /** * Configures the `size` of the DropDownList. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DropDownList. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DropDownList. * * 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 DropDownList group header item is about to be rendered. Used to override the default appearance of the group's headers. */ groupHeaderItemRender?: any; /** * Fires when a DropDownList 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; /** * Provides different rendering of the popup element based on the screen dimensions ([see example]({% slug adaptive_rendering_dropdownlist %})). */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup ([see example]({% slug adaptive_rendering_dropdownlist %})). */ adaptiveTitle?: string; }