The Hyvä confirmation dialogs are built on top of the modal dialogs.
Everything written previously about modal dialogs also applies to confirmation dialogs.
Available since 1.1.13
Confirmation dialogs are available since version 1.1.13 of
Hyva_Theme. If you are using an older version, be sure to upgrade the theme module.
To create a confirmation modal instance in PHP, use the
confirm method on the modal view model:
Then customize the dialog as needed just like a regular Hyvä modal.
The default confirmation modal template is
To trigger some action after if the OK button was clicked, chain it to the
show() method with a promise.
If the callback retrieves a true value, the user confirmed the dialog. If the callback retrieves a falsy value, the confirmation dialog was cancelled.
This simple example logs
Cancel to the browser console, depending on the users selection.
I a real project, the callback would probably be a method on an Alpine.js component, or maybe dispatch an event, rather than this one line example.
Customizing Confirmation Dialogs
Four confirmation specific methods are available in addition to the same methods as modal dialogs:
The title for the confirmation dialog is specified when the
confirm('the title') method is called on the modal view model.
But it can also be specified using the
The title is escaped by the confirmation dialog template:
Specifying a confirmation dialog details is optional.
If details are specified, they are rendered between the title and the buttons.
The details are not escaped, so they may contain HTML.
The confirmation modal instance also has a method
setContent() method is used to specify the
complete contents, and, if set, will cause the template to not be rendered.
This allows for a large degree of customizability, but can be confusing.
As a rule of thumb, be sure to use
setDetails() on confirmation dialogs.
The default label for the confirm button is "OK". This can be changed using the
The button labels are escaped during rendering:
The default label for the cancel button is "Cancel". This can be changed using the
The button labels are escaped when rendered:
Changing the confirmation template file
Or course the confirmation dialog templates can be customized using a theme override, like any other template.
However, if a unique template is required for a specific dialog, it can be set with the
Dialogs with more than two choices
It is possible to create custom confirmation dialogs with more than two buttons.
The value the
show promise resolves to is the argument passed to the
This allows building dialogs with more than two choices using the modal view model.
This requires a custom template.
Be sure to pass distinct values to the
hide() method for each button to indicate the users choice.
<button @click="hide('a')" type="button" class="btn"> <?= $escaper->escapeHtml(__('Option A')) ?> </button> <button @click="hide('b')" type="button" class="btn"> <?= $escaper->escapeHtml(__('Option B')) ?> </button> <button x-focus-first @click="hide('c')" type="button" class="btn btn-primary"> <?= $escaper->escapeHtml(__('Option C')) ?> </button>
Confirmation dialogs without the view model (Alpine.js only)
It is possible to use the Hyvä modals without the PHP view model to create confirmation dialogs.
<div x-data="hyva.modal()"> <button @click="show($event).then(result => console.log(result))" type="button" class="btn mt-2">Show</button> <div x-cloak x-spread="overlay()" class="fixed inset-0 flex items-center justify-center text-left bg-black bg-opacity-50"> <div x-ref="dialog" role="dialog" aria-labelledby="the-label" class="inline-block max-h-screen overflow-auto bg-white shadow-xl rounded-lg p-10 text-gray-700"> <div id="the-label">Are you sure?</div> <div>Think before you click...</div> <div class="mt-20 flex justify-between gap-2"> <button @click="cancel" type="button" class="btn">Cancel</button> <button x-focus-first @click="ok" type="button" class="btn btn-primary">OK</button> </div> </div> </div> </div>
Be sure to use a unique
x-ref name if there is more than one modal dialog on the page.
What follows is a collection of examples.
Confirmation dialog with only details
Confirmation dialog with title and details
<div x-data="hyva.modal()"> <?php $confirmation = $modalViewModel->confirm(__('Are you sure?')) ->withDetails('<em>Think before clicking.</em>') ?> <button @click="<?= $confirmation->getShowJs() ?>.then(result => console.log(result))" type="button" class="btn mt-2">Show</button> <?= $confirmation ?> </div>
Confirmation dialog with custom button labels
<div x-data="hyva.modal()"> <?php $confirmation = $modalViewModel->confirm(__('Is that all?')) ->withOKLabel(__('Yes')) ->withCancelLabel(__('No')) ?> <button @click="<?= $confirmation->getShowJs() ?>.then(result => console.log(result))" type="button" class="btn mt-2">Show</button> <?= $confirmation ?> </div>
Under the hood:
For further information to see how the modal system works under the hood, please check out the following PHP classes: