@progress/kendo-vue-listbox
Version:
100 lines (99 loc) • 3.43 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxDragEvent, ListBoxDragLeaveEvent } from './ListBoxEvents';
import { toolbarPosition } from './Enums';
/**
* Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
*/
export interface ListBoxProps {
/**
* Sets a class of the Tooltip animation container.
*/
className?: string;
/**
* Configures the `size` of the ListBox.
*
* The available options are:
* - small
* - medium
* - large
*
* @default `undefined`
*/
size?: 'small' | 'medium' | 'large';
/**
* Set the data of the ListBox.
*/
dataItems: Array<any>;
/**
* Makes the items of the ListBox draggable.
*/
draggable?: boolean;
/**
* Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
*/
selectedField?: string;
/**
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
*/
textField: string;
/**
* The field that be used during form submit. Defaults to the textField if not set.
*/
valueField?: string;
/**
* The field that is used for rendering key of the items.
*/
keyField?: string;
/**
* Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
* * The possible values are:
* * `top`
* * `bottom`
* * `left`
* * `right` (Default)
* * `none`
*/
toolbarPosition?: toolbarPosition | string;
/**
* Renders a toolbar component next to the ListBox.
*/
toolbar?: string | object | Function;
/**
* Sets the `tabIndex` attribute of the ListBox.
*/
tabIndex?: number;
/**
* Defines the component that will be rendered for each item of the data collection.
*/
item?: string | object | Function;
/**
* Fires when an item from the ListBox is clicked. Contains the clicked item.
*/
onItemclick?: (event: ListBoxItemClickEvent) => void;
/**
* Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
*/
onKeydown?: (event: ListBoxKeyDownEvent) => void;
/**
* Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
*/
onDragstart?: (event: ListBoxDragEvent) => void;
/**
* Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
*/
onDragover?: (event: ListBoxDragEvent) => void;
/**
* Fires when an the user drops an item. The event contains information for the drop target item.
*/
onDrop?: (event: ListBoxDragEvent) => void;
/**
* Fires when a dragged element or text selection leaves the ListBox element.
*/
onDragleave?: (event: ListBoxDragLeaveEvent) => void;
}