maz-ui/components/MazSelect.d.ts

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import type { Color, ModelValueSimple, Position, Size } from './types';
import { type HTMLAttributes } from 'vue';
export type NormalizedOption = Record<string, ModelValueSimple>;
export interface MazSelectOptionWithOptGroup {
    label: string;
    options: (NormalizedOption | string | number | boolean)[];
}
export type MazSelectOption = NormalizedOption | string | number | boolean | MazSelectOptionWithOptGroup;
export interface MazSelectProps<T extends ModelValueSimple, U extends MazSelectOption> {
    /** Style attribut of the component root element */
    style?: HTMLAttributes['style'];
    /** Class attribut of the component root element */
    class?: HTMLAttributes['class'];
    /** The id of the select */
    id?: string;
    /** The value of the select */
    modelValue?: T | T[];
    /** The options of the select */
    options?: U[];
    /**
     * The key of the option value
     * @default 'value'
     */
    optionValueKey?: string;
    /**
     * The key of the option label
     * @default 'label'
     */
    optionLabelKey?: string;
    /**
     * The key of the option input value
     * @default 'label'
     */
    optionInputValueKey?: string;
    /**
     * The position of the list
     * @default 'bottom left'
     */
    listPosition?: Position;
    /** The height of the option list item */
    itemHeight?: number;
    /** The max height of the option list */
    maxListHeight?: number;
    /** The max width of the option list */
    maxListWidth?: number;
    /** The min height of the option list */
    minListHeight?: number;
    /** The min width of the option list */
    minListWidth?: number;
    /**
     * The size of the select
     * @default 'md'
     */
    size?: Size;
    /**
     * The color of the select
     * @default 'primary'
     */
    color?: Color;
    /** Display search input in option list */
    search?: boolean;
    /**
     * The placeholder of the search input
     * @default 'Search in options'
     */
    searchPlaceholder?: string;
    /**
     * Replace the default search function to provide a custom search function
     * @default undefined
     */
    searchFunction?: (query: string, options: U[]) => U[] | undefined;
    /**
     * The threshold for the search input where 1 is a perfect match and 0 is a match with any character
     * @default 0.75
     */
    searchThreshold?: number;
    /** if true, the option list is opened by default */
    open?: boolean;
    /** Enable the multiple selection */
    multiple?: boolean;
    /** Make the input required in the form */
    required?: boolean;
    /** Disable the component */
    disabled?: boolean;
    /** The input will be displayed in full width */
    block?: boolean;
    /** The exclude selectors for the v-closable directive - will exclude the elements from the directive */
    excludeSelectors?: string[];
    /**
     * The autocomplete attribute of the input
     * @default 'off'
     */
    autocomplete?: string;
}
export type { Color, ModelValueSimple, Position, Size } from './types';
declare const _default: <T extends ModelValueSimple, U extends MazSelectOption>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
        readonly onInput?: ((value: Event) => any) | undefined;
        readonly onBlur?: ((value: Event) => any) | undefined;
        readonly onChange?: ((value: Event) => any) | undefined;
        readonly onClose?: ((value?: Event | undefined) => any) | undefined;
        readonly onFocus?: ((value: Event) => any) | undefined;
        readonly onOpen?: ((value: boolean) => any) | undefined;
        readonly "onUpdate:model-value"?: ((value: T | T[]) => any) | undefined;
        readonly "onSelected-option"?: ((value: U) => any) | undefined;
    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClose" | "onOpen" | "onUpdate:model-value" | "onSelected-option"> & Partial<{}> & MazSelectProps<T, U>> & import("vue").PublicProps;
    expose(exposed: import("vue").ShallowUnwrapRef<{
        openList: (event: Event) => Promise<void>;
        closeList: (event?: Event) => Promise<void>;
    }>): void;
    attrs: any;
    slots: {
        "no-results"?(_: {}): any;
        optgroup?(_: {
            label: string | number | true;
        }): any;
        default?(_: {
            option: NormalizedOption;
            isSelected: boolean;
        }): any;
    };
    emit: ((evt: "input", value: Event) => void) & ((evt: "blur", value: Event) => void) & ((evt: "change", value: Event) => void) & ((evt: "close", value?: Event | undefined) => void) & ((evt: "focus", value: Event) => void) & ((evt: "open", value: boolean) => void) & ((evt: "update:model-value", value: T | T[]) => void) & ((evt: "selected-option", value: U) => void);
}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
    [key: string]: any;
}> & {
    __ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
    [K in keyof T]: T[K];
} & {};