@coreui/vue-pro 5.12.0 → 5.13.0

package/dist/esm/components/autocomplete/CAutocomplete.d.ts

@@ -0,0 +1,594 @@
+import { PropType } from 'vue';
+import type { Option, OptionsGroup, Search } from './types';
+declare const CAutocomplete: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /**
+     * Only allow selection of predefined options.
+     * When `true`, users cannot enter custom values that are not in the options list.
+     * When `false`, users can enter and select custom values.
+     *
+     * @default false
+     */
+    allowOnlyDefinedOptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables selection cleaner element.
+     * When `true`, displays a clear button that allows users to reset the selection.
+     * The cleaner button is only shown when there is a selection and the component is not disabled or read-only.
+     *
+     * @default false
+     */
+    cleaner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to clear the internal search state after selecting an option.
+     *
+     * When set to `true`, the internal search value used for filtering options is cleared
+     * after a selection is made. This affects only the component's internal logic.
+     *
+     * Note: This does **not** clear the visible input field if the component is using external search
+     * or is controlled via the `search-value` prop. In such cases, clearing must be handled externally.
+     *
+     * @default true
+     */
+    clearSearchOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Specifies the container element for positioning the dropdown.
+     * - `HTMLElement`: Direct reference to a DOM element
+     * - `Function`: Function that returns a DOM element
+     * - `string`: CSS selector string to identify the container element
+     * Used in conjunction with the teleport prop to control dropdown positioning.
+     *
+     * @default 'body'
+     */
+    container: {
+        type: PropType<HTMLElement | (() => HTMLElement) | string>;
+        default: string;
+    };
+    /**
+     * Toggle the disabled state for the component.
+     * When `true`, the Vue.js autocomplete is non-interactive and appears visually disabled.
+     * Users cannot type, select options, or trigger the dropdown.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Provide valuable, actionable feedback to your users with HTML5 form validation feedback.
+     */
+    feedback: StringConstructor;
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied `invalid` prop.
+     */
+    feedbackInvalid: StringConstructor;
+    /**
+     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied `valid` prop.
+     */
+    feedbackValid: StringConstructor;
+    /**
+     * Highlight options that match the search criteria.
+     * When `true`, matching portions of option labels are visually highlighted
+     * based on the current search input value.
+     *
+     * @default false
+     */
+    highlightOptionsOnSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Set the id attribute for the native input element.
+     * This id is used for accessibility purposes and form associations.
+     * If not provided, a unique id may be generated automatically.
+     */
+    id: StringConstructor;
+    /**
+     * Show dropdown indicator/arrow button.
+     * When `true`, displays a dropdown arrow button that can be clicked
+     * to manually show or hide the options dropdown.
+     */
+    indicator: BooleanConstructor;
+    /**
+     * Set component validation state to invalid.
+     */
+    invalid: BooleanConstructor;
+    /**
+     * Add a caption for a component.
+     */
+    label: StringConstructor;
+    /**
+     * When set, the options list will have a loading style: loading spinner and reduced opacity.
+     * Use this to indicate that options are being fetched asynchronously.
+     * The dropdown remains functional but shows visual loading indicators.
+     */
+    loading: BooleanConstructor;
+    /**
+     * The name attribute for the input element.
+     * Used for form submission and identification in form data.
+     * Important for proper form handling and accessibility.
+     */
+    name: StringConstructor;
+    /**
+     * List of option elements.
+     * Can contain Option objects, OptionsGroup objects, or plain strings.
+     * Plain strings are converted to simple Option objects internally.
+     * This is a required prop - the Vue.js autocomplete needs options to function.
+     */
+    options: {
+        type: PropType<(Option | OptionsGroup | string)[]>;
+        required: true;
+    };
+    /**
+     * Sets maxHeight of options list.
+     * Controls the maximum height of the dropdown options container.
+     * Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem').
+     * When content exceeds this height, a scrollbar will appear.
+     *
+     * @default 'auto'
+     */
+    optionsMaxHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /**
+     * Specifies a short hint that is visible in the search input.
+     * Displayed when the input is empty to guide user interaction.
+     * Standard HTML input placeholder behavior.
+     */
+    placeholder: StringConstructor;
+    /**
+     * Toggle the readonly state for the component.
+     * When `true`, users can view and interact with the dropdown but cannot
+     * type in the search input or modify the selection through typing.
+     * Selection via clicking options may still be possible.
+     */
+    readOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When it is present, it indicates that the user must choose a value before submitting the form.
+     * Adds HTML5 form validation requirement. The form will not submit
+     * until a valid selection is made.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated.
+     * When `true`, any previously selected options will be reset whenever the options
+     * list undergoes a change. This ensures that outdated selections are not retained
+     * when new options are provided.
+     *
+     * @default false
+     */
+    resetSelectionOnOptionsChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables and configures search functionality.
+     * - `'external'`: Search is handled externally, filtering is not applied internally
+     * - `'global'`: Enables global keyboard search when dropdown is closed
+     * - Object with `external` and `global` boolean properties for fine-grained control
+     */
+    search: PropType<Search>;
+    /**
+     * Sets the label for no results when filtering.
+     * - `false`: Don't show any message when no results found
+     * - `true`: Show default "No results found" message
+     * - `string`: Show custom text message
+     *
+     * @default false
+     */
+    searchNoResultsLabel: {
+        type: PropType<boolean | string>;
+        default: boolean;
+    };
+    /**
+     * Show hint options based on the current input value.
+     * When `true`, displays a preview/hint of the first matching option
+     * as semi-transparent text in the input field, similar to browser autocomplete.
+     *
+     * @default false
+     */
+    showHints: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Size the component small or large.
+     * - `'sm'`: Small size variant
+     * - `'lg'`: Large size variant
+     * - `undefined`: Default/medium size
+     */
+    size: PropType<"sm" | "lg">;
+    /**
+     * Enable teleportation of the dropdown to a different container.
+     * When `true`, the dropdown is rendered in the container specified by the `container` prop
+     * instead of being rendered inline. This is useful for avoiding z-index issues and positioning
+     * problems when the autocomplete is inside elements with overflow constraints.
+     *
+     * @default false
+     */
+    teleport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add helper text to a form control.
+     */
+    text: StringConstructor;
+    /**
+     * Display validation feedback in a styled tooltip.
+     */
+    tooltipFeedback: BooleanConstructor;
+    /**
+     * Set component validation state to valid.
+     */
+    valid: BooleanConstructor;
+    /**
+     * The model value for v-model support.
+     * Can be a string (matched against option labels) or number (matched against option values).
+     * Used for two-way data binding with v-model.
+     */
+    modelValue: PropType<number | string>;
+    /**
+     * Sets the initially selected value for the Vue.js autocomplete component.
+     * Can be a string (matched against option labels) or number (matched against option values).
+     * The component will attempt to find and select the matching option on mount.
+     */
+    value: PropType<number | string>;
+    /**
+     * Enable virtual scroller for the options list.
+     * When `true`, only visible options are rendered in the DOM for better performance
+     * with large option lists. Works in conjunction with `visible-items` prop.
+     *
+     * @default false
+     */
+    virtualScroller: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Toggle the visibility of autocomplete dropdown.
+     * Controls whether the dropdown is initially visible.
+     * The dropdown visibility can still be toggled through user interaction.
+     *
+     * @default false
+     */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Amount of visible items when virtualScroller is enabled.
+     * Determines how many option items are rendered at once when virtual scrolling is active.
+     * Higher values show more items but use more memory. Lower values improve performance.
+     *
+     * @default 10
+     */
+    visibleItems: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "hide" | "show" | "update:modelValue")[], "input" | "change" | "hide" | "show" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Only allow selection of predefined options.
+     * When `true`, users cannot enter custom values that are not in the options list.
+     * When `false`, users can enter and select custom values.
+     *
+     * @default false
+     */
+    allowOnlyDefinedOptions: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables selection cleaner element.
+     * When `true`, displays a clear button that allows users to reset the selection.
+     * The cleaner button is only shown when there is a selection and the component is not disabled or read-only.
+     *
+     * @default false
+     */
+    cleaner: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Whether to clear the internal search state after selecting an option.
+     *
+     * When set to `true`, the internal search value used for filtering options is cleared
+     * after a selection is made. This affects only the component's internal logic.
+     *
+     * Note: This does **not** clear the visible input field if the component is using external search
+     * or is controlled via the `search-value` prop. In such cases, clearing must be handled externally.
+     *
+     * @default true
+     */
+    clearSearchOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Specifies the container element for positioning the dropdown.
+     * - `HTMLElement`: Direct reference to a DOM element
+     * - `Function`: Function that returns a DOM element
+     * - `string`: CSS selector string to identify the container element
+     * Used in conjunction with the teleport prop to control dropdown positioning.
+     *
+     * @default 'body'
+     */
+    container: {
+        type: PropType<HTMLElement | (() => HTMLElement) | string>;
+        default: string;
+    };
+    /**
+     * Toggle the disabled state for the component.
+     * When `true`, the Vue.js autocomplete is non-interactive and appears visually disabled.
+     * Users cannot type, select options, or trigger the dropdown.
+     */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Provide valuable, actionable feedback to your users with HTML5 form validation feedback.
+     */
+    feedback: StringConstructor;
+    /**
+     * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied `invalid` prop.
+     */
+    feedbackInvalid: StringConstructor;
+    /**
+     * Provide valuable, actionable valid feedback when using standard HTML form validation which applied `valid` prop.
+     */
+    feedbackValid: StringConstructor;
+    /**
+     * Highlight options that match the search criteria.
+     * When `true`, matching portions of option labels are visually highlighted
+     * based on the current search input value.
+     *
+     * @default false
+     */
+    highlightOptionsOnSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Set the id attribute for the native input element.
+     * This id is used for accessibility purposes and form associations.
+     * If not provided, a unique id may be generated automatically.
+     */
+    id: StringConstructor;
+    /**
+     * Show dropdown indicator/arrow button.
+     * When `true`, displays a dropdown arrow button that can be clicked
+     * to manually show or hide the options dropdown.
+     */
+    indicator: BooleanConstructor;
+    /**
+     * Set component validation state to invalid.
+     */
+    invalid: BooleanConstructor;
+    /**
+     * Add a caption for a component.
+     */
+    label: StringConstructor;
+    /**
+     * When set, the options list will have a loading style: loading spinner and reduced opacity.
+     * Use this to indicate that options are being fetched asynchronously.
+     * The dropdown remains functional but shows visual loading indicators.
+     */
+    loading: BooleanConstructor;
+    /**
+     * The name attribute for the input element.
+     * Used for form submission and identification in form data.
+     * Important for proper form handling and accessibility.
+     */
+    name: StringConstructor;
+    /**
+     * List of option elements.
+     * Can contain Option objects, OptionsGroup objects, or plain strings.
+     * Plain strings are converted to simple Option objects internally.
+     * This is a required prop - the Vue.js autocomplete needs options to function.
+     */
+    options: {
+        type: PropType<(Option | OptionsGroup | string)[]>;
+        required: true;
+    };
+    /**
+     * Sets maxHeight of options list.
+     * Controls the maximum height of the dropdown options container.
+     * Can be a number (pixels) or a CSS length string (e.g., '200px', '10rem').
+     * When content exceeds this height, a scrollbar will appear.
+     *
+     * @default 'auto'
+     */
+    optionsMaxHeight: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /**
+     * Specifies a short hint that is visible in the search input.
+     * Displayed when the input is empty to guide user interaction.
+     * Standard HTML input placeholder behavior.
+     */
+    placeholder: StringConstructor;
+    /**
+     * Toggle the readonly state for the component.
+     * When `true`, users can view and interact with the dropdown but cannot
+     * type in the search input or modify the selection through typing.
+     * Selection via clicking options may still be possible.
+     */
+    readOnly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * When it is present, it indicates that the user must choose a value before submitting the form.
+     * Adds HTML5 form validation requirement. The form will not submit
+     * until a valid selection is made.
+     */
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Determines whether the selected options should be cleared when the options list is updated.
+     * When `true`, any previously selected options will be reset whenever the options
+     * list undergoes a change. This ensures that outdated selections are not retained
+     * when new options are provided.
+     *
+     * @default false
+     */
+    resetSelectionOnOptionsChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Enables and configures search functionality.
+     * - `'external'`: Search is handled externally, filtering is not applied internally
+     * - `'global'`: Enables global keyboard search when dropdown is closed
+     * - Object with `external` and `global` boolean properties for fine-grained control
+     */
+    search: PropType<Search>;
+    /**
+     * Sets the label for no results when filtering.
+     * - `false`: Don't show any message when no results found
+     * - `true`: Show default "No results found" message
+     * - `string`: Show custom text message
+     *
+     * @default false
+     */
+    searchNoResultsLabel: {
+        type: PropType<boolean | string>;
+        default: boolean;
+    };
+    /**
+     * Show hint options based on the current input value.
+     * When `true`, displays a preview/hint of the first matching option
+     * as semi-transparent text in the input field, similar to browser autocomplete.
+     *
+     * @default false
+     */
+    showHints: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Size the component small or large.
+     * - `'sm'`: Small size variant
+     * - `'lg'`: Large size variant
+     * - `undefined`: Default/medium size
+     */
+    size: PropType<"sm" | "lg">;
+    /**
+     * Enable teleportation of the dropdown to a different container.
+     * When `true`, the dropdown is rendered in the container specified by the `container` prop
+     * instead of being rendered inline. This is useful for avoiding z-index issues and positioning
+     * problems when the autocomplete is inside elements with overflow constraints.
+     *
+     * @default false
+     */
+    teleport: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Add helper text to a form control.
+     */
+    text: StringConstructor;
+    /**
+     * Display validation feedback in a styled tooltip.
+     */
+    tooltipFeedback: BooleanConstructor;
+    /**
+     * Set component validation state to valid.
+     */
+    valid: BooleanConstructor;
+    /**
+     * The model value for v-model support.
+     * Can be a string (matched against option labels) or number (matched against option values).
+     * Used for two-way data binding with v-model.
+     */
+    modelValue: PropType<number | string>;
+    /**
+     * Sets the initially selected value for the Vue.js autocomplete component.
+     * Can be a string (matched against option labels) or number (matched against option values).
+     * The component will attempt to find and select the matching option on mount.
+     */
+    value: PropType<number | string>;
+    /**
+     * Enable virtual scroller for the options list.
+     * When `true`, only visible options are rendered in the DOM for better performance
+     * with large option lists. Works in conjunction with `visible-items` prop.
+     *
+     * @default false
+     */
+    virtualScroller: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Toggle the visibility of autocomplete dropdown.
+     * Controls whether the dropdown is initially visible.
+     * The dropdown visibility can still be toggled through user interaction.
+     *
+     * @default false
+     */
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * Amount of visible items when virtualScroller is enabled.
+     * Determines how many option items are rendered at once when virtual scrolling is active.
+     * Higher values show more items but use more memory. Lower values improve performance.
+     *
+     * @default 10
+     */
+    visibleItems: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onInput?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    invalid: boolean;
+    visible: boolean;
+    disabled: boolean;
+    container: string | HTMLElement | (() => HTMLElement);
+    teleport: boolean;
+    valid: boolean;
+    tooltipFeedback: boolean;
+    visibleItems: number;
+    highlightOptionsOnSearch: boolean;
+    loading: boolean;
+    virtualScroller: boolean;
+    required: boolean;
+    optionsMaxHeight: string | number;
+    searchNoResultsLabel: string | boolean;
+    indicator: boolean;
+    allowOnlyDefinedOptions: boolean;
+    cleaner: boolean;
+    clearSearchOnSelect: boolean;
+    readOnly: boolean;
+    resetSelectionOnOptionsChange: boolean;
+    showHints: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { CAutocomplete };