@aotearoan/neon/dist/src/components/user-input/search/NeonSearch.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonSize } from '@/common/enums/NeonSize';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
import type { NeonSearchOption } from '@/common/models/NeonSearchOption';
import { NeonDropdownPlacement } from '@/common/enums/NeonDropdownPlacement';
/**
 * <p>
 *   The <strong>NeonSearch</strong> component is equivalent to an HTML &lt;input type="search"&gt; element. It is
 *   useful as an alternative to <em>NeonSelect</em> to provide filtered results when the universe of results is very
 *   large and/or the results need to be requested from a server side API.
 * </p>
 * <p><strong>NeonSearch</strong> provides input chips in the case the search allows multiple selection.</p>
 */
declare const _default: import("vue").DefineComponent<{
    /**
     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
     */
    modelValue: {
        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
        required: true;
    };
    /**
     * Placeholder to display in search input when there is no search string entered.
     */
    placeholder: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The list of search results.
     */
    options: {
        type: () => Array<NeonSearchOption>;
        required: true;
    };
    /**
     * Allow multi-select.
     */
    multiple: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable the search
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of the dropdown - Small, Medium or Large.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The color of the search.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Placement of the dropdown contents.
     */
    placement: {
        type: () => NeonDropdownPlacement;
        default: NeonDropdownPlacement;
    };
}, {
    dropdown: import("vue").Ref<HTMLElement | null>;
    open: import("vue").Ref<boolean>;
    highlightedKey: import("vue").Ref<string | null>;
    filter: import("vue").Ref<string>;
    sanitizedAttributes: import("vue").ComputedRef<{
        [x: string]: unknown;
    }>;
    computedOptions: import("vue").ComputedRef<NeonSearchOption[]>;
    dropdownPlacement: import("vue").Ref<NeonDropdownPlacement | undefined>;
    onPlacement: (placement: NeonDropdownPlacement) => void;
    onFilterChange: (_filter: string) => void;
    clickOption: (option: NeonSearchOption) => void;
    changeHighlighted: (key: string) => void;
    showOptions: () => boolean;
    removeSelected: (removed: NeonSearchOption) => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "filter-changed")[], "update:modelValue" | "filter-changed", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Either a string indicating the key of the selected option ('' if there is no selection) or an array of selected
     * NeonSearchOption in the case when multiple = true (necessary to display them as chips).
     */
    modelValue: {
        type: (StringConstructor | (() => Array<NeonSearchOption>))[];
        required: true;
    };
    /**
     * Placeholder to display in search input when there is no search string entered.
     */
    placeholder: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The list of search results.
     */
    options: {
        type: () => Array<NeonSearchOption>;
        required: true;
    };
    /**
     * Allow multi-select.
     */
    multiple: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Disable the search
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The size of the dropdown - Small, Medium or Large.
     */
    size: {
        type: () => NeonSize;
        default: NeonSize;
    };
    /**
     * The color of the search.
     */
    color: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Placement of the dropdown contents.
     */
    placement: {
        type: () => NeonDropdownPlacement;
        default: NeonDropdownPlacement;
    };
}>> & {
    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
    "onFilter-changed"?: ((...args: any[]) => any) | undefined;
}, {
    disabled: boolean;
    placement: NeonDropdownPlacement;
    size: NeonSize;
    color: NeonFunctionalColor;
    multiple: boolean;
}, {}>;
export default _default;