Fixed #1836 - For AutoComplete

src/components/accordiontab/AccordionTab.d.ts

@@ -35,7 +35,7 @@ declare module '@vue/runtime-core' {
 
 /**
  *
- * AccordionTab is a helper component for Accordion
+ * AccordionTab is a helper component for Accordion.
  *
  * Demos:
  *

src/components/autocomplete/AutoComplete.d.ts

@@ -1,81 +1,298 @@
-import VirtualScrollerProps from '../virtualscroller';
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { VirtualScrollerProps, VirtualScrollerItemOptions } from '../virtualscroller';
 
-interface AutoCompleteProps {
+type AutoCompleteFieldType = string | ((data: any) => string) | undefined;
+
+type AutoCompleteDropdownMode = 'blank' | 'current';
+
+type AutoCompleteAppendTo = 'body' | 'self';
+
+export interface AutoCompleteItemSelectEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Selected item
+     */
+    value: any;
+}
+
+/**
+ * @extends AutoCompleteItemSelectEvent
+ */
+export interface AutoCompleteItemUnselectEvent extends AutoCompleteItemSelectEvent { }
+
+export interface AutoCompleteDropdownClickEvent {
+    /**
+     * Browser mouse event
+     */
+    originalEvent: MouseEvent;
+    /**
+     * Current value of the input field
+     */
+    query: string;
+}
+
+export interface AutoCompleteCompleteEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Value to search with
+     */
+    query: string;
+}
+
+export interface AutoCompleteProps {
+    /**
+     * Value of the component.
+     */
     modelValue?: any;
+    /**
+     * An array of suggestions to display.
+     */
     suggestions?: any[];
-    field?: string|Function;
+    /**
-    optionGroupLabel?: string;
+     * Property name or getter function of a suggested object to resolve and display.
-    optionGroupChildren?: string;
+     * @type {AutoCompleteFieldType}
-    scrollHeight?: string;
+     */
-    dropdown?: boolean;
+    field?: AutoCompleteFieldType;
-    dropdownMode?: string;
+    /**
-    autoHighlight?: boolean;
+     * Property name or getter function to use as the label of an option group.
-    multiple?: boolean;
+     */
-    minLength?: number;
+    optionGroupLabel?: string | undefined;
-    delay?: number;
+    /**
-    appendTo?: string;
+     * Property name or getter function that refers to the children options of option group.
-    completeOnFocus?: boolean;
+     */
-    inputStyle?: any;
+    optionGroupChildren?: string | undefined;
-    inputClass?: string;
+    /**
+     * Maximum height of the suggestions panel.
+     * Default value is '200px'.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Displays a button next to the input field when enabled.
+     */
+    dropdown?: boolean | undefined;
+    /**
+     * Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
+     * @see AutoCompleteDropdownMode
+     * Default value is 'blank'.
+     */
+    dropdownMode?: AutoCompleteDropdownMode;
+    /**
+     * Highlights automatically the first item of the dropdown to be selected.
+     */
+    autoHighlight?: boolean | undefined;
+    /**
+     * Specifies if multiple values can be selected.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Minimum number of characters to initiate a search.
+     * Default value is 1.
+     */
+    minLength?: number | undefined;
+    /**
+     * Delay between keystrokes to wait before sending a query.
+     * Default value is 300.
+     */
+    delay?: number | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * Special keywords are "body" for document body and "self" for the element itself.
+     * Default value is body.
+     */
+    appendTo?: AutoCompleteAppendTo;
+    /**
+     * When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.
+     */
     forceSelection?: boolean;
+    /**
+     * Whether to run a query when input receives focus.
+     */
+    completeOnFocus?: boolean | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string;
+    /**
+     * Inline style of the component.
+     */
     class?: any;
+    /**
+     * Style class of the component input field.
+     */
     style?: any;
+    /**
+     * Style class of the overlay panel.
+     */
     panelClass?: string;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @see VirtualScroller.VirtualScrollerProps
+     */
     virtualScrollerOptions?: VirtualScrollerProps;
 }
 
