ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
110 lines (109 loc) • 4.61 kB
TypeScript
import { RanElement } from '@/utils/index';
import { EventManager } from '@/utils/builder';
export type ModalCloseTrigger = 'mask' | 'button' | 'escape' | 'program';
export type ModalProgrammaticAction = 'confirm' | 'cancel' | 'dismiss';
export interface ModalProgrammaticOptions {
title?: string;
content?: string | Node;
okText?: string;
cancelText?: string;
showCancel?: boolean;
maskClosable?: boolean;
closeOnEsc?: boolean;
lockScroll?: boolean;
autoFocus?: boolean;
closable?: boolean;
onConfirm?: () => boolean | void | Promise<boolean | void>;
onCancel?: () => boolean | void | Promise<boolean | void>;
}
export interface ModalProgrammaticResult {
action: ModalProgrammaticAction;
trigger: ModalCloseTrigger;
}
export declare class Modal extends RanElement {
static _openStack: Modal[];
static _bodyScrollLockCount: number;
static _bodyOverflow: string;
static _bodyPaddingRight: string;
static _inertSnapshot: Map<HTMLElement, {
inert: boolean;
ariaHidden: string | null;
}>;
_events: EventManager;
_shadowDom: ShadowRoot;
_root: HTMLDivElement;
_mask: HTMLDivElement;
_dialog: HTMLDivElement;
_title: HTMLHeadingElement;
_closeBtn: HTMLButtonElement;
_slot: HTMLSlotElement;
_footer: HTMLElement;
_footerSlot: HTMLSlotElement;
_labelId: string;
_previousActiveElement: Element | null;
_isDialogOpen: boolean;
_scrollLocked: boolean;
_afterOpenTimer: number | null;
_afterCloseTimer: number | null;
static get observedAttributes(): string[];
constructor();
get open(): boolean;
set open(value: boolean | string | null | undefined);
get title(): string;
set title(value: string);
get maskClosable(): boolean;
set maskClosable(value: boolean | string | null | undefined);
get sheet(): string;
set sheet(value: string);
get closeOnEsc(): boolean;
set closeOnEsc(value: boolean | string | null | undefined);
get lockScroll(): boolean;
set lockScroll(value: boolean | string | null | undefined);
get autoFocus(): boolean;
set autoFocus(value: boolean | string | null | undefined);
get closable(): boolean;
set closable(value: boolean | string | null | undefined);
/**
* Headerless mode: drops the title bar and its border, leaving only a floating
* close button (top-right) when `closable`. Suited to content-only dialogs like
* image / diagram lightboxes. The dialog keeps an accessible name via `aria-label`
* (derived from `title`) since the visible `<h3>` title is removed.
*/
get hideHeader(): boolean;
set hideHeader(value: boolean | string | null | undefined);
handlerExternalCss: () => void;
syncTitle: () => void;
syncClosable: () => void;
syncHeader: () => void;
syncFooter: () => void;
getFocusableElements: () => HTMLElement[];
static getTopModal: () => Modal | null;
static pushOpenModal: (modal: Modal) => void;
static removeOpenModal: (modal: Modal) => void;
static syncBackgroundInert: () => void;
static lockBodyScroll: () => void;
static unlockBodyScroll: () => void;
clearAfterTimers: () => void;
getTransitionTimeout: () => number;
emitAfterOpen: () => void;
emitAfterClose: (trigger: ModalCloseTrigger) => void;
trapFocus: (event: KeyboardEvent) => void;
close: (trigger?: ModalCloseTrigger) => void;
openDialog: () => void;
closeDialog: () => void;
onMaskClick: (event: MouseEvent) => void;
onCloseButtonClick: () => void;
onKeydown: (event: KeyboardEvent) => void;
onDocumentFocusIn: (event: FocusEvent) => void;
connectedCallback(): void;
disconnectedCallback(): void;
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
static normalizeProgrammaticOptions: (options?: ModalProgrammaticOptions | string) => ModalProgrammaticOptions;
static open: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
static confirm: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
static info: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
static success: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
static warning: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
static error: (options?: ModalProgrammaticOptions | string) => Promise<ModalProgrammaticResult>;
}
export default Modal;