Add support for Livewire

[mkocansey]

Considering the popularity of Livewire now, it makes sense to add support for Livewire in BladewindUI

[jenkinsakp]

since Livewire uses blade components i think it will be compatible

[JakeOcean]

I published the components and then added {{ $attributes }} to the checkbox and toggle switch and I was able to use wire:model="whatever" just fine

[haugen86]

Hey @mkocansey have you started thinking about how you would want to solve this? We're using the TALL stack, so we're in need of this. If wanted, I could start looking into this, since we most likely are forced to solve this in our local bladewind components anyway

[mkocansey]

Hey @haugen86 haven't given this much thought--yet. Any help on this will be greatly appreciated. The last comment from @JakeOcean could provide some pointers.

[elnasnato]

Every UI library at first always have an issue that when processing forms in the modal, so please be careful. thanks.

[mkocansey]

Thanks @elnasnato for the heads up. Are you talking in relation to Livewire?

[Smurrlawa]

@JakeOcean
Oh yes that's actually a great solution!
I tried to make a pseudo wire_change= as an prop but your solution is great!

I also had some difficulties on using the modals and rendering them with dynamic content. Often they would just close immediately after popping up. (e.g. an "are you sure to delete the article somedynamicarticlename?")

[cod-iko]

Laravel 11 + Livewire 3

I've struggled with use some components with JS assets, like select on my project.
Specifically, I used to wire:navigation, and change livewire components by state, and i'ts some of serious issues with redeclaration of JS classes. Maybe some of you help this, I solve it with
1.

@assets
    <script src="{{ asset('vendor/bladewind/js/select.js') }}"></script>
@endassets

and
2.

@script
<script>
    window.setupBladewindSelect = function(elementId, placeholder) {

        const element = document.querySelector(`[name="${elementId}"]`);
        if (!element) {
            return null;
        }

       if (window['bw_' + elementId]) {
            delete window['bw_' + elementId];
        }
....
    }

    function initializeSelect() {
        const currentElementId = {!! json_encode($input_name) !!};
        const currentElement = document.querySelector(`[name="${currentElementId}"]`);
        
        if (currentElement && typeof BladewindSelect !== 'undefined') {
            window.setupBladewindSelect(currentElementId, {!! json_encode($placeholder) !!});
        }
    }

    function initializeSelect()

    document.addEventListener('livewire:navigated', () => {`
        window.requestAnimationFrame(initializeSelect);
    }

</script>
@endscript

Livewire decide then where and when scripts do jobs