@exmg/exm-dialogs
v1.0.7
Published
## Exmg Dialogs
Downloads
335
Maintainers
Keywords
Readme
<exm-dialogs>
Exmg Dialogs
Form Dialog
Form dialogs will handle styling, validation and make form submit easier. Also a loading indicator will be shown during the submit handling.
Example of implementation in html
<exm-dialog-form title="Create account" button-copy="Save" @submit="${this.createAccount}">
<paper-input name="name" label="Name" required></paper-input>
<paper-input name="password" label="Password" required></paper-input>
</exm-dialog-form>
Example of how submit could be handled
createAccount(e) {
const {detail, target} = e;
const {name, password} = detail;
try {
// Throw error to simulate error
if(password.length < 6) {
throw Error('User password to simple')
}
// Do server call
// notify dialog successfull
target.done();
} catch (error) {
target.handleError(error);
}
}
Info Dialog
Info dialogs will handle styling, and content. Will throw a done
event once the user clicked the button.
Example of implementation in html
<exm-dialog-info button-copy="Continue" @done="${this.done}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
condimentum.
</p>
</exm-dialog-info>
Example of implementation in html without close button option
<exm-dialog-info button-copy="Continue" hide-close-button @done="${this.done}">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
condimentum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet pharetra turpis. Nullam tincidunt aliquet
condimentum.
</p>
</exm-dialog-info>
Example of how done could be handled
done(e) {
const {target} = e;
// Closes the dialog ...
target.close();
}
Confirmation Dialogs
Easy way to display a pre styled confirmation dialog.
Example
<exm-dialog-confirm
title="Confirmation"
message="Are you sure you want to delete this item?"
button-copy="Delete account"
@submit="${this.deleteItem}"
>
</exm-dialog-confirm>
deleteItem(e) {
const {target} = e;
try {
// Do server call
// notify dialog successfull
target.done();
} catch (error) {
target.error(error);
}
}
API
<exm-dialog-form />
| Property | Usage |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------- |
| title: string | Displayed title of the Dialog |
| button-copy: string | Displayed text of the submit button |
| hide-close-button: boolean | If set to true
the dialog will not show a close icon |
| error-message: string | Error text to display when the form is in error state |
| @submit | Event thrown when hitting the submit button, will serialize the form and return values in detail of the event |
| @cancel | Event thrown when hitting the cancel button |
<exm-dialog-confirm />
| Property | Usage |
| ---------------------------- | ------------------------------------------------------------------------------------------------------------- |
| title: string | Displayed title of the Dialog |
| message: string | Displayed message of the Dialog |
| button-copy: string | Displayed text of the submit button |
| hide-close-button: boolean | If set to true
the dialog will not show a close icon |
| error-message: string | Error text to display when the form is in error state |
| @submit | Event thrown when hitting the submit button, will serialize the form and return values in detail of the event |
| @cancel | Event thrown when hitting the cancel button |
<exm-dialog-confirm />
This element exposes a slot to wrap up any content you put in.
| Property | Usage |
| ---------------------------- | -------------------------------------------------------- |
| button-copy: string | Displayed text of the submit button |
| hide-close-button: boolean | If set to true
the dialog will not show a close icon |
| button-secondary: boolean | If set to true
the button will be with secondary theme |
| @done | Event thrown when hitting the main button |