laravel-modals-with-livewire/

[utterances-bot]

How to build modals with Laravel and Livewire

Learn how to use the Livewire UI modal package to build modals for your Laravel application.

https://philo.dev/laravel-modals-with-livewire/

[takeshiyu]

Awesome ! It really save my life and make live easier !

[mrmercan]

Hi Philo, How do we change the modal size? By the way, thanks for the package.

[takeshiyu]

Does have some doc to explain how to customize default modal's markup ?

[PhiloNL]

@s12i if you run php artisan vendor:publish --tag=livewire-ui:views the markup for the modal will be published to your resources/views/vendor directory. Here you can make any changes you want.

[PhiloNL]

@mrmercan it's not possible just yet, but it's something I'm working on.

[lochinvarwest]

When using Modules (i.e. psr-4 namespaces in composer.json) I register the modules livewire components in the module's ServiceProvider. So my render function looks something like: return view(module::livewire.moduleModal); However, with the Livewire UI modal's I'm not able to open them with

Open Modal

Is this possible?

[lochinvarwest]

Apologies...: with <button wire.click="$emit('openModal', 'moduleModal')">Open Modal</button>

[lochinvarwest]

Apologies again, please ignore. I had legacy x-show statements lurking.

[whoisthisstud]

Philo, is it possible to overlay the child modal over the parent? I would like to have some type of visual reference of an open child modal over its parent.

[PhiloNL]

@whoisthisstud, that's not possible right now, but feel free to create a PR to add this functionality.

[lairg99]

Hey Philo, I still enjoy working with your package! :-) Say, if a user has slow internet (e.g. mobile data), it takes a while with the modals. Is there already a way to just add a spinner?

[PhiloNL]

Hey @lairg99 That's great to hear! I think you can use Livewire's loading directive:

<button>
  <span wire:loading>
   <!-- spinner -->
  </span>
</button>

[simtabi]

Hi Pholo, Great package! Any idea on achieving this package with bootstrap?

[PhiloNL]

Hi @simtabi, Maybe somewhere in the future.

[simtabi]

Bumped on this error:

Illuminate\Contracts\Container\BindingResolutionException Unable to resolve dependency [Parameter #0 [ $component ]] in class LivewireUI\Modal\Modal

[lairg99]

<span wire:loading>
   <!-- spinner -->
  </span>

Thanks for your reply! It looks like this idea doesn't work when I call modals via a JS event.

<x-button onclick="Livewire.emit('openModal', 'user.create')">
    New user
</x-button>

[benaf1]

After a submit on the modal is there a way to refresh the underlying blade template?

[PhiloNL]

@benaf1 yes, you can emit an event (closeModalWithEvents) to reload the underlying blade template.

[simtabi]

@PhiloNL I have also learnt that this package may not support use when doing package development, and it looks for livewire classes in this path "app/Http/Livewire"

[PhiloNL]

@simtabi I can confirm this works fine with packages as well. Just make sure it matches your Livewire component name.

https://laravel-livewire.com/docs/2.x/package-dev

[locopine]

@PhiloNL Congratulations on the excellent package. When implementing in my solution I ran into an exception when calling a component from a subdirectory. eg:

• component created with: php artisan make:livewire Register/create

• component call:

  <button wire:click="$emit('openModal','register.create')"
      class="bg-indigo-500">
  {{ __('New Register) }}
  </button>

Exception thrown:

Exception [App\Http\Livewire\RegisterCreate] does not implement [LivewireUI\Modal\Contracts\ModalComponent] interface.

[PhiloNL]

Hi @locopine, You need to adjust the component Register/create and make sure it extends the LivewireUI\Modal\ModalComponent class.

[vladrusu]

Hi! Is it possible to open a child modal based on a "dynamic" value set in first modal? For example, if I input Age = 20 in first modal, I want to dynamically pass Age = 20 to second modal. Currently, I saw that is possible to give a 3rd parameter to openModal like: @json(["name" => "Philo"])

[PhiloNL]

Hi @vladrusu Yes, this is possible if you have this value available somewhere. So from your first modal, you can open a new modal and pass a user id for example:

<button wire:click='$emit("openModal", "edit-user", {{ json_encode(['user' => $user->id, 'age' => 20] }})' type="button">Edit User</button>

From your second modal you can now access the user and age from the mount method:

public function mount(User $user, $age)

[Akhmami]

Hi @PhiloNL I use input component <x-input :value="$user->name" /> in the edit modal, but the value is not displayed and I try to use the usual input <input value="{{ $user->name }}" it is displayed.

this is component input.blade.php file

@props([
'disabled' => false,
'type' => 'text',
'label',
'name',
'value'
])

<div>
    @if (!empty($label))
    <label class="block text-sm font-medium text-gray-700">{{ $label }}</label>
    @endif
    <div class="mt-1 relative rounded-md shadow-sm">
        <input type="{{ $type }}" wire:model="{{ $name }}" {!! $attributes->merge(['class' => 'block w-full focus:outline-none sm:text-sm rounded-md' ]) !!}
        value="{{ !empty($value) ? $value : '' }}"
        {{ $disabled ? 'disabled' : '' }}>
    </div>
</div>

i use input component outside modal and it works fine.

[imprfekt]

@PhiloNL, I'm trying to add a js plugin (social sharing) to the modal. Without livewire and modals, I would add a Githubissues.

Githubissues is a development platform for aggregating issues.