API modal

• Data

• config?: PropsConfig<ModalProps<Data>>

config of the modal, either as a store or as an object containing values or stores.

ModalWidget<Data>

a new modal widget instance

ModalProps<any>

the default modal config

• Data

The type of data that the modal will handle.

• props: Partial<ModalProps<Data>> & RefAttributes<ModalApi<Data>>

The properties for the Modal component.

Element

The rendered Modal component.

• Data

The type of data associated with the modal.

patch: (parameters) => void

Method to change some modal properties.

Modify the parameter values, and recalculate the stores accordingly

• parameters: Partial<ModalProps<Data>>

void

close(result?): void

Closes the modal with the given result.

• result?: any

result of the modal, as passed in the result property of the event passed to the onBeforeClose event handler (and possibly changed by it) and resolved by the promise returned by the open method.

void

open(): Promise<any>

Opens the modal and returns a promise that is resolved when the modal is closed. The resolved value is the result passed to the close method and possibly changed by the onBeforeClose event handler

Promise<any>

cancel: boolean

Whether to cancel the close of the modal. It can be changed from the onBeforeClose event handler.

result: any

Result of the modal, which is the value passed to the close method and later resolved by the promise returned by the open method. If needed, it can be changed from the onBeforeClose event handler.

• Data

The type of data associated with the modal.

api: ModalApi<Data>

all the api functions to interact with the widget

directives: ModalDirectives

directives to be used on html elements in the template of the widget or in the slots

state: ModalState<Data>

the state of the widget

• Data

The type of data used in the modal context.

• slotContext: ModalContext<Data>

The context object containing the state and directives for the modal.

Element

The JSX element representing the modal header.

• Data

The type of the data used in the modal context.

• slotContext: ModalContext<Data>

The context containing the state and props for the modal slots.

Element

The JSX structure for the modal's default slots.

backdropDirective: Directive

Directive to put on the backdrop DOM element.

backdropPortalDirective: Directive

Portal directive to put on the backdrop DOM element.

closeButtonDirective: Directive

Directive that adds all the necessary attributes to the close button

dialogDirective: Directive

Directive to apply to the dialog element when using the native HTMLDialogElement

modalDirective: Directive

Directive to put on the modal DOM element.

modalPortalDirective: Directive

Portal directive to put on the modal DOM element.

• Data

The type of data that the modal will handle.

animated: boolean

Whether the modal and its backdrop (if present) should be animated when shown or hidden.

true

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdrop: boolean

Whether a backdrop should be created behind the modal.

true

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropTransition: TransitionFn

The transition to use for the backdrop behind the modal (if present).

fadeTransition

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

closeOnOutsideClick: boolean

Whether the modal should be closed when clicking on the viewport outside the modal.

true

container: null | HTMLElement

Which element should contain the modal and backdrop DOM elements. If it is not null, the modal and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

modalTransition: TransitionFn

The transition to use for the modal.

fadeTransition

onBeforeClose: (event) => void

Event to be triggered when the modal is about to be closed (i.e. the close method was called).

• event: ModalBeforeCloseEvent

event giving access to the argument given to the close method and allowing to cancel the close process.

void

() => {}

onHidden: () => void

Event to be triggered when the transition is completed and the modal is not visible.

void

() => {}

onShown: () => void

Event to be triggered when the transition is completed and the modal is visible.

void

() => {}

onVisibleChange: (visible) => void

Event to be triggered when the visible property changes.

• visible: boolean

new value of the visible propery

void

() => {}

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

• Data

The type of the data associated with the modal.

ariaCloseButtonLabel: string

Value of the aria-label attribute to put on the close button.

'Close'

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropHidden: boolean

Whether the backdrop is fully hidden. This can be true either because backdrop is false or because visible is false and there is no current transition.

children: SlotContent<ModalContext<Data>>

Body of the modal.

className: string

CSS classes to be applied on the widget main container

''

closeButton: boolean

Whether to display the close button.

true

container: null | HTMLElement

Which element should contain the modal and backdrop DOM elements. If it is not null, the modal and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

contentData: Data

Data to use in content slots

footer: SlotContent<ModalContext<Data>>

Footer of the modal.

fullscreen: boolean

Option to create a fullscreen modal, according to the bootstrap documentation.

false

header: SlotContent<ModalContext<Data>>

Header of the modal. The default header includes title.

hidden: boolean

Whether the modal is fully hidden.

modalElement: null | HTMLElement

DOM element of the modal.

structure: SlotContent<ModalContext<Data>>

Structure of the modal. The default structure uses header, children and footer.

title: SlotContent<ModalContext<Data>>

Title of the modal.

transitioning: boolean

Whether there is an active transition to either display or hide the modal.

visible: boolean

Whether the modal should be visible when the transition is completed.

false

• Data

The type of data that the modal widget will handle.

• Data

The type of data that the modal will handle.

• options: Partial<ModalProps<Data>>

The options to configure the modal.

Promise<any>

A promise that resolves when the modal is closed.