@wikimedia/codex/dist/types/components/menu-item/MenuItem.vue.d.ts

Codex Design System for Wikimedia

import { PropType } from 'vue';
import { Icon } from '@wikimedia/codex-icons';
import { Thumbnail, MenuItemLanguageData, ButtonAction, MenuItemValue } from '../../types';
/**
 * A selectable option included within a Menu.
 */
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
    /**
     * ID for HTML `id` attribute.
     */
    id: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The value provided to the parent menu component when this menu item is selected.
     */
    value: {
        type: PropType<MenuItemValue>;
        required: true;
    };
    /**
     * Whether the menu item is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is selected.
     */
    selected: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is being pressed.
     */
    active: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is visually highlighted due to hover or keyboard navigation.
     */
    highlighted: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Label for the menu item. If this isn't provided, the value will be displayed instead.
     */
    label: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Text that matches current search query. Only used for search results and will be
     * displayed after the label.
     */
    match: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Text that supports the label. Supporting text will appear next to the label in a more
     * subtle color.
     */
    supportingText: {
        type: StringConstructor;
        default: string;
    };
    /**
     * URL for the menu item. If provided, the content of the menu item will be wrapped in an
     * anchor tag.
     */
    url: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Icon for the menu item.
     */
    icon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Whether a thumbnail (or a placeholder icon) should be displayed.
     */
    showThumbnail: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Thumbnail for the menu item.
     */
    thumbnail: {
        type: PropType<Thumbnail | null>;
        default: null;
    };
    /**
     * Description of the menu item.
     */
    description: {
        type: PropType<string | null>;
        default: string;
    };
    /**
     * The search query to be highlighted within the menu item's title.
     */
    searchQuery: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Whether to bold menu item labels.
     */
    boldLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to hide description text overflow via an ellipsis.
     */
    hideDescriptionOverflow: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Optional language codes for label, match, supporting text, and description.
     *
     * If included, that language code will be added as a `lang` attribute to the element
     * wrapping that text node.
     *
     * @default {}
     */
    language: {
        type: PropType<MenuItemLanguageData>;
        default: () => {};
    };
    /**
     * MenuItems inside a MenuButton can also support an "action" prop
     */
    action: {
        type: PropType<ButtonAction>;
        default: string;
    };
    /**
     * Whether this menu is in multiselect mode.
     */
    multiselect: {
        type: BooleanConstructor;
        default: boolean;
    };
}>, {
    onMouseMove: () => void;
    onMouseLeave: () => void;
    onMouseDown: (e: MouseEvent) => void;
    onClick: () => void;
    highlightQuery: import("vue").ComputedRef<boolean>;
    rootClasses: import("vue").ComputedRef<Record<string, boolean>>;
    contentTag: import("vue").ComputedRef<"span" | "a">;
    title: import("vue").ComputedRef<string>;
    cdxIconCheck: string;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * ID for HTML `id` attribute.
     */
    id: {
        type: StringConstructor;
        required: true;
    };
    /**
     * The value provided to the parent menu component when this menu item is selected.
     */
    value: {
        type: PropType<MenuItemValue>;
        required: true;
    };
    /**
     * Whether the menu item is disabled.
     */
    disabled: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is selected.
     */
    selected: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is being pressed.
     */
    active: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether this menu item is visually highlighted due to hover or keyboard navigation.
     */
    highlighted: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Label for the menu item. If this isn't provided, the value will be displayed instead.
     */
    label: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Text that matches current search query. Only used for search results and will be
     * displayed after the label.
     */
    match: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Text that supports the label. Supporting text will appear next to the label in a more
     * subtle color.
     */
    supportingText: {
        type: StringConstructor;
        default: string;
    };
    /**
     * URL for the menu item. If provided, the content of the menu item will be wrapped in an
     * anchor tag.
     */
    url: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Icon for the menu item.
     */
    icon: {
        type: PropType<Icon>;
        default: string;
    };
    /**
     * Whether a thumbnail (or a placeholder icon) should be displayed.
     */
    showThumbnail: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Thumbnail for the menu item.
     */
    thumbnail: {
        type: PropType<Thumbnail | null>;
        default: null;
    };
    /**
     * Description of the menu item.
     */
    description: {
        type: PropType<string | null>;
        default: string;
    };
    /**
     * The search query to be highlighted within the menu item's title.
     */
    searchQuery: {
        type: StringConstructor;
        default: string;
    };
    /**
     * Whether to bold menu item labels.
     */
    boldLabel: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether to hide description text overflow via an ellipsis.
     */
    hideDescriptionOverflow: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Optional language codes for label, match, supporting text, and description.
     *
     * If included, that language code will be added as a `lang` attribute to the element
     * wrapping that text node.
     *
     * @default {}
     */
    language: {
        type: PropType<MenuItemLanguageData>;
        default: () => {};
    };
    /**
     * MenuItems inside a MenuButton can also support an "action" prop
     */
    action: {
        type: PropType<ButtonAction>;
        default: string;
    };
    /**
     * Whether this menu is in multiselect mode.
     */
    multiselect: {
        type: BooleanConstructor;
        default: boolean;
    };
}>> & Readonly<{
    onChange?: ((...args: any[]) => any) | undefined;
}>, {
    url: string;
    selected: boolean;
    highlighted: boolean;
    active: boolean;
    icon: Icon;
    label: string;
    match: string;
    action: "default" | "progressive" | "destructive";
    disabled: boolean;
    thumbnail: Thumbnail | null;
    description: string | null;
    searchQuery: string;
    supportingText: string;
    showThumbnail: boolean;
    boldLabel: boolean;
    hideDescriptionOverflow: boolean;
    language: MenuItemLanguageData;
    multiselect: boolean;
}, {}, {
    CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>, {
        rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
        rootClasses: import("vue").ComputedRef<{
            [x: string]: boolean;
            'cdx-icon--flipped': boolean;
        }>;
        iconSvg: import("vue").ComputedRef<string>;
        iconPath: import("vue").ComputedRef<string>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        icon: {
            type: PropType<Icon>;
            required: true;
        };
        iconLabel: {
            type: StringConstructor;
            default: string;
        };
        lang: {
            type: PropType<string | null>;
            default: null;
        };
        dir: {
            type: PropType<import("../../types").HTMLDirection | null>;
            default: null;
        };
        size: {
            type: PropType<import("../../types").IconSize>;
            default: string;
            validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
        };
    }>> & Readonly<{}>, {
        lang: string | null;
        iconLabel: string;
        dir: import("../../types").HTMLDirection | null;
        size: "medium" | "small" | "x-small";
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    CdxThumbnail: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        thumbnail: {
            type: PropType<Thumbnail | null>;
            default: null;
        };
        placeholderIcon: {
            type: PropType<Icon>;
            default: string;
        };
    }>, {
        thumbnailStyle: import("vue").Ref<{}, {}>;
        thumbnailLoaded: import("vue").Ref<boolean, boolean>;
        NoInvertClass: "cdx-no-invert";
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        thumbnail: {
            type: PropType<Thumbnail | null>;
            default: null;
        };
        placeholderIcon: {
            type: PropType<Icon>;
            default: string;
        };
    }>> & Readonly<{}>, {
        thumbnail: Thumbnail | null;
        placeholderIcon: Icon;
    }, {}, {
        CdxIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
            icon: {
                type: PropType<Icon>;
                required: true;
            };
            iconLabel: {
                type: StringConstructor;
                default: string;
            };
            lang: {
                type: PropType<string | null>;
                default: null;
            };
            dir: {
                type: PropType<import("../../types").HTMLDirection | null>;
                default: null;
            };
            size: {
                type: PropType<import("../../types").IconSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
            };
        }>, {
            rootElement: import("vue").Ref<HTMLSpanElement | undefined, HTMLSpanElement | undefined>;
            rootClasses: import("vue").ComputedRef<{
                [x: string]: boolean;
                'cdx-icon--flipped': boolean;
            }>;
            iconSvg: import("vue").ComputedRef<string>;
            iconPath: import("vue").ComputedRef<string>;
        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
            icon: {
                type: PropType<Icon>;
                required: true;
            };
            iconLabel: {
                type: StringConstructor;
                default: string;
            };
            lang: {
                type: PropType<string | null>;
                default: null;
            };
            dir: {
                type: PropType<import("../../types").HTMLDirection | null>;
                default: null;
            };
            size: {
                type: PropType<import("../../types").IconSize>;
                default: string;
                validator: import("../../types").StringTypeValidator<"medium" | "small" | "x-small">;
            };
        }>> & Readonly<{}>, {
            lang: string | null;
            iconLabel: string;
            dir: import("../../types").HTMLDirection | null;
            size: "medium" | "small" | "x-small";
        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
    CdxSearchResultTitle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
        title: {
            type: StringConstructor;
            required: true;
        };
        searchQuery: {
            type: StringConstructor;
            default: string;
        };
    }>, {
        titleChunks: import("vue").ComputedRef<[string, string, string]>;
    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
        title: {
            type: StringConstructor;
            required: true;
        };
        searchQuery: {
            type: StringConstructor;
            default: string;
        };
    }>> & Readonly<{}>, {
        searchQuery: string;
    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
export default _default;