Interface DialogOptions

lib/Dialog.ts:172–205

/** Options passed to the Dialog constructor */
export interface DialogOptions {
  /** ID that gets added to child element IDs - has to be unique and conform to HTML ID naming rules! */
  id: string;
  /** Target and max width of the dialog in pixels */
  width: number;
  /** Target and max height of the dialog in pixels */
  height: number;
  /** Whether the dialog should close when the background is clicked - defaults to true */
  closeOnBgClick?: boolean;
  /** Whether the dialog should close when the escape key is pressed - defaults to true */
  closeOnEscPress?: boolean;
  /** Whether the dialog should be destroyed when it's closed - defaults to false */
  destroyOnClose?: boolean;
  /** Whether the dialog should be unmounted when it's closed - defaults to true - superseded by destroyOnClose */
  unmountOnClose?: boolean;
  /** Whether all listeners should be removed when the dialog is destroyed - defaults to true */
  removeListenersOnDestroy?: boolean;
  /** Whether the dialog should have a smaller overall appearance - defaults to false */
  small?: boolean;
  /** Where to align or anchor the dialog vertically - defaults to "center" */
  verticalAlign?: "top" | "center" | "bottom";
  /** Strings used in the dialog (used for translations) - defaults to the default English strings */
  strings?: Partial<typeof defaultStrings>;
  /** CSS to apply to the dialog - defaults to the {@linkcode defaultDialogCss} */
  dialogCss?: string;
  /** Called to render the body of the dialog */
  renderBody: () => HTMLElement | Promise<HTMLElement>;
  /** Called to render the header of the dialog - leave undefined for a blank header */
  renderHeader?: () => HTMLElement | Promise<HTMLElement>;
  /** Called to render the footer of the dialog - leave undefined for no footer */
  renderFooter?: () => HTMLElement | Promise<HTMLElement>;
  /** Called to render the close button of the dialog - leave undefined for no close button */
  renderCloseBtn?: () => HTMLElement | Promise<HTMLElement>;
}

/** Creates and manages a modal dialog element */
export class Dialog extends NanoEmitter<{