@fifteen/design-system-vue/dist/types/components/FMenu.d.ts

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

import { Color } from '../types/colors';
export type FMenuOptionValue = any;
export interface FMenuOption {
    label: string;
    value: FMenuOptionValue;
    description?: string;
}
export interface FMenuProps {
    /**
     * Control menu visibility state from parent
     * @model
     */
    modelValue?: boolean;
    /**
     * Selected value of the menu
     * @model
     */
    selectedOption?: FMenuOptionValue;
    /**
     * Array of options
     */
    options?: FMenuOption[];
    /**
     * Prevent item selection
     */
    preventSelection?: boolean;
    /**
     * Prevent keyboard search
     */
    preventSearch?: boolean;
    /**
     * If true, clicking outside the menu won't close it
     */
    persistent?: boolean;
    /**
     * Text to display when no option is provided
     */
    emptyText?: string;
    /**
     * Width of the menu
     */
    width?: number | string;
    /**
     * Background color of the options menu
     */
    color?: Color;
    /**
     * Text color of option item
     */
    textColor?: Color;
    /**
     * Background color of the selected option
     */
    selectedOptionColor?: Color;
    /**
     * Text color of the selected option
     */
    selectedOptionTextColor?: Color;
    /**
     * Disable the menu
     */
    disabled?: boolean;
    /**
     * Disable fade transitions
     */
    inanimated?: boolean;
    /**
     * Loading state of the menu
     */
    loading?: boolean;
    /**
     * Force the menu to be positioned as `absolute` instead of `fixed` by default
     */
    absolute?: boolean;
    /**
     * Set the z-index of the menu
     */
    zIndex?: number | string;
    /**
     * Offset in pixels along the activator element
     */
    offsetSkid?: number | string;
    /**
     * Offset in pixels away from the trigger element
     */
    offsetDistance?: number | string;
    /**
     * Height of the option div, defaults to 52px
     */
    optionHeight?: number | string;
    /**
     * Prevent the activator to automatically toggle the menu on click, enter or space
     */
    preventActivation?: boolean;
}
/**
 * Toggle the menu
 */
declare function toggleMenu(): Promise<void>;
/**
 * Open the menu
 */
declare function openMenu(): void;
/**
 * Close the menu
 */
declare function closeMenu(): void;
declare function __VLS_template(): {
    slots: {
        activator?(_: {
            toggleMenu: typeof toggleMenu;
            openMenu: typeof openMenu;
            closeMenu: typeof closeMenu;
        }): any;
        "option-prefix"?(_: {
            option: FMenuOption;
            index: number;
            isSelected: boolean;
        }): any;
        option?(_: {
            option: FMenuOption;
            index: number;
            isSelected: boolean;
        }): any;
        "option-suffix"?(_: {
            option: FMenuOption;
            index: number;
            isSelected: boolean;
        }): any;
    };
    refs: {
        menuRef: HTMLDivElement;
        activatorRef: HTMLDivElement;
        contentRef: HTMLDivElement;
        menuOptionsRef: HTMLDivElement;
        optionRefs: HTMLDivElement;
    };
    attrs: Partial<{}>;
};
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
declare const __VLS_component: import('vue').DefineComponent<FMenuProps, {
    selectOption: (option?: FMenuOption | null) => void;
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    "update:modelValue": (value: boolean) => any;
    "update:selectedOption": (value: any) => any;
    "before-select-option": (value: any) => any;
}, string, import('vue').PublicProps, Readonly<FMenuProps> & Readonly<{
    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
    "onUpdate:selectedOption"?: ((value: any) => any) | undefined;
    "onBefore-select-option"?: ((value: any) => any) | undefined;
}>, {
    color: Color;
    textColor: Color;
    width: number | string;
    loading: boolean;
    disabled: boolean;
    modelValue: boolean;
    selectedOption: FMenuOptionValue;
    options: FMenuOption[];
    preventSelection: boolean;
    preventSearch: boolean;
    persistent: boolean;
    emptyText: string;
    selectedOptionColor: Color;
    selectedOptionTextColor: Color;
    inanimated: boolean;
    absolute: boolean;
    zIndex: number | string;
    offsetSkid: number | string;
    offsetDistance: number | string;
    optionHeight: number | string;
    preventActivation: 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;
    };
};