@club-employes/utopia
Version:
🎨 Modern Vue 3 design system with multi-brand theming, design tokens, and 30+ components. Supports Club Employés & Gifteo brands with light/dark modes.
28 lines (27 loc) • 1.11 kB
TypeScript
export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
export type ModalPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
export type ModalAnimation = 'slide-top' | 'slide-horizontal' | 'slide-horizontal-left' | 'slide-bottom';
export type ModalMobileBehavior = 'bottom-sheet' | 'center';
export type ModalChangeReason = 'open' | 'close' | 'overlay' | 'escape' | 'close-button';
export interface ModalProps {
open?: boolean;
defaultOpen?: boolean;
title?: string;
size?: ModalSize;
position?: ModalPosition;
closeOnOverlayClick?: boolean;
showCloseButton?: boolean;
showHeader?: boolean;
showFooter?: boolean;
disableScrollLock?: boolean;
focusTrap?: boolean;
blurBackdrop?: boolean;
animation?: ModalAnimation;
/** Comportement sur mobile : 'bottom-sheet' (par défaut) ou 'center' */
mobileBehavior?: ModalMobileBehavior;
onOpenChange?: (open: boolean, reason: ModalChangeReason) => void;
}
export interface ModalOpenChangePayload {
open: boolean;
reason: ModalChangeReason;
}