@scalar/api-client/dist/v2/features/command-palette/hooks/use-command-palette-state.d.ts

the open source API testing client

import type { ScalarIconComponent } from '@scalar/icons/types';
import type { CommandPalettePayload } from '@scalar/workspace-store/events';
import { type Component, type ComputedRef, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue';
import type { RouteLocationRaw } from 'vue-router';
/**
 * Command IDs that map to UI components (folder and hidden-folder types)
 *
 * For base app commands they are defined by their action payload
 */
type UiCommandIds = keyof CommandPalettePayload;
/** Map the the prop definitons to the prop value */
type CommandPaletteActionProps<K extends UiCommandIds> = CommandPalettePayload[K];
/**
 * Type for the open function in the command palette.
 * Supports two usage patterns:
 * - open() - Opens the palette without a specific command
 * - open(commandId) - Opens a command that does not require props
 * - open(commandId, props) - Opens a command with required props
 */
type OpenCommand = {
    (): void;
    <T extends UiCommandIds>(commandId: T, props: CommandPaletteActionProps<T>): void;
};
/** Route enntry for the palette list */
export type CommandPaletteRoute = {
    id: string;
    type: 'route';
    icon: ScalarIconComponent;
    name: string;
    to: RouteLocationRaw;
};
/** Command entry for the palette list */
type BaseCommandPaletteAction = {
    id: keyof CommandPalettePayload;
    name: string;
    icon?: ScalarIconComponent;
    component: Component;
    hidden?: boolean;
};
export type CommandPaletteAction = Omit<BaseCommandPaletteAction, 'id'> & {
    id: string;
};
export type CommandPaletteEntry = CommandPaletteAction | CommandPaletteRoute;
/**
 * Return type for the useCommandPaletteState composable.
 * Provides reactive state and methods to control the command palette.
 */
export type CommandPaletteState = {
    /** Whether the command palette is currently open */
    isOpen: Ref<boolean>;
    /** The currently active command, or null if showing the main list */
    activeCommand: ShallowRef<CommandPaletteAction | null>;
    /** Properties passed to the active command component */
    activeCommandProps: Ref<Record<string, unknown> | null>;
    /** Current filter/search query for filtering commands */
    filterQuery: Ref<string>;
    /** Grouped actions and routes to be rendered */
    filteredCommands: ComputedRef<{
        label?: string;
        commands: (CommandPaletteAction | CommandPaletteRoute)[];
    }[]>;
    /**
     * Opens the command palette, optionally with a specific command active.
     * When opening a command, props are required only if the command defines them.
     */
    open: OpenCommand;
    /** Closes the command palette and resets state */
    close: () => void;
    /** Updates the filter query for searching commands */
    setFilterQuery: (query: string) => void;
    /** Resets all state to initial values */
    reset: () => void;
};
/**
 * Composable for managing command palette state.
 *
 * Centralizes all state management for the command palette including:
 * - Open/closed state
 * - Filter/search query
 * - Command filtering logic
 *
 * @example
 * const palette = useCommandPaletteState()
 *
 * // Open the palette
 * palette.open()
 *
 * // Open with a specific command
 * palette.open('create-openapi-document')
 *
 * // Open with command props
 * palette.open('import-curl-command', { curl: 'curl https://api.example.com' })
 *
 * // Update filter query (automatically filters commands)
 * palette.setFilterQuery('import')
 *
 * // Access filtered results
 * console.log(palette.filteredCommands.value)
 *
 * // Close and reset
 * palette.close()
 */
export declare const useCommandPaletteState: (actions?: MaybeRefOrGetter<CommandPaletteAction[]>, routes?: MaybeRefOrGetter<CommandPaletteRoute[]>) => CommandPaletteState;
/**
 * The base naviation routes used in the command palette.
 * This object can be extended and passed to the useCommandPaletteState hook to add custom routes
 */
export declare const baseRoutes: CommandPaletteRoute[];
/**
 * The internal client command palette actions
 * This object can be extended and passed to the useCommandPaletteState hook to add custom actions
 */
export declare const baseClientActions: [{
    readonly id: "import-from-openapi-swagger-postman-curl";
    readonly name: "Import from OpenAPI/Swagger/Postman/cURL";
    readonly component: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{
            workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
            eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
            fileLoader?: import("@scalar/json-magic/bundle").LoaderPlugin;
        }> & Readonly<{
            onClose?: (() => any) | undefined;
            onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
            close: () => any;
            back: (keyboardEvent: KeyboardEvent) => any;
        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<{
            workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
            eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
            fileLoader?: import("@scalar/json-magic/bundle").LoaderPlugin;
        }> & Readonly<{
            onClose?: (() => any) | undefined;
            onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
        }>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        fileLoader?: import("@scalar/json-magic/bundle").LoaderPlugin;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            fileUpload(props: {
                import: (source: string, type: "file" | "raw") => Promise<void>;
            }): void;
        };
    });
    readonly icon: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    });
}, {
    readonly id: "create-openapi-document";
    readonly name: "Create OpenAPI Document";
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
    readonly icon: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    });
}, {
    readonly id: "add-tag";
    readonly name: "Add Tag";
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tag?: import("@scalar/workspace-store/schemas/navigation").TraversedTag;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tag?: import("@scalar/workspace-store/schemas/navigation").TraversedTag;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
    readonly icon: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    });
}, {
    readonly id: "create-request";
    readonly name: "Create Request";
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tagId?: string;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tagId?: string;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
    readonly icon: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    });
}, {
    readonly id: "add-example";
    readonly name: "Add Example";
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        operationId?: string;
        example?: import("@scalar/workspace-store/schemas/navigation").TraversedExample;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        operationId?: string;
        example?: import("@scalar/workspace-store/schemas/navigation").TraversedExample;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
    readonly icon: {
        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
            P: {};
            B: {};
            D: {};
            C: {};
            M: {};
            Defaults: {};
        }, Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
        __isFragment?: never;
        __isTeleport?: never;
        __isSuspense?: never;
    } & import("vue").ComponentOptionsBase<Readonly<import("@scalar/icons/types").ScalarIconProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
        $slots: {
            default?: (props: {}) => any;
        };
    });
}, {
    readonly id: "import-curl-command";
    readonly name: "Import cURL Command";
    readonly hidden: true;
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        inputValue: string;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        inputValue: string;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
}, {
    readonly id: "edit-tag";
    readonly name: "Edit Tag";
    readonly hidden: true;
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tag?: import("@scalar/workspace-store/schemas/navigation").TraversedTag;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        tag?: import("@scalar/workspace-store/schemas/navigation").TraversedTag;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
}, {
    readonly id: "edit-example";
    readonly name: "Edit Example";
    readonly hidden: true;
    readonly component: import("vue").DefineComponent<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        operationId?: string;
        example?: import("@scalar/workspace-store/schemas/navigation").TraversedExample;
    }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
        close: () => any;
        back: (keyboardEvent: KeyboardEvent) => any;
    }, string, import("vue").PublicProps, Readonly<{
        workspaceStore: import("@scalar/workspace-store/client").WorkspaceStore;
        eventBus: import("@scalar/workspace-store/events").WorkspaceEventBus;
        documentName?: string;
        operationId?: string;
        example?: import("@scalar/workspace-store/schemas/navigation").TraversedExample;
    }> & Readonly<{
        onClose?: (() => any) | undefined;
        onBack?: ((keyboardEvent: KeyboardEvent) => any) | undefined;
    }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
}];
export {};
//# sourceMappingURL=use-command-palette-state.d.ts.map