@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
103 lines • 4 kB
TypeScript
import { InjectionKey, ComputedRef, ComponentInternalInstance } from 'vue';
import { LayoutResult } from './composables/computeLayout';
export type ResizableSizeValue = string;
export type ResizableDirection = 'row' | 'column';
export interface ResizablePanelConfig {
id: string;
initialSize?: ResizableSizeValue;
userMinSize?: ResizableSizeValue;
userMaxSize?: ResizableSizeValue;
systemMinSize?: ResizableSizeValue;
systemMaxSize?: ResizableSizeValue;
collapseSize?: ResizableSizeValue;
resizable?: boolean;
collapsible?: boolean;
collapsed?: boolean;
}
export interface ResizablePanelState extends ResizablePanelConfig {
pixelSize: number;
userMinSizePixels?: number;
userMaxSizePixels?: number;
systemMinSizePixels?: number;
systemMaxSizePixels?: number;
collapseSizePixels?: number;
autoCollapsed?: boolean;
manualTargetSize?: number;
manualTargetRatio?: number;
restoredFromStorage?: boolean;
}
export interface ResizableHandleConfig {
id: string;
beforePanelId: string;
afterPanelId: string;
direction: ResizableDirection;
}
export type ResizableSizeMode = 'percentage' | 'pixels';
export interface ResizableGroupConfig {
direction: ResizableDirection;
panels: ResizablePanelConfig[];
storageKey?: string;
sizeMode?: ResizableSizeMode;
limitToParent?: boolean;
}
export interface ResizableGroupState {
direction: ResizableDirection;
panels: ResizablePanelState[];
containerSize: number;
isResizing: boolean;
activeHandleId?: string;
}
export interface ResizableEvents {
'panel-resize': (panelId: string, size: number) => void;
'panel-collapse': (panelId: string, collapsed: boolean) => void;
'resize-start': (handleId: string) => void;
'resize-end': (handleId: string) => void;
}
export interface CollapseRule {
panelId: string;
priority: number;
minSizeBeforeCollapse?: ResizableSizeValue;
}
export declare const DEFAULT_PANEL_SIZE = "50p";
export declare const MIN_PANEL_SIZE_PX = 10;
export interface ResizableStorageAdapter {
save(data: ResizableStoragePanelData[]): void;
load(): ResizableStoragePanelData[] | null;
clear(): void;
}
export interface ResizableStoragePanelData {
id: string;
pixelSize: number;
collapsed?: boolean;
autoCollapsed?: boolean;
manualTargetRatio?: number;
}
export interface ResizableContext {
layout: ComputedRef<LayoutResult>;
panels: ComputedRef<ResizablePanelState[]>;
panelMap: ComputedRef<Map<string, ResizablePanelState>>;
direction: ComputedRef<ResizableDirection>;
containerSize: ComputedRef<number>;
containerElement: ComputedRef<HTMLElement | null>;
isResizing: ComputedRef<boolean>;
activeHandleId: ComputedRef<string | undefined>;
isInitializing: ComputedRef<boolean>;
messages: Record<string, string>;
offsetHandleStyles: ComputedRef<Record<string, string>>;
offsetContentStyles: ComputedRef<Record<string, string>>;
startResize: (handleId: string) => void;
resetPanels: (beforePanelId?: string, afterPanelId?: string, behavior?: 'both' | 'before' | 'after' | 'all') => void;
registerHandle: (instance: ComponentInternalInstance | null) => void;
unregisterHandle: (instance: ComponentInternalInstance | null) => void;
registerPanel: (config: ResizablePanelConfig) => void;
unregisterPanel: (id: string) => void;
saveToStorage: () => void;
announce: (message: string) => void;
collapsePanel: (panelId: string, collapsed: boolean) => void;
emitPanelResize: (panelId: string, size: number) => void;
commitPanelSize: (panelId: string, pixels: number) => void;
updateSavedPanel: (panelId: string, updates: Partial<ResizableStoragePanelData>) => void;
}
export declare const RESIZABLE_CONTEXT_KEY: InjectionKey<ResizableContext>;
export declare function buildHandleId(beforeId: string, afterId: string): string;
//# sourceMappingURL=resizable_constants.d.ts.map