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

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

import type { RouteLocationRaw } from 'vue-router';
import type { Color } from './MazBtn.vue';
import type { MazLinkProps } from './MazLink.vue';
import type { Icon, Position, Size } from './types';
import { type HTMLAttributes } from 'vue';
export type { Color, Position, Size };
type ItemBase = Record<string, unknown> & {
    label: string;
    class?: unknown;
    color?: Color;
};
type LinkItem = ItemBase & MazLinkProps & {
    target?: string;
    href?: string;
    to?: RouteLocationRaw;
};
type ActionItem = ItemBase & {
    action?: () => unknown;
};
export type MenuItem = (LinkItem & {
    action?: never;
}) | (ActionItem & {
    href?: never;
    to?: never;
    target?: never;
});
export interface MazDropdownProps {
    /** Style object */
    style?: HTMLAttributes['style'];
    /** Class name */
    class?: HTMLAttributes['class'];
    /**
     * Menu items
     * @default '[]'
     */
    items?: MenuItem[];
    /** Menu should be open? */
    open?: boolean;
    /** id of the menu */
    id?: string;
    /**
     * Should open the dropdown on click, hover or both
     * @default 'both'
     */
    trigger?: 'click' | 'hover' | 'both';
    /**
     * Button color
     * @default 'transparent'
     */
    color?: Color;
    /**
     * Position of the dropdown
     * @default 'bottom left'
     */
    position?: Position;
    /** Disable close menu on menuitem clicked */
    noCloseOnClick?: boolean;
    /** Disable menu */
    disabled?: boolean;
    /** Remove chevron icon in main button */
    noChevron?: boolean;
    /**
     * Description read by screen reader (accessibility)
     * @default 'Open menu dropdown'
     */
    screenReaderDescription?: string;
    /**
     * Class for the menu panel - useful for custom dropdown panel (background, border, etc.)
     */
    menuPanelClass?: HTMLAttributes['class'];
    /**
     * Style for the menu panel - useful for custom dropdown panel (background, border, etc.)
     * You may use `!important` to override the default style
     */
    menuPanelStyle?: HTMLAttributes['style'];
    /**
     * If true, the button will have a full width
     */
    block?: boolean;
    /**
     * Custom dropdown icon
     * You can use a string to define the icon name or a Vue component
     * @default undefined
     */
    dropdownIcon?: string | Icon;
    /**
     * If true, the dropdown icon will rotate when the dropdown is open
     * @default true
     */
    dropdownIconAnimation?: boolean;
    /**
     * Size of the button
     * @default 'md'
     */
    size?: Size;
}
declare function __VLS_template(): {
    attrs: Partial<{}>;
    slots: {
        "screen-reader-description"?(_: {}): any;
        element?(_: {
            isOpen: boolean;
        }): any;
        default?(_: {}): any;
        "dropdown-icon"?(_: {
            isOpen: boolean;
        }): any;
        dropdown?(_: {
            items: MenuItem[];
        }): any;
        menuitem?(_: {
            item: MenuItem;
        }): any;
        "menuitem-label"?(_: {
            item: Record<string, unknown> & {
                label: string;
                class?: unknown;
                color?: Color;
            } & MazLinkProps & {
                target?: string;
                href?: string;
                to?: RouteLocationRaw;
            } & {
                action?: never;
            };
        }): any;
        "menuitem-label"?(_: {
            item: Record<string, unknown> & {
                label: string;
                class?: unknown;
                color?: Color;
            } & {
                action?: () => unknown;
            } & {
                href?: never;
                to?: never;
                target?: never;
            };
        }): any;
    };
    refs: {};
    rootEl: any;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import("vue").DefineComponent<MazDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
    "menuitem-clicked": (event: Event) => any;
    "update:open": (value: boolean) => any;
}, string, import("vue").PublicProps, Readonly<MazDropdownProps> & Readonly<{
    "onMenuitem-clicked"?: ((event: Event) => any) | undefined;
    "onUpdate:open"?: ((value: boolean) => any) | undefined;
}>, {
    style: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
    size: Size;
    color: Color;
    class: HTMLAttributes["class"];
    id: string;
    position: Position;
    trigger: "click" | "hover" | "both";
    items: MenuItem[];
    screenReaderDescription: string;
    dropdownIconAnimation: boolean;
}, {}, {}, {}, 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;
    };
};