after many checking the package readme as how can i install and use it into laravel. after installing the package and adding some code into project like with what we see in read me, clicking on button doesn't show any modal

Good extension.

offcanvas has similar functionality. can add it here or make another similar extension.

also sometimes multimodal is needed. no plans to do?

Double checked some of your existing modals and even tried adding autofocus to an input, but no dice. I think there needs to be a way to autofocus on the first input opening a form within a modal. Thoughts? I opened it here because i figured it would apply to this package and your ui package.

Hello,

Do you plan to have any implementation of show, create & edit routes ? Today, when we click on "read" or "edit" it's a javascript-button . If we refresh the page, we loose the popup (going back to the main page). Could be useful to:

• when we click, the url is changing (History.pushState())
• when we refresh the page (or we point directly to /model/3/read), the corresponding modal is opened again

Right now, I did something like that:

class Index extends Component
{
    public $entity;
    public $action;

    public function route()
    {
        return Route::get('member/tn-members/{entity?}/{action?}', static::class)
            ->name('member.tn-members')
            ->middleware('auth');
    }

    public function loaded() {
        if( $this->entity->exists ) {
            switch($this->action) {
                case 'show':
                    $this->emit('showModal', 'member.tn-members.read', $this->entity->id);
                    break;

                case 'edit':
                    $this->emit('showModal', 'member.tn-members.save', $this->entity->id);
                    break;

                case 'create':
                    $this->emit('showModal', 'member.tn-members.save');
                    break;
            }
        }
    }

    public function mount($entity = null, $action = 'show') {
        $this->entity = TnMember::findOrNew($entity);
        $this->action = $action;
    }
    // [...]
}

And the view:

@section('title', __('Tn Members'))
<div wire:init="loaded">

1. Creating two optional parameters /{entity?}/{action?}
2. Storing the two parameters
3. Creating a wire:init + the method associated
4. Emit showModal depending of the parameters

(I also tried with addEventListener('contentChanged') but we still need the wire:init)

Now, when I use the url the modal are automatically opening (like trello cards)

There is maybe another way to do it :)

For the other point (History.pushState), it's another story. I don't know if the best is to change a little bit the emit parameters ? pass the route directly ? add extra parameter like data-href ?

wire:click="$emit('showModal', 'member.tn-members.read', route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']), {{ $tnMember->id }})"

or

<x-bs::button icon="eye" :title="__('Read')" color="outline-primary" size="sm"
  data-href="{{ route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']) }}"
  wire:click="$emit('showModal', 'member.tn-members.read', $event.target.getAttribute('data-href'), {{ $tnMember->id }})"/>

or manipulate via Modals::showModal, but need to handle create(=save & no id)/edit(=save & id)/show(=read) or let the Read/Save component handle the route event and raise an $emit('changeUrl') ?

(Interesting article with potential solution about the changeUrl event: https://github.com/livewire/livewire/issues/399)

Hello,

I use this modal component, and I have some possible improvements:

modal.js > use getOrCreateInstance instad of new Modal.

This will prevent to have several overlay displayed (without possibility to clean them), if we have modal with modal link inside or if we want to do some navigation.

Livewire.on('showBootstrapModal', () => {
    let modal = Modal.getOrCreateInstance(modalsElement);
    if( modal ) {
        modal.show();
    }
});

modal.js > protect modal.hide

If we trigger event hideModal, and this one does not exists ... there is an error. Linked to next improvement too.

Livewire.on('hideModal', () => {
    let modal = Modal.getInstance(modalsElement);
    if( modal ) {
        modal.hide();
    }
});

Crud: reverse the two emits

Currently we have $this->emit('$refresh'); $this->emit('hideModal'); but I think it could be better to have:

        $this->emit('$refresh');
        $this->emit('hideModal');

Indeed, this will prevent the system to not refresh (i.e.: the list), if the modal does not exists (i.e.: trigger event via another Component) and/or protect the modal.hide().

Crud: modal-body

I created a system to change the modal in "columns", and I had some issues when I tried to play with the layout & css (flex, overflow). To provide more flexibility, could it be possible to separate the modal-body and the content ?

        <div class="modal-body">
            <div class="d-grid gap-3"></div>
        </div>

If everything is on the same tag, the flex propriety of the d-grid is filling all the height of the modal-body, and the inputs are like that :

LaravelLivewireScripts directive has been added. Users can now use @LaravelLivewireScripts in the App template and it will automatically include JavaScript files

Any chance you could add support for bootstrap 4?

It seems all that needs to change is the javascript that you import:

// modals-bs4.js
let modalsElement = document.getElementById('laravel-livewire-modals');

$(modalsElement).on('hidden.bs.modal', () => {
  Livewire.emit('resetModal');
});

Livewire.on('showBootstrapModal', () => {
  $(modalsElement).modal('show');
});

Livewire.on('hideModal', () => {
  $(modalsElement).modal('hide');
});

Thanks, love the package!

Some modals can be pretty heavy to load / setup, thus I like to display a loader on the button that triggers a modal.

I am guessing this won't be possible here, as wire:target has nothing to really target. Right?