maz-ui/dist/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'> {
    /**
     * 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'];
    /**
     * Preferred position of the menu relative to trigger when auto position is used
     * @values auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end
     * @default 'bottom-start'
     */
    preferPosition?: MazPopoverProps['preferPosition'];
    /**
     * 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: {};
    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, {}, any>;
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};