WireUi

The WireUI Dialog API is a versatile tool designed to handle a wide range of alert and confirmation dialog requirements. These dialogs seamlessly integrate with Livewire events, making them an ideal choice for interactive user experiences. With this API, you can tailor dialogs to your specific needs, customizing elements such as titles, descriptions, and even incorporating your own code within designated slots. This flexibility empowers you to create engaging and user-friendly dialog interfaces for your web applications.

Example use cases:

Display an alert for successful actions.
Request user confirmation for a specific action.

First Steps

Firstly, integrate the component into the layout.

Information!

The dialog offers a comprehensive range of modal options, allowing you to define settings either globally or for individual elements.

 1<html>
 2 
 3    <body>
 4        <x-dialog />
 5        or
 6        <x-dialog z-index="z-50" blur="md" align="center" />
 7        ...
 8    </body>
 9 
10</html>

JavaScript Dialog

Dialogs can be easily generated using JavaScript.

 1<x-button
 2    x-on:click="$wireui.dialog({
 3    icon: 'success',
 4    title: 'Success Dialog!',
 5    description: 'This is a description.',
 6})"
 7    positive>
 8    Success Dialog
 9</x-button>
10 
11<x-button
12    x-on:click="$wireui.dialog({
13    icon: 'error',
14    title: 'Error Dialog!',
15    description: 'Woops, its an error.',
16})"
17    negative>
18    Error Dialog
19</x-button>
20 
21<x-button
22    x-on:click="$wireui.dialog({
23    icon: 'info',
24    title: 'Info Dialog!',
25    description: 'This is a description.',
26})"
27    info>
28    Info Dialog
29</x-button>

Livewire Dialog

Dialogs can be directly generated from a Livewire Component.

 1namespace App\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Traits\WireUiActions;
 5 
 6class MyComponent extends Component
 7{
 8    use WireUiActions;
 9 
10    public function infoDialog(): void
11    {
12        $this->dialog()->show([
13            'icon' => 'info',
14            'title' => 'Info Dialog!',
15            'description' => 'This is a description.',
16        ]);
17    }
18 
19    public function errorDialog(): void
20    {
21        $this->dialog()->show([
22            'icon' => 'error',
23            'title' => 'Error Dialog!',
24            'description' => 'Woops, its an error.',
25        ]);
26    }
27 
28    public function successDialog(): void
29    {
30        $this->dialog()->show([
31            'icon' => 'success',
32            'title' => 'Success Dialog!',
33            'description' => 'This is a description.',
34        ]);
35    }
36}

 1<x-button wire:click="successDialog" positive>
 2    Success Dialog
 3</x-button>
 4 
 5<x-button wire:click="errorDialog" negative>
 6    Error Dialog
 7</x-button>
 8 
 9<x-button wire:click="infoDialog" info>
10    Info Dialog
11</x-button>

Confirm Dialog

If you need to request user confirmation for a specific action, the dialog API provides a dedicated method for this purpose. Refer to the example below for guidance.

You can generate a confirmation notification using the Livewire Component.

 1namespace App\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Traits\WireUiActions;
 5 
 6class MyComponent extends Component
 7{
 8    use WireUiActions;
 9 
10    public function confirmSimple(): void
11    {
12        $this->dialog()->confirm([
13            'title' => 'Are you Sure?',
14            'description' => 'Save the information?',
15            'acceptLabel' => 'Yes, save it',
16            'method' => 'save',
17            'params' => 'Saved',
18        ]);
19    }
20 
21    public function confirmFull(): void
22    {
23        $this->dialog()->confirm([
24            'title' => 'Are you Sure?',
25            'description' => 'Save the information?',
26            'icon' => 'question',
27            'accept' => [
28                'label' => 'Yes, save it',
29                'method' => 'save',
30                'params' => 'Saved',
31            ],
32            'reject' => [
33                'label' => 'No, cancel',
34                'method' => 'cancel',
35            ],
36        ]);
37    }
38}

1<x-button wire:click="confirmSimple" info>
2    Confirm Simple
3</x-button>
4 
5<x-button wire:click="confirmFull" info>
6    Confirm Full
7</x-button>

Generate a confirmation notification using JavaScript.

 1<x-button
 2    x-on:click="$wireui.confirmDialog({
 3    title: 'Are you Sure?',
 4    description: 'Save the information?',
 5    acceptLabel: 'Yes, save it',
 6    method: 'save',
 7    params: 'Saved',
 8})"
 9    info>
