@prefecthq/prefect-design
Version:
A collection of low-level Vue components.
42 lines (41 loc) • 2 kB
TypeScript
import { ComputedRef, InjectionKey, MaybeRefOrGetter, Ref } from 'vue';
export declare const cascadePanelsKey: InjectionKey<UseCascadePanels>;
export type CascadePanelId = string | symbol | number;
export type CascadeState = Record<CascadePanelId, boolean>;
export type CascadePanel = {
id: CascadePanelId;
level?: number;
};
export type UseCascadePanels = {
openPanels: ComputedRef<CascadePanel[]>;
panels: Ref<CascadePanel[]>;
state: Readonly<CascadeState>;
isOpen: Ref<boolean>;
getPanelById: (id: CascadePanelId) => CascadePanel | undefined;
getPanelIsOpenById: (id: CascadePanelId) => boolean;
openPanelById: (id: CascadePanelId) => void;
closePanelById: (id: CascadePanelId) => void;
togglePanelById: (id: CascadePanelId) => void;
closeAll: () => void;
close: () => void;
open: () => void;
toggle: () => void;
};
/**
* Provides a mechanism to manage a cascade of panels, each identified by a unique id, with operations to open, close, and toggle their states.
*
* @param {CascadePanel[]} panelsRefOrGetter - Initial array of panel definitions.
* @returns {UseCascadePanels} - An object including:
* - `panels`: Ref array of panel definitions.
* - `openPanels`: Computed array of open panels.
* - `state`: Readonly object tracking the open/close state of each panel by id.
* - `isOpen`: Ref boolean indicating whether the cascade panel group is open.
* - `getPanelIsOpenById`: Function to get the open state of a panel by id.
* - `getPanelById`: Function to get a panel by id.
* - `openPanelById`: Function to open a panel by id.
* - `closePanelById`: Function to close a panel by id.
* - `togglePanelById`: Function to toggle the open state of a panel by id.
* - `closeAll`: Function to close all panels.
* - `close`, `open`, `toggle`: Functions to control the overall cascade state.
*/
export declare function useCascadePanels(panelsRefOrGetter?: MaybeRefOrGetter<CascadePanel[]>): UseCascadePanels;