Livewire Components

Pedro Henrique — Thu, 22 Jul 2021 12:45:58 +0000

Starting the tallstack development sometimes is exhaustive, create all forms components, buttons, cards.... Wireui has a lot of blade components ready to use.

Advantages:
Notifications, Dialogs, modals and form components

Enjoy the livewire components

https://github.com/PH7-Jack/wireui

Livewire UI Components

Pedro Henrique — Wed, 16 Sep 2020 01:17:28 +0000

I created this package to make the development with livewire simpler and faster, this project will be a library of components and some cool features for projects with livewire

Still in development, some things can be modified

Links:
https://github.com/PH7-Jack/wireui

Global livewire notifications with SweetAlert

Pedro Henrique — Wed, 19 Aug 2020 13:07:06 +0000

EDIT: I created a new idea for this, go to https://github.com/PH7-Jack/wireui to know

It is normal in all software after performing an action, showing a confirmation message or even a warning. With Livewire software development is simpler in some ways, but showing notifications can be a bit of a chore at first. With that, we can take advantage of what Livewire has in its ecosystem for our benefit.
Let's use Livewire events

Step 1

Add listeners

In this step, we will prepare the project to listen to livewire events
In your global layout file, place the following listener (in my case it's resources/views/components/layouts/base.blade.php):

<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" />
...
</head>

...
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
 <script>
        const SwalModal = (icon, title, html) => {
            Swal.fire({
                icon,
                title,
                html
            })
        }

        const SwalConfirm = (icon, title, html, confirmButtonText, method, params, callback) => {
            Swal.fire({
                icon,
                title,
                html,
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText,
                reverseButtons: true,
            }).then(result => {
                if (result.value) {
                    return livewire.emit(method, params)
                }

                if (callback) {
                    return livewire.emit(callback)
                }
            })
        }

        const SwalAlert = (icon, title, timeout = 7000) => {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: timeout,
                onOpen: toast => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            Toast.fire({
                icon,
                title
            })
        }

        document.addEventListener('DOMContentLoaded', () => { 
            this.livewire.on('swal:modal', data => {
                SwalModal(data.icon, data.title, data.text)
            })

            this.livewire.on('swal:confirm', data => {
                SwalConfirm(data.icon, data.title, data.text, data.confirmText, data.method, data.params, data.callback)
            })

            this.livewire.on('swal:alert', data => {
                SwalAlert(data.icon, data.title, data.timeout)
            }) 
        })
    </script>

These methods and listeners will show confirmation notifications or confirmation alerts globally in your project, being able to broadcast directly from Livewire

How to fire theses functions?

In every Livewire component you can send events using the code below