10    Confirm Simple
11</x-button>
12 
13<x-button
14    x-on:click="$wireui.confirmDialog({
15    title: 'Are you Sure?',
16    description: 'Save the information?',
17    icon: 'question',
18    accept: {
19        label: 'Yes, save it',
20        execute: () => window.$wireui.notify({
21            'icon': 'success',
22            'title': 'You confirmed',
23        })
24    },
25    reject: {
26        label: 'No, cancel',
27        execute: () => window.$wireui.notify({
28            'icon': 'error',
29            'title': 'You not confirmed',
30        })
31    }
32})"
33    info>
34    Confirm Full
35</x-button>

Confirm Directive

Alternatively, you can employ an HTML directive to construct a confirmation dialog. Please note that Blade components do not support @bladeDirectives.

Instead, you can implement them within an Alpine.js component.

1<div x-data="{ title: 'Sure Delete?' }">
2    <x-button warning label="Delete"
3        x-on:confirm="{
4            title,
5            icon: 'warning',
6            method: 'delete',
7            params: 1
8        }" />
9</div>

Alternatively, you can employ it within pure HTML.

1<x-button warning label="Delete"
2x-on:confirm="{
3    title: 'Sure Delete?',
4    icon: 'warning',
5    method: 'delete',
6    params: 1
7}" />

Dialog Events

Dialogs can feature three distinct events: onClose, onDismiss, and onTimeout. Each of these events will trigger when their respective conditions are met.

Events:

The onClose event is triggered whenever the dialog is closed, whether it's due to a timeout, user-initiated closure, or clicking an action.
The onDismiss event is activated when the user dismisses the dialog.
The onTimeout event is initiated each time the dialog's timer expires.

You can establish events in JavaScript by utilizing closures.

1{
2    onClose: () => alert('onClose is fired'),
3    onDismiss: () => alert('onDismiss is fired'),
4    onTimeout: () => alert('onTimeout is fired'),
5}

Alternatively, you can employ these events to trigger actions on the Livewire Component, in which case the component ID is essential.

 1window.$wireui.dialog({
 2    ...
 3    onClose: {
 4        method: 'firedEvent',
 5        params: 'onClose'
 6    },
 7    onDismiss: {
 8        method: 'firedEvent',
 9        params: { event: 'onDismiss'}
10    },
11    onTimeout: {
12        method: 'firedEvent',
13        params: ['onTimeout', 'more value']
14    },
15}, livewireComponentId)

Events can also serve to facilitate notifications generated by the Livewire Component.

 1namespace App\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Traits\WireUiActions;
 5 
 6class MyComponent extends Component
 7{
 8    use WireUiActions;
 9 
10    public function save(): void
11    {
12        $this->dialog()->show([
13            ...
14 
15            'onClose' => [
16                'method' => 'firedEvent',
17                'params' => 'onClose',
18            ],
19            'onDismiss' => [
20                'method' => 'firedEvent',
21                'params' => ['event' => 'onDismiss'],
22            ],
23            'onTimeout' => [
24                'method' => 'firedEvent',
25                'params' => ['onTimeout', 'more value'],
26            ],
27        ]);
28    }
29}

Custom Dialog

You have the flexibility to create dialogs with custom titles, descriptions, or include any code within the designated slot.

 1namespace App\Livewire;
 2 
 3use Livewire\Component;
 4use WireUi\Traits\WireUiActions;
 5 
 6class MyComponent extends Component
 7{
 8    use WireUiActions;
 9 
10    public function customDialog(): void
11    {
12        $this->dialog()->id('custom')->show([
13            'icon' => 'question',
14        ]);
15    }
16}

 1<x-dialog id="custom" title="User information" description="Complete your profile, give your name">
 2    <x-input label="What's your name?" placeholder="your name bro" x-model="name" />
 3</x-dialog>
 4 
 5<x-button wire:click="customDialog" info>
 6    Show via Livewire
 7</x-button>
 8 
 9<x-button
10    x-on:click="$wireui.confirmDialog({
11    id: 'custom',
12    icon: 'question',
13    accept: {
14        label: 'Yes, save it',
15        execute: () => window.$wireui.notify({
16            'icon': 'success',
17            'title': 'Profile name saved',
18            'description': `Good by, ${name}`,
19        })
20    },
21    reject: {
22        label: 'No, cancel',
23        execute: () => window.$wireui.notify({
24            'icon': 'error',
25            'title': 'You not confirmed',
26            'description': `Good by, ${name}`,
27        })
28    }
29})"
30    info>
31    Show via Alpine
32</x-button>