Dialogs

To simplify usage of Modal UI components, there is ModalService available for you to use.

Usage

Include the ModalContainer component in your root layout (the one that contains the body tag):

<!DOCTYPE html>
<html lang="en">

<head>
    ...
</head>

<body>
    <slot></slot>
    <ModalContainer />
    <ViewiAssets />
</body>

</html>

Inject ModalService in your component.

Example:

class ListPage extends BaseComponent
{
    public function __construct(
        private ModalService $modal,
        private HttpClient $http
    ) {}

    public function onDelete($item)
    {
        $this->modal->confirm(
            "Are you sure you want to delete this item?",
            function () use ($item) {
                $this->deleteItem($item);
            }
        );
    }

    private function deleteItem($item)
    {
        $this->http->delete("/api/admin/item/{$item->Id}")
            ->then(function () {
                // item has been deleted
            });
    }
}

Methods

confirm(string $title, ?callable $onConfirm = null, ?callable $onCancel = null)

Shows a confirmation dialog. Use it to make sure the user confirms an important action. The dialog has a "Confirm" button and a "No, cancel" button. Closing the dialog with the close icon counts as cancel.

Parameters

title - The message (confirmation question) that you want to display.

onConfirm - (optional), callback that runs when the user confirms.

onCancel - (optional), callback that runs when the user cancels or closes the dialog.