@volverjs/ui-vue/dist/components/VvCombobox/index.d.ts

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import type { MaybeElement } from '@vueuse/core';
import type { PropType } from 'vue';
import type { Option } from '../../types/generic';
export type VvComboboxEvents = {
    'update:modelValue': [any];
    'update:search': [string];
    'update:options': [(Option | string)[]];
    'focus': [MaybeElement];
    'blur': [MaybeElement];
    'clear': [];
    /**
     * @deprecated use update:search instead
     */
    'change:search': [string];
};
export declare const VvComboboxProps: {
    /**
     * Dropdown show / hide transition name
     */
    transitionName: {
        type: StringConstructor;
        default: string;
    };
    /**
     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
     */
    modelValue: {
        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * Label for no search results
     */
    noResultsLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for no options	available
     */
    noOptionsLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for selected option not found
     */
    selectedOptionNotFoundLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for selected option hint
     */
    selectedHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for deselect action button
     */
    deselectActionLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for select option hint
     */
    selectHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for deselected option hint
     */
    deselectHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for add new option hint
     */
    addOptionHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label close button
     */
    closeLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Select input placeholder
     */
    placeholder: StringConstructor;
    /**
     * The options to add new options
     */
    addable: BooleanConstructor;
    /**
     * Use input text to search on options
     */
    searchable: BooleanConstructor;
    /**
     * If true, the search input will retain its value even when the dropdown is closed
     */
    keepSearch: BooleanConstructor;
    /**
     * Search function to filter options
     */
    searchFunction: {
        type: PropType<(search: string, options: (Option | string)[]) => (Option | string)[] | Promise<(Option | string)[]>>;
        default: undefined;
    };
    /**
     * On searchable select is the input search placeholder
     */
    searchPlaceholder: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The input search debounce time in ms
     */
    debounceSearch: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     * Manage modelValue as string[] or object[]
     */
    multiple: BooleanConstructor;
    /**
     * The min number of selected values
     */
    minValues: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     * The max number of selected values
     */
    maxValues: (StringConstructor | NumberConstructor)[];
    /**
     * If true the input will be unselectable
     * @deprecated use minValues instead
     */
    unselectable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The select label separator visible to the user
     */
    separator: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Show native select
     */
    native: BooleanConstructor;
    /**
     * Show badges
     */
    badges: BooleanConstructor;
    /**
     * Badge modifiers
     */
    badgeModifiers: {
        type: PropType<string | string[]>;
        default: string;
    };
    /**
     * Set dropdown width to the same as the trigger
     */
    triggerWidth: {
        default: boolean;
        type: BooleanConstructor;
    };
    /**
     * Dropdown modifiers
     */
    dropdownModifiers: {
        type: PropType<string | string[]>;
        default: string;
    };
    /**
     * Open dropdown on focus
     */
    autoOpen: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Select first option automatically
     */
    autoselectFirst: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Keep open dropdown on single select
     */
    keepOpen: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Focus on hover option (this prop remove the focus from the input search)
     */
    focusOnHover: {
        type: BooleanConstructor;
        default: boolean;
    };
    showClearAction: {
        type: BooleanConstructor;
        default: boolean;
    };
    iconClear: {
        type: PropType<string | import("../VvIcon").VvIconProps>;
        default: "close";
    };
    labelClear: {
        type: StringConstructor;
        default: string;
    };
    required: {
        type: BooleanConstructor;
        default: boolean;
    };
    label: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    placement: {
        type: PropType<`${import("../../constants").Side}` | `${import("../../constants").Placement}`>;
        default: import("../../constants").Side;
        validator: (value: import("../../constants").Side & import("../../constants").Placement) => boolean;
    };
    strategy: {
        type: PropType<`${import("../../constants").Strategy}`>;
        default: undefined;
        validator: (value: import("../../constants").Strategy) => boolean;
    };
    offset: {
        type: PropType<import("../..").OffsetOptions | number | string>;
        default: number;
    };
    shift: {
        type: PropType<import("../..").ShiftOptions | boolean>;
        default: boolean;
    };
    flip: {
        type: PropType<import("../..").FlipOptions | boolean>;
        default: boolean;
    };
    size: {
        type: PropType<import("../..").SizeOptions | boolean>;
        default: () => {
            padding: number;
        };
    };
    autoPlacement: {
        type: PropType<import("../..").AutoPlacementOptions | boolean>;
        default: boolean;
    };
    arrow: {
        type: BooleanConstructor;
        default: boolean;
    };
    autofocusFirst: {
        type: BooleanConstructor;
        default: boolean;
    };
    floating: {
        type: BooleanConstructor;
        default: boolean;
    };
    icon: {
        type: PropType<string | import("../VvIcon").VvIconProps>;
        default: undefined;
    };
    iconPosition: {
        type: PropType<`${import("../../constants").Position}`>;
        default: import("../../constants").Position;
        validation: (value: import("../../constants").Position) => boolean;
    };
    options: {
        type: PropType<(Option | string)[]>;
        default: () => never[];
    };
    labelKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    valueKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    disabledKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    modifiers: {
        type: PropType<string | string[]>;
        default: undefined;
    };
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    loadingLabel: {
        type: StringConstructor;
        default: string;
    };
    hintLabel: {
        type: StringConstructor;
        default: string;
    };
    invalid: {
        type: BooleanConstructor;
        default: boolean;
    };
    invalidLabel: {
        type: (ArrayConstructor | StringConstructor)[];
        default: undefined;
    };
    valid: {
        type: BooleanConstructor;
        default: boolean;
    };
    validLabel: {
        type: (ArrayConstructor | StringConstructor)[];
        default: undefined;
    };
    tabindex: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    name: {
        type: StringConstructor;
        required: boolean;
    };
    id: (StringConstructor | NumberConstructor)[];
};
export declare function useVvComboboxProps<T extends Option | string>(): {
    options: {
        type: PropType<T[]>;
        default: () => never[];
    };
    searchFunction: {
        type: PropType<(search: string, options: T[]) => T[] | Promise<T[]>>;
        default: undefined;
    };
    /**
     * Dropdown show / hide transition name
     */
    transitionName: {
        type: StringConstructor;
        default: string;
    };
    /**
     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
     */
    modelValue: {
        type: (ObjectConstructor | ArrayConstructor | BooleanConstructor | StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    /**
     * Label for no search results
     */
    noResultsLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for no options	available
     */
    noOptionsLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for selected option not found
     */
    selectedOptionNotFoundLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for selected option hint
     */
    selectedHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for deselect action button
     */
    deselectActionLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for select option hint
     */
    selectHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for deselected option hint
     */
    deselectHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label for add new option hint
     */
    addOptionHintLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Label close button
     */
    closeLabel: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Select input placeholder
     */
    placeholder: StringConstructor;
    /**
     * The options to add new options
     */
    addable: BooleanConstructor;
    /**
     * Use input text to search on options
     */
    searchable: BooleanConstructor;
    /**
     * If true, the search input will retain its value even when the dropdown is closed
     */
    keepSearch: BooleanConstructor;
    /**
     * On searchable select is the input search placeholder
     */
    searchPlaceholder: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The input search debounce time in ms
     */
    debounceSearch: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     * Manage modelValue as string[] or object[]
     */
    multiple: BooleanConstructor;
    /**
     * The min number of selected values
     */
    minValues: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    /**
     * The max number of selected values
     */
    maxValues: (StringConstructor | NumberConstructor)[];
    /**
     * If true the input will be unselectable
     * @deprecated use minValues instead
     */
    unselectable: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The select label separator visible to the user
     */
    separator: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Show native select
     */
    native: BooleanConstructor;
    /**
     * Show badges
     */
    badges: BooleanConstructor;
    /**
     * Badge modifiers
     */
    badgeModifiers: {
        type: PropType<string | string[]>;
        default: string;
    };
    /**
     * Set dropdown width to the same as the trigger
     */
    triggerWidth: {
        default: boolean;
        type: BooleanConstructor;
    };
    /**
     * Dropdown modifiers
     */
    dropdownModifiers: {
        type: PropType<string | string[]>;
        default: string;
    };
    /**
     * Open dropdown on focus
     */
    autoOpen: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Select first option automatically
     */
    autoselectFirst: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Keep open dropdown on single select
     */
    keepOpen: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Focus on hover option (this prop remove the focus from the input search)
     */
    focusOnHover: {
        type: BooleanConstructor;
        default: boolean;
    };
    showClearAction: {
        type: BooleanConstructor;
        default: boolean;
    };
    iconClear: {
        type: PropType<string | import("../VvIcon").VvIconProps>;
        default: "close";
    };
    labelClear: {
        type: StringConstructor;
        default: string;
    };
    required: {
        type: BooleanConstructor;
        default: boolean;
    };
    label: {
        type: (StringConstructor | NumberConstructor)[];
        default: undefined;
    };
    placement: {
        type: PropType<`${import("../../constants").Side}` | `${import("../../constants").Placement}`>;
        default: import("../../constants").Side;
        validator: (value: import("../../constants").Side & import("../../constants").Placement) => boolean;
    };
    strategy: {
        type: PropType<`${import("../../constants").Strategy}`>;
        default: undefined;
        validator: (value: import("../../constants").Strategy) => boolean;
    };
    offset: {
        type: PropType<import("../..").OffsetOptions | number | string>;
        default: number;
    };
    shift: {
        type: PropType<import("../..").ShiftOptions | boolean>;
        default: boolean;
    };
    flip: {
        type: PropType<import("../..").FlipOptions | boolean>;
        default: boolean;
    };
    size: {
        type: PropType<import("../..").SizeOptions | boolean>;
        default: () => {
            padding: number;
        };
    };
    autoPlacement: {
        type: PropType<import("../..").AutoPlacementOptions | boolean>;
        default: boolean;
    };
    arrow: {
        type: BooleanConstructor;
        default: boolean;
    };
    autofocusFirst: {
        type: BooleanConstructor;
        default: boolean;
    };
    floating: {
        type: BooleanConstructor;
        default: boolean;
    };
    icon: {
        type: PropType<string | import("../VvIcon").VvIconProps>;
        default: undefined;
    };
    iconPosition: {
        type: PropType<`${import("../../constants").Position}`>;
        default: import("../../constants").Position;
        validation: (value: import("../../constants").Position) => boolean;
    };
    labelKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    valueKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    disabledKey: {
        type: (StringConstructor | FunctionConstructor)[];
        default: string;
    };
    modifiers: {
        type: PropType<string | string[]>;
        default: undefined;
    };
    readonly: {
        type: BooleanConstructor;
        default: boolean;
    };
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    loading: {
        type: BooleanConstructor;
        default: boolean;
    };
    loadingLabel: {
        type: StringConstructor;
        default: string;
    };
    hintLabel: {
        type: StringConstructor;
        default: string;
    };
    invalid: {
        type: BooleanConstructor;
        default: boolean;
    };
    invalidLabel: {
        type: (ArrayConstructor | StringConstructor)[];
        default: undefined;
    };
    valid: {
        type: BooleanConstructor;
        default: boolean;
    };
    validLabel: {
        type: (ArrayConstructor | StringConstructor)[];
        default: undefined;
    };
    tabindex: {
        type: (StringConstructor | NumberConstructor)[];
        default: number;
    };
    name: {
        type: StringConstructor;
        required: boolean;
    };
    id: (StringConstructor | NumberConstructor)[];
};