@progress/kendo-vue-dropdowns 8.0.3-develop.2 → 8.0.3-develop.3

package/DropDownList/DropDownList.d.ts

@@ -0,0 +1,353 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { InternalState } from './../common/settings';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const DropDownList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    title: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+    };
+    defaultValue: {
+        type: PropType<any>;
+        default: any;
+    };
+    name: PropType<string>;
+    modelValue: {
+        type: PropType<any>;
+        default: any;
+    };
+    value: {
+        type: PropType<any>;
+        default: any;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    leftRightKeysNavigation: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validate: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+        default: any;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    delay: {
+        type: PropType<number>;
+        default: number;
+    };
+    ignoreCase: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-svg-icons').SVGIcon>;
+    iconClassName: PropType<string>;
+    defaultItem: PropType<any>;
+    valueRender: PropType<any>;
+    valueMap: PropType<(value: any) => any>;
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: {
+        type: PropType<string>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    accessKey: PropType<string>;
+    dataItems: PropType<any[]>;
+    textField: PropType<string>;
+    valueField: PropType<string>;
+    valuePrimitive: PropType<boolean>;
+    className: PropType<string>;
+    loading: PropType<boolean>;
+    popupSettings: {
+        type: PropType<import('./../common/settings').DropDownsPopupSettings>;
+        default: {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    itemRender: PropType<any>;
+    groupHeaderItemRender: PropType<any>;
+    groupStickyHeaderItemRender: PropType<any>;
+    listNoDataRender: PropType<any>;
+    focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    filterable: PropType<boolean>;
+    filter: {
+        type: PropType<string>;
+        default: any;
+    };
+    virtual: {
+        type: PropType<import('./../common/settings').VirtualizationSettings>;
+        default: any;
+    };
+    ariaLabelledBy: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    groupField: {
+        type: PropType<string>;
+    };
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+    onChange: PropType<(event: import('./DropDownListProps').DropDownListChangeEvent) => void>;
+}>, {
+    selectRef: import('vue').Ref<any, any>;
+    baseWrapperRef: import('vue').Ref<any, any>;
+    kendoAnchorRef: import('vue').Ref<any, any>;
+}, {
+    hasMounted: boolean;
+    currentText: string;
+    currentValue: string;
+    currentFocused: boolean;
+    currentOpened: boolean;
+    searchState: {
+        word: string;
+        last: string;
+    };
+    _skipFocusEvent: boolean;
+    valueDuringOnChange: {};
+    _navigated: boolean;
+    group: any;
+    isScrolling: boolean;
+    itemHeight: number;
+    state: any;
+    popupWidth: any;
+    windowWidth: number;
+}, {
+    index(): number;
+    spanClassNames(): object;
+    dropDownListId(): string;
+    isOpen(): boolean;
+    animationStyles(): object | undefined;
+    classNameAdaptive(): string;
+    adaptiveState(): boolean;
+}, {
+    focus(): void;
+    computedValue(): any;
+    findByFieldValue(field: string, value: string): any;
+    primitiveValue(): any;
+    validity(): FormComponentValidity;
+    handleItemSelect(index: number, state: InternalState): void;
+    onNavigate(state: InternalState, keyCode: number): void;
+    search(event: any): void;
+    selectNext(event: any): void;
+    handleKeyDown(event: any): void;
+    handleItemClick(index: number, event: any): void;
+    handleFocus(event: any): void;
+    handleBlur(event: any): void;
+    handleDefaultItemClick(event: any): void;
+    handleWrapperClick(event: MouseEvent): void;
+    handleKeyPress(event: any): void;
+    handleListFilterChange(event: any): void;
+    onPopupOpened(): void;
+    onPopupClosed(): void;
+    focusedIndex(): any;
+    focusElement(element: HTMLElement): void;
+    setValidity(): void;
+    triggerOnChange(item: any, state: InternalState): void;
+    applyState(state: InternalState): void;
+    calculateMedia(entries: ResizeObserverEntry[]): void;
+    repositionPopup(): void;
+    onScroll(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    title: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+    };
+    defaultValue: {
+        type: PropType<any>;
+        default: any;
+    };
+    name: PropType<string>;
+    modelValue: {
+        type: PropType<any>;
+        default: any;
+    };
+    value: {
+        type: PropType<any>;
+        default: any;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    leftRightKeysNavigation: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validate: {
+        type: PropType<boolean>;
+    };
+    validationMessage: {
+        type: PropType<string>;
+        default: any;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    delay: {
+        type: PropType<number>;
+        default: number;
+    };
+    ignoreCase: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-svg-icons').SVGIcon>;
+    iconClassName: PropType<string>;
+    defaultItem: PropType<any>;
+    valueRender: PropType<any>;
+    valueMap: PropType<(value: any) => any>;
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: {
+        type: PropType<string>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    accessKey: PropType<string>;
+    dataItems: PropType<any[]>;
+    textField: PropType<string>;
+    valueField: PropType<string>;
+    valuePrimitive: PropType<boolean>;
+    className: PropType<string>;
+    loading: PropType<boolean>;
+    popupSettings: {
+        type: PropType<import('./../common/settings').DropDownsPopupSettings>;
+        default: {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    itemRender: PropType<any>;
+    groupHeaderItemRender: PropType<any>;
+    groupStickyHeaderItemRender: PropType<any>;
+    listNoDataRender: PropType<any>;
+    focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    filterable: PropType<boolean>;
+    filter: {
+        type: PropType<string>;
+        default: any;
+    };
+    virtual: {
+        type: PropType<import('./../common/settings').VirtualizationSettings>;
+        default: any;
+    };
+    ariaLabelledBy: PropType<string>;
+    ariaLabel: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    groupField: {
+        type: PropType<string>;
+    };
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+    onChange: PropType<(event: import('./DropDownListProps').DropDownListChangeEvent) => void>;
+}>> & Readonly<{}>, {
+    filter: string;
+    required: boolean;
+    value: any;
+    tabIndex: number;
+    virtual: import('./../common/settings').VirtualizationSettings;
+    adaptive: boolean;
+    dir: string;
+    defaultValue: any;
+    opened: boolean;
+    popupSettings: import('./../common/settings').DropDownsPopupSettings;
+    modelValue: any;
+    valid: boolean;
+    validationMessage: string;
+    validityStyles: boolean;
+    adaptiveTitle: string;
+    delay: number;
+    ignoreCase: boolean;
+    leftRightKeysNavigation: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DropDownList };

package/DropDownList/DropDownListProps.d.ts

@@ -0,0 +1,312 @@
+/**
+ * @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;
+}