@fifteen/design-system-vue/dist/types/ui/FDebugMenu.d.ts

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

import { Ref, MaybeRef, WritableComputedRef } from 'vue';
import { BaseColorDesignToken, Color, FMenuOption } from '../index';
export type DebugMenuItemType = 'trigger' | 'toggle' | 'content' | 'input' | 'select';
interface DebugMenuItemBase {
    /**
     * Title of the menu item.
     */
    title: MaybeRef<string>;
    /**
     * Optional description of the menu item.
     */
    description?: MaybeRef<string>;
    /**
     * Whether the menu item is disabled.
     */
    disabled?: MaybeRef<boolean>;
    /**
     * If given, store the value in local storage under this key.
     */
    localStorageKey?: string;
}
export type DebugMenuItem<T extends DebugMenuItemType = DebugMenuItemType> = DebugMenuItemBase & (T extends 'trigger' ? {
    /**
     * Type of the menu item.
     */
    type: 'trigger';
    /**
     * Text to display on the action button.
     */
    triggerText: string;
    /**
     * Action to be executed when the menu item is clicked.
     * Returns a message to display on success,
     * and throws an error to display an error message on failure.
     */
    action: () => Promise<string | undefined | void> | string | undefined | void;
} : T extends 'toggle' ? {
    /**
     * Type of the menu item.
     */
    type: 'toggle';
    /**
     * Reference to the boolean value to toggle.
     */
    ref: Ref<boolean> | WritableComputedRef<boolean>;
} : T extends 'content' ? {
    /**
     * Type of the menu item.
     */
    type: 'content';
    /**
     * Any content to display. Will be stringified by Vue template rendering.
     */
    content: MaybeRef<unknown>;
    /**
     * Whether the menu item is disabled.
     */
    disabled?: false;
} : T extends 'input' ? {
    /**
     * Type of the menu item.
     */
    type: 'input';
    /**
     * Reference to the input value to update.
     */
    ref: Ref<string | undefined> | WritableComputedRef<string | undefined>;
    /**
     * A placeholder for the input.
     */
    placeholder?: MaybeRef<string>;
    /**
     * Width of the input. If given as a number, it will be treated as pixels.
     */
    width?: MaybeRef<string | number>;
} : T extends 'select' ? {
    /**
     * Type of the menu item.
     */
    type: 'select';
    /**
     * Reference to the input value to update.
     */
    ref: Ref<string | undefined> | WritableComputedRef<string | undefined>;
    /**
     * A placeholder for the input.
     */
    placeholder?: MaybeRef<string>;
    /**
     * Width of the input. If given as a number, it will be treated as pixels.
     */
    width?: MaybeRef<string | number>;
    /**
     * Whether the select input is clearable
     */
    clearable?: MaybeRef<boolean>;
    /**
     * Options for the select input
     */
    options: MaybeRef<FMenuOption[]>;
} : never);
export interface DebugMenuGroup {
    /**
     * Title of the debug group.
     */
    title: string;
    /**
     * Whether the group is initially expanded.
     */
    expanded?: boolean;
    /**
     * Debug items of the debug group.
     */
    items: DebugMenuItem[];
}
export type DebugMenuConfig = DebugMenuGroup[];
export interface FDebugMenuProps {
    /**
     * Controls the menu open state.
     * @model
     */
    modelValue?: boolean;
    /**
     * Debug menu configuration.
     */
    config?: DebugMenuConfig;
    /**
     * Color of the debug menu.
     */
    color?: Color;
    /**
     * Color of the text.
     */
    textColor?: Color;
    /**
     * Color of the control elements.
     */
    controlColor?: BaseColorDesignToken;
    /**
     * Max width of the debug menu.
     */
    maxWidth?: number | string;
    /**
     * Snap mode ('free' is almost free, we avoid overflowing the edges)
     */
    snapMode?: 'free' | 'edges' | 'corners';
    /**
     * Override default 'Debug menu' name.
     */
    name?: string;
}
declare const _default: import('vue').DefineComponent<FDebugMenuProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
    "update:modelValue": (value: boolean) => any;
}, string, import('vue').PublicProps, Readonly<FDebugMenuProps> & Readonly<{
    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
}>, {
    color: Color;
    textColor: Color;
    modelValue: boolean;
    name: string;
    config: DebugMenuConfig;
    controlColor: BaseColorDesignToken;
    maxWidth: number | string;
    snapMode: "free" | "edges" | "corners";
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
export default _default;