@progress/kendo-vue-listbox/index.d.ts

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { PropType } from 'vue';
import { PublicProps } from 'vue';

/**
 * @hidden
 */
export declare const ListBox: DefineComponent<ExtractPropTypes<    {
size: {
type: PropType<string>;
default: string;
validator: (value: string) => boolean;
};
toolbarPosition: {
type: PropType<string>;
default: toolbarPosition;
validator: (value: string) => boolean;
};
textField: PropType<string>;
valueField: PropType<string>;
keyField: PropType<string>;
selectedField: PropType<string>;
item: PropType<string | object | Function>;
toolbar: PropType<string | object | Function>;
tabIndex: PropType<number>;
dataItems: {
type: PropType<any[]>;
default: () => any[];
};
draggable: {
type: PropType<boolean>;
default: boolean;
};
}>, {}, {}, {
wrapperClass(): {
[x: string]: boolean;
'k-listbox': boolean;
};
}, {
dispatchEvent(eventName: string, event: any, item: any): void;
setSelected(item: any): boolean;
handleKeyDown(event: any): void;
handleContainerDrop(event: any): void;
handleOnDragLeave(event: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
dragstart: any;
itemclick: any;
drop: any;
dragover: any;
keydown: any;
dragleave: any;
}, string, PublicProps, Readonly<ExtractPropTypes<    {
size: {
type: PropType<string>;
default: string;
validator: (value: string) => boolean;
};
toolbarPosition: {
type: PropType<string>;
default: toolbarPosition;
validator: (value: string) => boolean;
};
textField: PropType<string>;
valueField: PropType<string>;
keyField: PropType<string>;
selectedField: PropType<string>;
item: PropType<string | object | Function>;
toolbar: PropType<string | object | Function>;
tabIndex: PropType<number>;
dataItems: {
type: PropType<any[]>;
default: () => any[];
};
draggable: {
type: PropType<boolean>;
default: boolean;
};
}>> & Readonly<{
onDragleave?: (...args: any[] | unknown[]) => any;
onDragover?: (...args: any[] | unknown[]) => any;
onDragstart?: (...args: any[] | unknown[]) => any;
onDrop?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onItemclick?: (...args: any[] | unknown[]) => any;
}>, {
draggable: boolean;
size: string;
toolbarPosition: string;
dataItems: any[];
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

export declare interface ListBoxDragEvent {
    dataItem?: any;
}

declare interface ListBoxDragLeaveEvent {
}

export declare interface ListBoxItemClickEvent {
    dataItem?: any;
}

export declare interface ListBoxKeyDownEvent {
}

/**
 * Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
 */
export declare 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
     * - null&mdash;Does not set a size `className`.
     *
     * @default `medium`
     */
    size?: null | 'small' | 'medium' | 'large' | string;
    /**
     * 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;
}

/**
 * @hidden
 */
export declare const ListBoxToolbar: DefineComponent<ExtractPropTypes<    {
dataItems: PropType<any[]>;
dataConnected: PropType<any[]>;
tools: PropType<string[]>;
selectedField: {
type: PropType<string>;
default: string;
};
}>, {}, {
currentRtl: boolean;
}, {}, {
getRtlSvgIcon(toolIcon: any): any;
getRtlFontIcon(toolIcon: any): any;
handleToolClick(event: any, name: any): void;
isItemDisabled(tool: string): boolean;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
dataItems: PropType<any[]>;
dataConnected: PropType<any[]>;
tools: PropType<string[]>;
selectedField: {
type: PropType<string>;
default: string;
};
}>> & Readonly<{}>, {
selectedField: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;

export declare interface ListBoxToolbarClickEvent {
    toolName?: string;
}

export declare interface ListBoxToolbarProps {
    /**
     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
     * The built-in tools are:
     * * `moveUp`
     * * `moveDown`
     * * `transferTo`
     * * `transferFrom`
     * * `transferAllTo`
     * * `transferAllFrom`
     * * `remove`
     */
    tools?: Array<string>;
    /**
     * The data of the main ListBox.
     */
    dataItems: Array<any>;
    /**
     * The data of the connected ListBox.
     */
    dataConnected: Array<any>;
    /**
     * Set the selected field of the ListBoxToolbar.
     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
     */
    selectedField?: string;
    /**
     * Fires when one of the ListBoxToolbar tools is clicked.
     */
    onToolclick?: (event: ListBoxToolbarClickEvent) => void;
}

/**
 * @hidden
 */
export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];

/**
 * Process the data collection/s based on the clicked ListBoxToolbar tool.
 *
 * @param {T[]} listBoxOneData - The first data collection.
 * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
 * @param {string} toolName - The tool that was clicked.
 * @param {string} selectedField - The field that contains the selected information in the data object.
 * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
 */
export declare const processListBoxData: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, toolName: string, selectedField: string) => {
    listBoxOneData: any[];
    listBoxTwoData: any[];
};

/**
 * Process the data collection/s based on the dragged and drop item.
 *
 * @param {T[]} listBoxOneData - The first data collection.
 * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
 * @param {any} dragItem - The item that was dragged.
 * @param {any} dropItem - The drop target item.
 * @param {string} valueField - The field which points to the unique value of each data item.
 * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
 */
export declare const processListBoxDragAndDrop: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, dragItem: any, dropItem: any, valueField: string) => {
    listBoxOneData: any[];
    listBoxTwoData: any[];
};

declare enum toolbarPosition {
    TOP = "top",
    BOTTOM = "bottom",
    LEFT = "left",
    RIGHT = "right",
    NONE = "none"
}

export { }