createModal<
Data>(config?):ModalWidget<Data>
Creates a new modal widget instance.
• 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
getModalDefaultConfig():
ModalProps<any>
Retrieve a shallow copy of the default modal config
ModalProps<any>
the default modal config
Interface representing the API for a 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>
Type of the parameter of onBeforeClose.
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.
constmodalCloseButtonClick: typeofmodalCloseButtonClick
Value present in the result property of the onBeforeClose event and returned by the open method, when the modal is closed by a click on the close button.
Represents the context for a modal component.
• 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
Directives of the modal widget.
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.
constmodalOutsideClick: typeofmodalOutsideClick
Value present in the result property of the onBeforeClose event and returned by the open method, when the modal is closed by a click inside the viewport but outside the modal.
Interface representing the properties for a modal component.
• 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 : nullcontentData:
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
Represents the state of a modal component.
• 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 : nullcontentData:
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
ModalWidget<
Data>:Widget<ModalProps<Data>,ModalState<Data>,ModalApi<Data>,ModalDirectives>
Represents a modal widget with specific data type.
• Data
The type of data that the modal widget will handle.
openModal<
Data>(options,context?):Promise<any>
Opens a modal dialog with the specified options.
• Data
The type of data that the modal will handle.
• options: Partial<ModalProps<Data>>
The options to configure the modal.
• context? = {}
Optional context to pass to the modal.
• context.context?: Map<any, any>
A map of context values to pass to the modal.
Promise<any>
A promise that resolves when the modal is closed.
const result = await openModal<MyDataType>({
title: 'My Modal Title',
content: 'This is the content of the modal.'
});
console.log(result);