-interface AutoCompleteItemSlotInterface {
+export interface AutoCompleteSlots {
+    /**
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
+     */
+    item: (scope: {
+        /**
+         * Option instance
+         */
         item: any;
+        /**
+         * Index of the option
+         */
         index: number;
-}
+    }) => VNode[];
-
+    /**
-interface AutoCompleteOptionGroupInterface {
+     * Custom option group template.
+     * @param {Object} scope - option group slot's params.
+     */
+    optiongroup: (scope: {
+        /**
+         * Option instance
+         */
         item: any;
+        /**
+         * Index of the option
+         */
         index: number;
-}
+    }) => VNode[];
-
+    /**
-interface AutoCompleteHeaderInterface {
+     * Custom header template of panel.
+     * @param {Object} scope - header slot's params.
+     */
+    header: (scope: {
+        /**
+         * Value of the component
+         */
         value: any;
-    suggestions: any;
+        /**
-}
+         * Displayed options
-
+         */
-interface AutoCompleteFooterInterface {
+        suggestions: any[];
+    }) => VNode[];
+    /**
+     * Custom footer template of panel.
+     * @param {Object} scope - footer slot's params.
+     */
+    footer: (scope: {
+        /**
+         * Value of the component
+         */
         value: any;
-    suggestions: any;
+        /**
-}
+         * Displayed options
-
+         */
-interface AutoCompleteChipInterface {
+        suggestions: any[];
+    }) => VNode[];
+    /**
+     * Custom chip template.
+     * @param {Object} scope - chip slot's params.
+     */
+    chip: (scope: {
+        /**
+         * A value in the selection
+         */
         value: any;
-}
+    }) => VNode[];
-
+    /**
-interface AutoCompleteContentInterface {
+     * Custom panel template.
+     * @param {Object} scope - content slot's params.
+     */
+    content: (scope: {
+        /**
+         * An array of objects to display for virtualscroller
+         */
         items: any;
+        /**
+         * Style class of the component
+         */
         styleClass: string;
-    contentRef: string;
+        /**
-    getItemOptions: any;
+         * Referance of the content
-}
+         * @param {HTMLElement} el - Element of 'ref' property
-
+         */
-interface AutoCompleteLoaderInterface {
+        contentRef(el: any): void;
+        /**
+         * Options of the items
+         * @param {number} index - Rendered index
+         * @return {@link VirtualScroller.VirtualScrollerItemOptions}
+         */
+        getItemOptions(index: number): VirtualScrollerItemOptions;
+    }) => VNode[];
+    /**
+     * Custom loader template.
+     * @param {Object} scope - loader slot's params.
+     */
+    loader: (scope: {
+        /**
+         * Options of the loader items for virtualscroller
+         */
         options: any[];
+    }) => VNode[];
 }
 
-declare class AutoComplete {
+export declare type AutoCompleteEmits = {
-    $props: AutoCompleteProps;
+    /**
-    $emit(eventName: 'update:modelValue', value: any): this;
+     * Emitted when the value changes.
-    $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
+     * @param {*} value - New value.
-    $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;
+     */
-    $emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this;
+    'update:modelValue': (value: any) => void;
-    $emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this;
+    /**
-    $emit(eventName: 'clear'): this;
+     * Callback to invoke when a suggestion is selected.
-    $slots: {
+     * @param {AutoCompleteItemSelectEvent} event - Custom item select event.
-        item: AutoCompleteItemSlotInterface;
+     */
-        optiongroup: AutoCompleteOptionGroupInterface;
+    'item-select': (event: AutoCompleteItemSelectEvent) => void;
-        header: AutoCompleteHeaderInterface;
+    /**
-        footer: AutoCompleteFooterInterface;
+     * Callback to invoke when a selected value is removed.
-        chip: AutoCompleteChipInterface;
+     * @param {AutoCompleteItemUnselectEvent} event - Custom item unselect event.
-        content: AutoCompleteContentInterface;
+     */
-        loader: AutoCompleteLoaderInterface;
+    'item-unselect': (event: AutoCompleteItemUnselectEvent) => void;
-    };
+    /**
+     * Callback to invoke to when dropdown button is clicked.
+     * @param {AutoCompleteDropdownClickEvent} event - Custom dropdown click event.
+     */
+    'dropdown-click': (event: AutoCompleteDropdownClickEvent) => void;
+    /**
+     * Callback to invoke to search for suggestions.
+     * @param {AutoCompleteCompleteEvent} event - Custom complete event.
+     */
+    'complete': (event: AutoCompleteCompleteEvent) => void;
+    /**
+     * Callback to invoke when input is cleared by the user.
+     */
+    'clear': () => void;
 }
 
+declare class AutoComplete extends ClassComponent<AutoCompleteProps, AutoCompleteSlots, AutoCompleteEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        AutoComplete: GlobalComponentConstructor<AutoComplete>
+    }
+}
+
+/**
+ *
+ * AutoComplete is an input component that provides real-time suggestions when being typed.
+ *
+ * Demos:
+ *
+ * - [AutoComplete](https://www.primefaces.org/primevue/showcase/#/autocomplete)
+ *
+ */
 export default AutoComplete;