maz-ui/dist/components/MazSelect.vue.d.ts

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

import { MazUiTranslationsNestedSchema } from '@maz-ui/translations';
import { HTMLAttributes } from 'vue';
import { MazInputValue } from './MazInput.vue';
import { MazPopoverProps } from './MazPopover.vue';
import { MazColor, MazSize } from './types';
export interface MazSelectNormalizedOption {
    [key: string]: MazInputValue;
}
export interface MazSelectOptionWithOptGroup {
    label: string;
    options: (MazSelectNormalizedOption | string | number | boolean)[];
}
export type MazSelectOption = MazSelectNormalizedOption | string | number | boolean | MazSelectOptionWithOptGroup;
export interface MazSelectProps<Value extends MazInputValue, Option extends MazSelectOption, Multiple extends boolean> {
    /**
     * Style attribut of the component root element
     * @type {HTMLAttributes['style']}
     */
    style?: HTMLAttributes['style'];
    /**
     * Class attribut of the component root element
     * @type {HTMLAttributes['class']}
     */
    class?: HTMLAttributes['class'];
    /** The id of the select */
    id?: string;
    /**
     * The label of the select
     */
    label?: string;
    /**
     * The placeholder of the select
     */
    placeholder?: string;
    /**
     * The value of the select
     * @type {Value | Value[]}
     */
    modelValue?: Multiple extends true ? Value[] : Value;
    /**
     * The options of the select
     * @type {Option[]}
     */
    options: Option[];
    /**
     * 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 (auto by default - will switch between bottom-start and top-start)
     * @type {MazPopoverProps['position']}
     * @default 'auto'
     */
    listPosition?: MazPopoverProps['position'];
    /**
     * The prefer position of the list
     * @type {MazPopoverProps['preferPosition']}
     * @default 'bottom-start'
     */
    preferPosition?: MazPopoverProps['preferPosition'];
    /**
     * The fallback position of the list
     * @type {MazPopoverProps['fallbackPosition']}
     * @default 'top-start'
     */
    fallbackPosition?: MazPopoverProps['fallbackPosition'];
    /** The height of the option list item */
    itemHeight?: number;
    /**
     * The max height of the option list
     * @default 240
     */
    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?: MazSize;
    /**
     * The color of the select
     * @default 'primary'
     */
    color?: MazColor;
    /** Display search input in option list */
    search?: boolean;
    /**
     * Replace the default search function to provide a custom search function
     * @default undefined
     */
    searchFunction?: (query: string, options: Option[]) => Option[] | 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;
    /** Enable the multiple selection */
    multiple?: Multiple;
    /** 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 autocomplete attribute of the input
     * @default 'off'
     */
    autocomplete?: string;
    /**
     * The translations of the component
     * @type {Partial<MazUiTranslationsNestedSchema['select']>}
     * @default {
     *   searchPlaceholder: 'Search in options',
     * }
     */
    translations?: Partial<MazUiTranslationsNestedSchema['select']>;
    /**
     * The function to format the input value
     * @type {(value: Multiple extends true ? Value[] : Value) => string}
     * @default undefined
     */
    formatInputValue?: (value: Multiple extends true ? Value[] : Value) => string;
    /**
     * The transition name of the panel list options
     * @type {MazPopoverProps['transition']}
     * @default 'scale-fade'
     */
    transition?: MazPopoverProps['transition'];
}
declare const _default: <Option extends MazSelectOption, Value extends MazInputValue, Multiple extends boolean>(__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 onBlur?: ((value: Event) => any) | undefined;
        readonly onChange?: ((value: Event) => any) | undefined;
        readonly onClose?: (() => any) | undefined;
        readonly onFocus?: ((value?: Event | undefined) => any) | undefined;
        readonly onInput?: ((value: Event) => any) | undefined;
        readonly onOpen?: (() => any) | undefined;
        readonly "onUpdate:model-value"?: ((value: Multiple extends true ? Value[] : Value) => any) | undefined;
        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
        readonly "onSelected-option"?: ((value: Option) => any) | undefined;
    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onFocus" | "onBlur" | "onChange" | "onInput" | "onClose" | "onOpen" | "onUpdate:model-value" | "onUpdate:open" | "onSelected-option"> & ({
        open?: boolean;
    } & MazSelectProps<Value, Option, Multiple> & {
        multiple?: boolean;
    }) & Partial<{}>> & import('vue').PublicProps;
    expose(exposed: import('vue').ShallowUnwrapRef<{
        /**
         * Open the select
         * @description This is used to open the list options
         */
        open: () => void;
        /**
         * Close the select
         * @description This is used to close the list options
         */
        close: () => void;
    }>): void;
    attrs: any;
    slots: {
        'left-icon'?(_: {
            isOpen: boolean;
            close: () => void;
            open: () => void;
            toggle: () => void;
        }): any;
        'right-icon'?(_: {
            isOpen: boolean;
            close: () => void;
            open: () => void;
            toggle: () => void;
        }): any;
        'no-results'?(_: {}): any;
        optgroup?(_: {
            label: string | number | true;
        }): any;
        default?(_: {
            option: Option;
            isSelected: boolean;
            isOpen: boolean;
            close: () => void;
            open: () => void;
            toggle: () => void;
        }): any;
    };
    emit: (((evt: "blur", value: Event) => void) & ((evt: "change", value: Event) => void) & ((evt: "close") => void) & ((evt: "focus", value?: Event | undefined) => void) & ((evt: "input", value: Event) => void) & ((evt: "open") => void) & ((evt: "update:model-value", value: Multiple extends true ? Value[] : Value) => void) & ((evt: "selected-option", value: Option) => void)) & ((evt: "update:open", value: boolean) => void);
}>) => import('vue').VNode & {
    __ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_PrettifyLocal<T> = {
    [K in keyof T]: T[K];
} & {};