maz-ui/dist/types/components/MazDropdown.vue.d.ts

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

import { IconComponent } from '@maz-ui/icons';
import { HTMLAttributes } from 'vue';
import { RouteLocationRaw } from 'vue-router';
import { MazLinkProps } from './MazLink.vue';
import { MazPopoverProps } from './MazPopover.vue';
import { MazColor, MazSize } from './types';
type __VLS_Props = MazDropdownProps;
type MazDropdownItemBase = Record<string, unknown> & {
    label: string;
    class?: unknown;
    color?: MazColor;
};
type MazDropdownLinkItem = MazDropdownItemBase & MazLinkProps & {
    target?: string;
    href?: string;
    to?: RouteLocationRaw;
};
type MazDropdownActionItem = MazDropdownItemBase & {
    onClick?: () => unknown;
};
export type MazDropdownMenuItem = (MazDropdownLinkItem & {
    action?: never;
}) | (MazDropdownActionItem & {
    href?: never;
    to?: never;
    target?: never;
});
export interface MazDropdownProps extends Omit<MazPopoverProps, 'modelValue' | 'role'> {
    /**
     * Controls whether the dropdown menu is open
     * @model
     * @type {boolean}
     * @default false
     */
    modelValue?: boolean;
    /**
     * Inline styles to apply to the component root element
     * @type {HTMLAttributes['style']}
     */
    style?: HTMLAttributes['style'];
    /**
     * CSS classes to apply to the component root element
     * @type {HTMLAttributes['class']}
     */
    class?: HTMLAttributes['class'];
    /**
     * Menu items to display in the dropdown
     * Each item can be either a link (with href/to properties) or an action (with onClick function)
     * @type {MazDropdownMenuItem[]}
     * @default []
     * @example
     * [
     *   { label: 'Profile', href: '/profile' },
     *   { label: 'Settings', onClick: () => console.log('Settings clicked') }
     * ]
     */
    items?: MazDropdownMenuItem[];
    /**
     * Unique identifier for the dropdown component
     * @type {string}
     */
    id?: string;
    /**
     * Determines how the dropdown should be triggered
     * @type {MazPopoverProps['trigger']}
     * @values click, hover, manual, adaptive
     * @default 'adaptive'
     */
    trigger?: MazPopoverProps['trigger'];
    /**
     * Color theme for the dropdown button
     * @type {MazColor}
     * @values primary, secondary, info, success, warning, destructive, transparent, contrast, accent
     * @default 'transparent'
     */
    color?: MazColor;
    /**
     * Position of the menu relative to trigger
     * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end
     * @default 'auto'
     */
    position?: MazPopoverProps['position'];
    /**
     * Controls whether the dropdown menu closes when a menu item is clicked
     * @type {boolean}
     * @default true
     */
    closeOnClick?: boolean;
    /**
     * Disables the dropdown functionality
     * @type {boolean}
     * @default false
     */
    disabled?: boolean;
    /**
     * Controls whether to show the chevron icon in the trigger button
     * @type {boolean}
     * @default true
     */
    chevron?: boolean;
    /**
     * Accessible description for screen readers describing the dropdown functionality
     * If not provided, the default translation of MazUiTranslations plugin will be used
     * @type {string}
     * @default MazUiTranslationsSchema['dropdown']['screenReaderDescription']
     */
    screenReaderDescription?: string;
    /**
     * Additional CSS classes to apply to the dropdown menu panel
     * Useful for customizing the dropdown appearance (background, border, etc.)
     * @type {HTMLAttributes['class']}
     */
    menuPanelClass?: HTMLAttributes['class'];
    /**
     * Inline styles to apply to the dropdown menu panel
     * Useful for custom styling. You may use `!important` to override default styles
     * @type {HTMLAttributes['style']}
     */
    menuPanelStyle?: HTMLAttributes['style'];
    /**
     * Makes the dropdown button expand to full width of its container
     * @type {boolean}
     * @default false
     */
    block?: boolean;
    /**
     * Icon to use instead of the default chevron for the dropdown indicator
     * Can be either an icon name string or a Vue component
     * @type {string | IconComponent}
     * @example 'arrow-down'
     * @example ArrowDownIcon (import { ArrowDownIcon } from '@maz-ui/icons')
     */
    dropdownIcon?: string | IconComponent;
    /**
     * Controls whether the dropdown icon rotates when the dropdown is opened
     * @type {boolean}
     * @default true
     */
    dropdownIconAnimation?: boolean;
    /**
     * Size of the dropdown button
     * @type {MazSize}
     * @values mini, xs, sm, md, lg, xl
     * @default 'md'
     */
    size?: MazSize;
    /**
     * Transition to use when the dropdown is opened or closed
     * @type {MazPopoverProps['transition']}
     * @values 'scale-pop' | 'scale-fade' | string
     * @default 'scale-pop'
     */
    transition?: MazPopoverProps['transition'];
}
declare const __VLS_defaults: {
    modelValue: boolean;
};
type __VLS_PublicProps = {
    modelValue?: typeof __VLS_defaults['modelValue'];
} & __VLS_Props;
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        'screen-reader-description'?(_: {}): any;
        trigger?(_: {
            isOpen: boolean;
            toggle: () => void;
            close: () => void;
            open: () => void;
        }): any;
        default?(_: {}): any;
        'dropdown-icon'?(_: {
            isOpen: boolean;
            toggle: () => void;
            close: () => void;
            open: () => void;
        }): any;
        dropdown?(_: {
            items: MazDropdownMenuItem[];
            open: () => void;
            close: () => void;
            isOpen: boolean;
            toggle: () => void;
        }): any;
        menuitem?(_: {
            item: MazDropdownMenuItem;
            open: () => void;
            close: () => void;
            isOpen: boolean;
            toggle: () => void;
        }): any;
        'menuitem-label'?(_: {
            item: Record<string, unknown> & {
                label: string;
                class?: unknown;
                color?: MazColor;
            } & MazLinkProps & {
                target?: string;
                href?: string;
                to?: RouteLocationRaw;
            } & {
                action?: never;
            };
            open: () => void;
            close: () => void;
            isOpen: boolean;
            toggle: () => void;
        }): any;
        'menuitem-label'?(_: {
            item: Record<string, unknown> & {
                label: string;
                class?: unknown;
                color?: MazColor;
            } & {
                onClick?: () => unknown;
            } & {
                href?: never;
                to?: never;
                target?: never;
            };
            open: () => void;
            close: () => void;
            isOpen: boolean;
            toggle: () => void;
        }): any;
    };
    refs: {
        mazPopoverRef: ({
            $: import('vue').ComponentInternalInstance;
            $data: {};
            $props: {
                readonly modelValue?: boolean | undefined;
                readonly position?: import('./MazPopover.vue').MazPopoverPosition | undefined;
                readonly preferPosition?: import('./MazPopover.vue').MazPopoverPreferPosition | undefined;
                readonly fallbackPosition?: import('./MazPopover.vue').MazPopoverFallbackPosition | undefined;
                readonly trigger?: import('./MazPopover.vue').MazPopoverTrigger | undefined;
                readonly role?: import('./MazPopover.vue').MazPopoverRole | undefined;
                readonly ariaLabel?: string | undefined;
                readonly announceChanges?: boolean | undefined;
                readonly disabled?: boolean | undefined;
                readonly offset?: number | undefined;
                readonly delay?: number | undefined;
                readonly hoverDelay?: number | undefined;
                readonly transition?: "scale-pop" | "scale-fade" | string | undefined;
                readonly teleportTo?: string | undefined;
                readonly overlayClass?: HTMLAttributes["class"];
                readonly panelClass?: HTMLAttributes["class"];
                readonly panelStyle?: import('vue').StyleValue;
                readonly closeOnClickOutside?: boolean | undefined;
                readonly closeOnEscape?: boolean | undefined;
                readonly persistent?: boolean | undefined;
                readonly id?: string | undefined;
                readonly ariaLabelledby?: string | undefined;
                readonly ariaDescribedby?: string | undefined;
                readonly color?: (MazColor | "background") | undefined;
                readonly trapFocus?: boolean | undefined;
                readonly keepOpenOnHover?: boolean | undefined;
                readonly block?: boolean | undefined;
                readonly positionReference?: (string | HTMLElement) | undefined;
                readonly onClose?: (() => any) | undefined;
                readonly onToggle?: ((value: boolean) => any) | undefined;
                readonly onOpen?: (() => any) | undefined;
                readonly "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
                readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
                readonly "onAfter-close-animation"?: (() => any) | undefined;
            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
            $attrs: {
                [x: string]: unknown;
            };
            $refs: {
                [x: string]: unknown;
            } & {
                trigger: HTMLDivElement;
                panel: HTMLDivElement;
            };
            $slots: Readonly<{
                [name: string]: import('vue').Slot<any> | undefined;
            }>;
            $root: import('vue').ComponentPublicInstance | null;
            $parent: import('vue').ComponentPublicInstance | null;
            $host: Element | null;
            $emit: ((event: "close") => void) & ((event: "toggle", value: boolean) => void) & ((event: "open") => void) & ((event: "update:model-value", value: boolean) => void) & ((event: "update:modelValue", value: boolean) => void) & ((event: "after-close-animation") => void);
            $el: any;
            $options: import('vue').ComponentOptionsBase<Readonly<{
                modelValue?: boolean;
            } & MazPopoverProps> & Readonly<{
                onClose?: (() => any) | undefined;
                onToggle?: ((value: boolean) => any) | undefined;
                onOpen?: (() => any) | undefined;
                "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
                "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
                "onAfter-close-animation"?: (() => any) | undefined;
            }>, {
                open: () => void;
                close: () => void;
                toggle: () => void;
                isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
                updatePosition: () => void;
                panelRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
                close: () => any;
                toggle: (value: boolean) => any;
                open: () => any;
                "update:model-value": (value: boolean) => any;
                "update:modelValue": (value: boolean) => any;
                "after-close-animation": () => any;
            }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
                beforeCreate?: (() => void) | (() => void)[];
                created?: (() => void) | (() => void)[];
                beforeMount?: (() => void) | (() => void)[];
                mounted?: (() => void) | (() => void)[];
                beforeUpdate?: (() => void) | (() => void)[];
                updated?: (() => void) | (() => void)[];
                activated?: (() => void) | (() => void)[];
                deactivated?: (() => void) | (() => void)[];
                beforeDestroy?: (() => void) | (() => void)[];
                beforeUnmount?: (() => void) | (() => void)[];
                destroyed?: (() => void) | (() => void)[];
                unmounted?: (() => void) | (() => void)[];
                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
            };
            $forceUpdate: () => void;
            $nextTick: typeof import('vue').nextTick;
            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
        } & Readonly<{}> & Omit<Readonly<{
            modelValue?: boolean;
        } & MazPopoverProps> & Readonly<{
            onClose?: (() => any) | undefined;
            onToggle?: ((value: boolean) => any) | undefined;
            onOpen?: (() => any) | undefined;
            "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
            "onAfter-close-animation"?: (() => any) | undefined;
        }>, "close" | "toggle" | "open" | "isOpen" | "updatePosition" | "panelRef"> & import('vue').ShallowUnwrapRef<{
            open: () => void;
            close: () => void;
            toggle: () => void;
            isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
            updatePosition: () => void;
            panelRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
        }> & {} & import('vue').ComponentCustomProperties & {} & {
            $slots: {
                trigger?(_: {
                    open: () => void;
                    close: () => void;
                    toggle: () => void;
                    isOpen: boolean;
                    trigger: "click" | "hover" | "manual";
                }): any;
                default?(_: {
                    open: () => void;
                    close: () => void;
                    toggle: () => void;
                    isOpen: true;
                }): any;
            };
        }) | null;
    };
    rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "update:model-value": (value: boolean) => any;
    "update:modelValue": (value: boolean) => any;
    "menuitem-clicked": (event: Event) => any;
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
    "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
    "onMenuitem-clicked"?: ((event: Event) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
    mazPopoverRef: ({
        $: import('vue').ComponentInternalInstance;
        $data: {};
        $props: {
            readonly modelValue?: boolean | undefined;
            readonly position?: import('./MazPopover.vue').MazPopoverPosition | undefined;
            readonly preferPosition?: import('./MazPopover.vue').MazPopoverPreferPosition | undefined;
            readonly fallbackPosition?: import('./MazPopover.vue').MazPopoverFallbackPosition | undefined;
            readonly trigger?: import('./MazPopover.vue').MazPopoverTrigger | undefined;
            readonly role?: import('./MazPopover.vue').MazPopoverRole | undefined;
            readonly ariaLabel?: string | undefined;
            readonly announceChanges?: boolean | undefined;
            readonly disabled?: boolean | undefined;
            readonly offset?: number | undefined;
            readonly delay?: number | undefined;
            readonly hoverDelay?: number | undefined;
            readonly transition?: "scale-pop" | "scale-fade" | string | undefined;
            readonly teleportTo?: string | undefined;
            readonly overlayClass?: HTMLAttributes["class"];
            readonly panelClass?: HTMLAttributes["class"];
            readonly panelStyle?: import('vue').StyleValue;
            readonly closeOnClickOutside?: boolean | undefined;
            readonly closeOnEscape?: boolean | undefined;
            readonly persistent?: boolean | undefined;
            readonly id?: string | undefined;
            readonly ariaLabelledby?: string | undefined;
            readonly ariaDescribedby?: string | undefined;
            readonly color?: (MazColor | "background") | undefined;
            readonly trapFocus?: boolean | undefined;
            readonly keepOpenOnHover?: boolean | undefined;
            readonly block?: boolean | undefined;
            readonly positionReference?: (string | HTMLElement) | undefined;
            readonly onClose?: (() => any) | undefined;
            readonly onToggle?: ((value: boolean) => any) | undefined;
            readonly onOpen?: (() => any) | undefined;
            readonly "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
            readonly "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
            readonly "onAfter-close-animation"?: (() => any) | undefined;
        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
        $attrs: {
            [x: string]: unknown;
        };
        $refs: {
            [x: string]: unknown;
        } & {
            trigger: HTMLDivElement;
            panel: HTMLDivElement;
        };
        $slots: Readonly<{
            [name: string]: import('vue').Slot<any> | undefined;
        }>;
        $root: import('vue').ComponentPublicInstance | null;
        $parent: import('vue').ComponentPublicInstance | null;
        $host: Element | null;
        $emit: ((event: "close") => void) & ((event: "toggle", value: boolean) => void) & ((event: "open") => void) & ((event: "update:model-value", value: boolean) => void) & ((event: "update:modelValue", value: boolean) => void) & ((event: "after-close-animation") => void);
        $el: any;
        $options: import('vue').ComponentOptionsBase<Readonly<{
            modelValue?: boolean;
        } & MazPopoverProps> & Readonly<{
            onClose?: (() => any) | undefined;
            onToggle?: ((value: boolean) => any) | undefined;
            onOpen?: (() => any) | undefined;
            "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
            "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
            "onAfter-close-animation"?: (() => any) | undefined;
        }>, {
            open: () => void;
            close: () => void;
            toggle: () => void;
            isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
            updatePosition: () => void;
            panelRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
            close: () => any;
            toggle: (value: boolean) => any;
            open: () => any;
            "update:model-value": (value: boolean) => any;
            "update:modelValue": (value: boolean) => any;
            "after-close-animation": () => any;
        }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
            beforeCreate?: (() => void) | (() => void)[];
            created?: (() => void) | (() => void)[];
            beforeMount?: (() => void) | (() => void)[];
            mounted?: (() => void) | (() => void)[];
            beforeUpdate?: (() => void) | (() => void)[];
            updated?: (() => void) | (() => void)[];
            activated?: (() => void) | (() => void)[];
            deactivated?: (() => void) | (() => void)[];
            beforeDestroy?: (() => void) | (() => void)[];
            beforeUnmount?: (() => void) | (() => void)[];
            destroyed?: (() => void) | (() => void)[];
            unmounted?: (() => void) | (() => void)[];
            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
        };
        $forceUpdate: () => void;
        $nextTick: typeof import('vue').nextTick;
        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
    } & Readonly<{}> & Omit<Readonly<{
        modelValue?: boolean;
    } & MazPopoverProps> & Readonly<{
        onClose?: (() => any) | undefined;
        onToggle?: ((value: boolean) => any) | undefined;
        onOpen?: (() => any) | undefined;
        "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
        "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
        "onAfter-close-animation"?: (() => any) | undefined;
    }>, "close" | "toggle" | "open" | "isOpen" | "updatePosition" | "panelRef"> & import('vue').ShallowUnwrapRef<{
        open: () => void;
        close: () => void;
        toggle: () => void;
        isOpen: import('vue').ModelRef<boolean, string, boolean, boolean>;
        updatePosition: () => void;
        panelRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
    }> & {} & import('vue').ComponentCustomProperties & {} & {
        $slots: {
            trigger?(_: {
                open: () => void;
                close: () => void;
                toggle: () => void;
                isOpen: boolean;
                trigger: "click" | "hover" | "manual";
            }): any;
            default?(_: {
                open: () => void;
                close: () => void;
                toggle: () => void;
                isOpen: true;
            }): any;
        };
    }) | null;
}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};