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

package/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,331 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DropDownStateBase, InternalState } from './../common/settings';
+import { FormComponentValidity } from '@progress/kendo-vue-common';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface AutoCompleteState extends DropDownStateBase {
+    focusedItem?: any;
+    value?: string;
+    currentValue?: string;
+}
+/**
+ * @hidden
+ */
+export interface AutoCompleteInternalState extends InternalState {
+    data: AutoCompleteState;
+}
+/**
+ * @hidden
+ */
+export interface AutoCompleteMethods {
+    [key: string]: any;
+    focus: (e: any) => void;
+    computedValue: () => any;
+    validity: () => FormComponentValidity;
+    handleItemSelect: (index: number, state: AutoCompleteInternalState) => void;
+    itemFocus: (index: number, state: AutoCompleteInternalState) => void;
+    togglePopup: (state: InternalState) => void;
+    onNavigate: (state: AutoCompleteInternalState, keyCode: number) => void;
+    applyInputValue: (value: string, state: AutoCompleteInternalState, eventKey?: number) => void;
+    setValidity: () => void;
+    handleItemClick: (index: number, event: any) => void;
+    onChangeHandler: (event: any) => void;
+    clearButtonClick: (event: any) => void;
+    onInputKeyDown: (event: any) => void;
+    handleBlur: (event: any) => void;
+    triggerOnChange: (newValue: string, state: AutoCompleteInternalState, eventArgs?: any) => void;
+    applyState: (state: AutoCompleteInternalState) => void;
+    suggestValue: (value: string) => void;
+    focusedIndex: (value?: string) => any;
+}
+/**
+ * @hidden
+ */
+export interface AutoCompleteState extends DropDownStateBase {
+    anchor: string;
+    typingTimeout: any;
+    base: any;
+    input: any;
+    element: any;
+    inputId: string;
+    virtualHasChanged: any;
+    prevOpened: any;
+    prevCurrentOpened: any;
+    prevData: any;
+    prevFocusedItem: any;
+    inputRef: any;
+    listRef: any;
+    filterInputRef: any;
+    scrollElementRef: any;
+    scrollerRef: any;
+    kendoAnchorRef: any;
+}
+/**
+ * @hidden
+ */
+declare const AutoComplete: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    defaultValue: {
+        type: PropType<string>;
+        default: any;
+    };
+    name: PropType<string>;
+    modelValue: {
+        type: PropType<string>;
+        default: any;
+    };
+    value: {
+        type: PropType<string>;
+        default: any;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    placeholder: PropType<string>;
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validationMessage: {
+        type: PropType<string>;
+        default: any;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: {
+        type: PropType<string>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: any;
+    };
+    readonly: PropType<boolean>;
+    accessKey: PropType<string>;
+    dataItems: PropType<any[]>;
+    textField: 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: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+    listNoDataRender: PropType<any>;
+    focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    suggest: {
+        type: PropType<string | boolean>;
+        default: boolean;
+    };
+    ariaLabel: {
+        type: PropType<string>;
+        default: any;
+    };
+    ariaLabelledBy: 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>;
+    };
+    inputAttributes: PropType<Object>;
+}>, {
+    inputRef: import('vue').Ref<any, any>;
+    kendoAnchorRef: import('vue').Ref<any, any>;
+}, {
+    hasMounted: boolean;
+    currentText: string;
+    currentValue: string;
+    currentFocused: boolean;
+    currentOpened: boolean;
+    focusedItem: any;
+    searchState: {
+        word: string;
+        last: string;
+    };
+    valueDuringOnChange: {};
+    suggested: string;
+    group: any;
+    isScrolling: boolean;
+    popupWidth: any;
+    itemHeight: number;
+}, {
+    spanClassNames(): {
+        'k-floating-label-container': boolean;
+        'k-focus': any;
+        'k-empty': boolean;
+        'k-invalid': boolean;
+        'k-rtl': boolean;
+    };
+}, {
+    focus(): void;
+    computedValue(): any;
+    primitiveValue(): any;
+    validity(): FormComponentValidity;
+    handleItemSelect(index: number, state: AutoCompleteInternalState): void;
+    itemFocus(index: number, state: AutoCompleteInternalState): void;
+    togglePopup(state: InternalState): void;
+    onNavigate(state: AutoCompleteInternalState, keyCode: number): void;
+    /**
+     * @hidden
+     */
+    applyInputValue(value: string, state: AutoCompleteInternalState, eventKey?: number): void;
+    setValidity(): void;
+    handleItemClick(index: number, event: any): void;
+    onChangeHandler(event: any): void;
+    clearButtonClick(event: any): void;
+    onInputKeyDown(event: any): void;
+    handleBlur(event: any): void;
+    triggerOnChange(newValue: string, state: AutoCompleteInternalState, eventArgs?: any): void;
+    triggerOnSelect(state: AutoCompleteInternalState, eventArgs?: any): void;
+    applyState(state: AutoCompleteInternalState): void;
+    suggestValue(value: string): void;
+    focusedIndex(value?: string): any;
+    repositionPopup(): void;
+    onScroll(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    id: PropType<string>;
+    defaultValue: {
+        type: PropType<string>;
+        default: any;
+    };
+    name: PropType<string>;
+    modelValue: {
+        type: PropType<string>;
+        default: any;
+    };
+    value: {
+        type: PropType<string>;
+        default: any;
+    };
+    label: {
+        type: PropType<string>;
+    };
+    placeholder: PropType<string>;
+    required: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    validationMessage: {
+        type: PropType<string>;
+        default: any;
+    };
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: {
+        type: PropType<string>;
+        default: any;
+    };
+    tabIndex: {
+        type: PropType<number>;
+        default: any;
+    };
+    readonly: PropType<boolean>;
+    accessKey: PropType<string>;
+    dataItems: PropType<any[]>;
+    textField: 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: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+    listNoDataRender: PropType<any>;
+    focusedItemIndex: PropType<(data: any, inputText: string, textField?: string) => number>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    suggest: {
+        type: PropType<string | boolean>;
+        default: boolean;
+    };
+    ariaLabel: {
+        type: PropType<string>;
+        default: any;
+    };
+    ariaLabelledBy: 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>;
+    };
+    inputAttributes: PropType<Object>;
+}>> & Readonly<{}>, {
+    required: boolean;
+    value: string;
+    ariaLabel: string;
+    tabIndex: number;
+    dir: string;
+    defaultValue: string;
+    opened: boolean;
+    popupSettings: import('./../common/settings').DropDownsPopupSettings;
+    modelValue: string;
+    valid: boolean;
+    validationMessage: string;
+    validityStyles: boolean;
+    suggest: string | boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { AutoComplete };

package/AutoComplete/AutoCompleteProps.d.ts

@@ -0,0 +1,243 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent } from './../common/events';
+import { DropDownsPopupSettings, Suggestion } from '../common/settings';
+import { FormComponentProps } from '@progress/kendo-vue-common';
+/**
+ * Represents the object of the `change` AutoComplete event.
+ */
+export interface AutoCompleteChangeEvent extends ChangeEvent {
+    /**
+     * The selected Suggestion object.
+     */
+    suggestion?: Suggestion;
+    /**
+     * Represents the selected item.
+     */
+    item?: any;
+}
+/**
+ * Represents the object of the `select` AutoComplete event.
+ */
+export interface AutoCompleteChangeEvent extends ChangeEvent {
+    /**
+     * Represents the selected item.
+     */
+    item?: any;
+}
+/**
+ * Represents the object of the `open` AutoComplete event.
+ */
+export interface AutoCompleteOpenEvent extends OpenEvent {
+}
+/**
+ * Represents the object of the `close` AutoComplete event.
+ */
+export interface AutoCompleteCloseEvent extends CloseEvent {
+}
+/**
+ * Represents the object of the `focus` AutoComplete event.
+ */
+export interface AutoCompleteFocusEvent extends FocusEvent {
+}
+/**
+ * Represents the object of the `blur` AutoComplete event.
+ */
+export interface AutoCompleteBlurEvent extends BlurEvent {
+}
+/**
+ * Represents the props of the [Kendo UI for Vue AutoComplete component]({% slug overview_autocomplete %}).
+ */
+export interface AutoCompleteProps extends FormComponentProps {
+    /**
+     * Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     */
+    dataItems?: any[];
+    /**
+     * Sets the opened and closed state of the AutoComplete.
+     */
+    opened?: boolean;
+    /**
+     * Sets the v-model value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     */
+    modelValue?: string;
+    /**
+     * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
+     */
+    value?: string;
+    /**
+     * Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
+     */
+    defaultValue?: string;
+    /**
+     * The hint that is displayed when the AutoComplete is empty.
+     */
+    placeholder?: string;
+    /**
+     * Sets the read-only state of the AutoComplete.
+     */
+    readonly?: boolean;
+    /**
+     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
+     */
+    suggest?: boolean | string;
+    /**
+     * Sets the disabled state of the AutoComplete.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the AutoComplete.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the AutoComplete.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
+     */
+    textField?: string;
+    /**
+     * Renders a floating label for the AutoComplete.
+     */
+    label?: string;
+    /**
+     * Configures the popup of the AutoComplete.
+     */
+    popupSettings?: DropDownsPopupSettings;
+    /**
+     * 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 AutoComplete will use it to get the focused item index.
+     *
+     * Default functionality returns the first item which starts with the input text.
+     *
+     * @example
+     * ```jsx-no-run
+     * const focusedItemIndex = (data, inputText, textField) => {
+     *     let text = inputText.toLowerCase();
+     *     return data.findIndex(item =>
+     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
+     * };
+     *
+     * <AutoComplete focusedItemIndex={focusedItemIndex} />
+     * ```
+     */
+    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
+    /**
+     * Fires each time the popup of the AutoComplete is about to open.
+     */
+    onOpen?: (event: AutoCompleteOpenEvent) => void;
+    /**
+     * Fires each time the popup of the AutoComplete is about to close.
+     */
+    onClose?: (event: AutoCompleteCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the AutoComplete.
+     */
+    onFocus?: (event: AutoCompleteFocusEvent) => void;
+    /**
+     * Fires each time the AutoComplete gets blurred.
+     */
+    onBlur?: (event: AutoCompleteBlurEvent) => void;
+    /**
+     * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
+     */
+    onChange?: (event: AutoCompleteChangeEvent) => void;
+    /**
+     * Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#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_autocomplete %}#toc-no-data)). Used to override the default appearance of the element.
+     */
+    listNoDataRender?: any;
+    /**
+     * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     */
+    header?: any;
+    /**
+     * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
+     */
+    footer?: any;
+    /**
+     * Configures the `size` of the AutoComnplete.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the AutoComnplete.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the AutoComnplete.
+     *
+     * 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 AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: any;
+    /**
+     * Fires when a AutoComplete 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;
+    /**
+     * 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;
+}