import { PropType } from 'vue'; import type { Option, OptionsGroup, Search } from './types'; declare const CAutocomplete: import("vue").DefineComponent 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; 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; /** * 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; 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; /** * 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; /** * 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").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "change" | "hide" | "show" | "update:modelValue")[], "input" | "change" | "hide" | "show" | "update:modelValue", import("vue").PublicProps, Readonly 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; 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; /** * 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; 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; /** * 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; /** * 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 };