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

package/MultiSelect/MultiSelectProps.d.ts

@@ -0,0 +1,300 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
+import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { TagData } from './TagList';
+/**
+ * Represents the object of the `filterChange` MultiSelect event.
+ */
+export interface MultiSelectFilterChangeEvent extends FilterChangeEvent {
+}
+/**
+ * Represents the object of the `change` MultiSelect event.
+ */
+export interface MultiSelectChangeEvent extends ChangeEvent {
+}
+/**
+ * Represents the object of the `open` MultiSelect event.
+ */
+export interface MultiSelectOpenEvent extends OpenEvent {
+}
+/**
+ * Represents the object of the `close` MultiSelect event.
+ */
+export interface MultiSelectCloseEvent extends CloseEvent {
+}
+/**
+ * Represents the object of the `focus` MultiSelect event.
+ */
+export interface MultiSelectFocusEvent extends FocusEvent {
+}
+/**
+ * Represents the object of the `blur` MultiSelect event.
+ */
+export interface MultiSelectBlurEvent extends BlurEvent {
+}
+/**
+ * Represents the object of the `pageChange` MultiSelect event.
+ */
+export interface MultiSelectPageChangeEvent extends PageChangeEvent {
+}
+/**
+ * Represents the props of the [Kendo UI for Vue MultiSelect component]({% slug overview_multiselect %}).
+ */
+export interface MultiSelectProps extends FormComponentProps {
+    /**
+     * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`.
+     */
+    allowCustom?: boolean;
+    /**
+     * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})).
+     */
+    dataItems?: any[];
+    /**
+     * Sets the opened and closed state of the MultiSelect.
+     */
+    opened?: boolean;
+    /**
+     * Determines whether to close the options list of the MultiSelect after the item selection is finished.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    /**
+     * @hidden
+     */
+    modelValue?: any;
+    /**
+     * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
+     */
+    value?: Array<any>;
+    /**
+     * Sets the validate of the input.
+     */
+    validate?: boolean;
+    /**
+     * The hint that is displayed when the MultiSelect is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the close icon of the tag items.
+     */
+    removeTagIcon?: string;
+    /**
+     * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})).
+     */
+    tags?: Array<TagData>;
+    /**
+     * 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 MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference.
+     */
+    dataItemKey?: string;
+    /**
+     * Sets the default value of the MultiSelect. Similar to the native `select` HTML element.
+     */
+    defaultValue?: Array<any>;
+    /**
+     * Sets the disabled state of the MultiSelect.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})).
+     */
+    filterable?: boolean;
+    /**
+     * 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 MultiSelect 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;
+    /**
+     * Sets the value of filtering input. Useful for making the filtering input a controlled component.
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the MultiSelect.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the MultiSelect.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Renders a floating label for the MultiSelect.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the MultiSelect.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})).
+     */
+    virtual?: VirtualizationSettings;
+    /**
+     * Fires each time the popup of the MultiSelect is about to open.
+     */
+    onOpen?: (event: MultiSelectOpenEvent) => void;
+    /**
+     * Fires each time the popup of the MultiSelect is about to close.
+     */
+    onClose?: (event: MultiSelectCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the MultiSelect.
+     */
+    onFocus?: (event: MultiSelectFocusEvent) => void;
+    /**
+     * Fires each time the MultiSelect gets blurred.
+     */
+    onBlur?: (event: MultiSelectBlurEvent) => void;
+    /**
+     * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})).
+     */
+    onChange?: (event: MultiSelectChangeEvent) => void;
+    /**
+     * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
+     */
+    onFilterchange?: (event: MultiSelectFilterChangeEvent) => void;
+    /**
+     * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})).
+     */
+    onPagechange?: (event: MultiSelectPageChangeEvent) => void;
+    /**
+     * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#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_multiselect %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: any;
+    /**
+     * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
+     */
+    tagRender?: any;
+    /**
+     * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    header?: any;
+    /**
+     * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
+     */
+    footer?: any;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default `undefined`
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiSelect.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default `undefined`
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `roundness` of the tags in MultiSelect.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - circle
+     * - full
+     *
+     * @default `undefined`
+     */
+    tagsRounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     *
+     * @default `undefined`
+     */
+    fillMode?: 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a MultiSelect group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: any;
+    /**
+     * Fires when a MultiSelect 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.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+    /**
+     * 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;
+}

package/MultiSelect/TagList.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the tag data.
+ */
+export interface TagData {
+    /**
+     * Represents the text of the tag.
+     */
+    text: string;
+    /**
+     * Represents the data items which correspond to the tag.
+     */
+    data: Array<any>;
+}
+/**
+ * @hidden
+ */
+export interface TagListProps {
+    removeTagIcon: string;
+    dataItems: Array<TagData>;
+    guid: string;
+    id?: string;
+    className?: string;
+    focused?: TagData;
+    tagRender?: any;
+    size?: 'small' | 'medium' | 'large';
+    fillMode?: 'solid' | 'outline' | 'flat';
+    tagsRounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+}
+/**
+ * @hidden
+ */
+declare const TagList: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    removeTagIcon: StringConstructor;
+    dataItems: ArrayConstructor;
+    guid: StringConstructor;
+    focused: ObjectConstructor;
+    tagRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+    tagsRounded: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    id: StringConstructor;
+    className: StringConstructor;
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    onTagdelete: FunctionConstructor;
+}>, {}, {}, {
+    wrapperClass(): {
+        [x: string]: any;
+        'k-chip-list': boolean;
+        'k-disabled': any;
+    };
+}, {
+    onTagDelete(tagData: any, event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    removeTagIcon: StringConstructor;
+    dataItems: ArrayConstructor;
+    guid: StringConstructor;
+    focused: ObjectConstructor;
+    tagRender: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+    tagsRounded: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    id: StringConstructor;
+    className: StringConstructor;
+    size: {
+        type: StringConstructor;
+        validator: (value: string) => boolean;
+    };
+    onTagdelete: FunctionConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { TagList };

package/MultiSelectTree/MultiSelectTree.d.ts

@@ -0,0 +1,272 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TreeViewExpandChangeEvent, TreeViewItemClickEvent } from '@progress/kendo-vue-treeview';
+import { MultiSelectTreeFilterChangeEvent, MultiSelectTreeFocusEvent, MultiSelectTreeBlurEvent, MultiSelectTreeChangeEvent, MultiSelectTreeOpenEvent, MultiSelectTreeCloseEvent, MultiSelectTreeExpandEvent, MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps';
+import { DropdownEvent } from '../common/events';
+import { TagData } from '../MultiSelect/TagList';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+declare const MultiSelectTree: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    tabIndex: PropType<number>;
+    accessKey: PropType<string>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    value: PropType<any[]>;
+    modelValue: PropType<any[]>;
+    valueMap: PropType<(value: any[]) => any>;
+    placeholder: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    textField: {
+        type: PropType<string>;
+        required: true;
+    };
+    checkField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkIndeterminateField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandField: PropType<string>;
+    subItemsField: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string>;
+    label: PropType<string>;
+    validationMessage: PropType<string>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    required: PropType<boolean>;
+    name: PropType<string>;
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    filterable: PropType<boolean>;
+    filter: PropType<string>;
+    loading: PropType<boolean>;
+    tags: PropType<TagData[]>;
+    popupSettings: {
+        type: PropType<import('..').DropDownsPopupSettings>;
+        default: () => {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    item: PropType<any>;
+    tag: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    listNoData: PropType<any>;
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+}>, {}, {
+    focusedTagState: any;
+    openState: boolean;
+    focusedState: boolean;
+    filterState: string;
+    currentValue: any[];
+    popupWidth: string;
+    windowWidth: number;
+    initialAdaptiveRenderingValues: any;
+}, {
+    animationStyles(): object | undefined;
+    classNameAdaptive(): string;
+    adaptiveState(): any;
+    isOpen(): any;
+    computedValue(): any;
+    hasValue(): boolean;
+    tagsToRenderRef(): any;
+}, {
+    clearFilter(event: MultiSelectTreeCloseEvent): void;
+    onCancel(event: MouseEvent): void;
+    calculateMedia(entries: ResizeObserverEntry[]): void;
+    calculatePopupWidth(): void;
+    focus(): void;
+    setValidity(): void;
+    changeValue(event: DropdownEvent, items: any[], operation: MultiSelectTreeChangeEventOperation): void;
+    onChange(e: TreeViewItemClickEvent): void;
+    openPopup(event: MultiSelectTreeCloseEvent): void;
+    closePopup(event: MultiSelectTreeCloseEvent): void;
+    switchFocus(focusFn: () => void): void;
+    focusElement(element: HTMLElement | null): void;
+    onPopupOpened(): void;
+    onPopupClosed(): void;
+    onFocus(event: any): void;
+    onBlur(event: any): void;
+    onWrapperMouseDown(): void;
+    onWrapperClick(event: any): void;
+    onWrapperKeyDown(event: any): any;
+    onInputKeyDown(event: any): void;
+    onClear(event: any): void;
+    onTagDelete(itemsToRemove: Array<any>, event: any): void;
+    onExpand(e: TreeViewExpandChangeEvent): void;
+    onFilterChange(event: any, emptyValue?: boolean): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (event: MultiSelectTreeOpenEvent) => true;
+    close: (event: MultiSelectTreeCloseEvent) => true;
+    focus: (event: MultiSelectTreeFocusEvent) => true;
+    blur: (event: MultiSelectTreeBlurEvent) => true;
+    change: (event: MultiSelectTreeChangeEvent) => true;
+    filterchange: (event: MultiSelectTreeFilterChangeEvent) => true;
+    expandchange: (event: MultiSelectTreeExpandEvent) => true;
+    changemodel: (value: any) => true;
+    'update:modelValue': (value: any) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    tabIndex: PropType<number>;
+    accessKey: PropType<string>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    value: PropType<any[]>;
+    modelValue: PropType<any[]>;
+    valueMap: PropType<(value: any[]) => any>;
+    placeholder: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    textField: {
+        type: PropType<string>;
+        required: true;
+    };
+    checkField: {
+        type: PropType<string>;
+        default: string;
+    };
+    checkIndeterminateField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandField: PropType<string>;
+    subItemsField: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string>;
+    label: PropType<string>;
+    validationMessage: PropType<string>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    required: PropType<boolean>;
+    name: PropType<string>;
+    id: PropType<string>;
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    filterable: PropType<boolean>;
+    filter: PropType<string>;
+    loading: PropType<boolean>;
+    tags: PropType<TagData[]>;
+    popupSettings: {
+        type: PropType<import('..').DropDownsPopupSettings>;
+        default: () => {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: string) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: string) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: string) => boolean;
+    };
+    item: PropType<any>;
+    tag: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    listNoData: PropType<any>;
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+}>> & Readonly<{
+    onBlur?: (event: MultiSelectTreeBlurEvent) => any;
+    onChange?: (event: MultiSelectTreeChangeEvent) => any;
+    onClose?: (event: MultiSelectTreeCloseEvent) => any;
+    onFocus?: (event: MultiSelectTreeFocusEvent) => any;
+    onOpen?: (event: MultiSelectTreeOpenEvent) => any;
+    onChangemodel?: (value: any) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
+    onFilterchange?: (event: MultiSelectTreeFilterChangeEvent) => any;
+    onExpandchange?: (event: MultiSelectTreeExpandEvent) => any;
+}>, {
+    adaptive: boolean;
+    dataItems: any[];
+    opened: boolean;
+    popupSettings: import('..').DropDownsPopupSettings;
+    valid: boolean;
+    validityStyles: boolean;
+    adaptiveTitle: string;
+    checkIndeterminateField: string;
+    checkField: string;
+    subItemsField: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { MultiSelectTree };