Hello,

I’ve encountered an issue with the Tablar alert component when used in conjunction with Livewire. The alerts do not work properly because Livewire does not perform a full page reload, and flash messages defined with Session::flash() are not available during Livewire's render cycle.

Current Behavior

When a Livewire event generates a flash message (e.g., Session::flash('success', 'Profile updated successfully.');), the message is not displayed in the alert.blade.php component. This happens because Tablar's alert component relies entirely on session data.

Expected Behavior

Tablar alerts should work seamlessly with Livewire, displaying success or error messages dynamically triggered by Livewire events.

Steps to Reproduce

1. Set up a project with Laravel, Tablar, and Livewire.
2. Include the Tablar alert component on the page:

   @include('tablar::common.alert')

3. Generate a Livewire event that uses Session::flash() to set a flash message.
4. Observe that the alert is not displayed on the page.

Temporary Solution

I have implemented a temporary workaround by using Livewire events to dynamically update the DOM via JavaScript. Here's an example:

Modified alert.blade.php:

<div id="livewire-alerts">
    @if(Session::has('message'))
        <div class="alert alert-info" role="alert">
            <div class="text-muted">{{ Session('message') }}</div>
        </div>
    @elseif(Session::has('success'))
        <div class="alert alert-success" role="alert">
            <div class="text-muted">{{ Session('success') }}</div>
        </div>
    @elseif(Session::has('error'))
        <div class="alert alert-danger" role="alert">
            <div class="text-muted">{{ Session('error') }}</div>
        </div>
    @endif

    @if ($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger" role="alert">
                <div class="text-muted">{{ $error }}</div>
            </div>
        @endforeach
    @endif
</div>

<script>
    window.addEventListener('alert', event => {
        const detail = Array.isArray(event.detail) ? event.detail[0] : event.detail;

        const type = detail.type || 'info'; // Tipo di messaggio (info, success, error)
        const message = detail.message || '';

        const alertContainer = document.getElementById('livewire-alerts');
        const alert = document.createElement('div');
        alert.className = `alert alert-${type}`;
        alert.role = 'alert';
        alert.innerHTML = `<div class="text-muted">${message}</div>`;

        alertContainer.appendChild(alert);
        
        setTimeout(() => {
            alert.remove();
        }, 5000);
    });
</script>

Generating the Event in Livewire:

$this->dispatch('alert', [
    'type' => 'success',
    'message' => 'Profile updated successfully.'
]);

Feature Request

It would be helpful if Tablar's alert system could natively support Livewire events. A potential improvement could include adding a built-in JavaScript listener in the default alert component to intercept events emitted by Livewire and display messages dynamically.

Thank you for the amazing work on Tablar and for taking the time to address this issue! 😊