'How can I make condition for class of x-jet-dialog-modal?

With laravel 8.68 and livewire 2.7 opening modal dialog (which can be used in many cases) I want to change background color/color depending on parameter. I try to change class in <x-jet-dialog-modal definition like :

<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
                    class=" z-50 bg-opacity-100 @if($confirm_action_profile_modal_color === 'danger') personal_danger_text @else personal_text @endif">

But That does not work, and in browser's inspection I see that class in <x-jet-dialog-modal is not rendered,

I try to use alpinejs :

<x-jet-dialog-modal wire:model="confirmActionModalProfileFormVisible"
                    :class=" 'z-50 bg-opacity-100 ' + ( '{{$confirm_action_profile_modal_color }}' == 'danger' ? 'personal_danger_text' : 'personal_text' ) ">

But error was raised :

A non-numeric value encountered (View: my-template.blade.php)

Can I make condition for class of <x-jet-dialog-modal ?

UPDATED # 1: Yes, I have jetstream views published , and I have file resources/views/vendor/jetstream/components/dialog-modal.blade.php, which have default content :

@props(['id' => null, 'maxWidth' => null, 'class' => null])

<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}  class="{{ !empty($class) ? $class : ''}}">
    <div class="px-6 py-4 {{ !empty($class) ? $class : ''}}">
        <div class="text-lg">
            {{ $title }}
        </div>

        <div class="mt-4">
            {{ $content }}
        </div>
    </div>

    <div class="px-6 py-4 text-right {{ !empty($class) ? $class : ' bg-gray-100'}}">
        {{ $footer }}
    </div>
</x-jet-modal>

As I inheret my modal file from it I wonder in which way have I to edit definition of <x-jet-dialog-modal to pass conditional class ?

Thanks in advance!

laravellaravel-livewirejetstream


Solution 1:[1]

you have to publish jetstream views, then edit the file dialog-modal.blade.php and use the slot attributes. Laravel Blade #Slot Attributes

If you want to change something from the modal itself, you would have to edit modal.blade.php

Edit the following line:

    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto">

And do attribute merge Laravel Blade #Deafault/Merged Attributes

Solution 2:[2]

another way will be to edit published JetStream modal window view (resources/views/vendor/jetstream/componets/modal.blade.php) and add {{$attributes['class']}} in class values. After that you can add any custom class or condition when including jetstream modal:

<x-jet-dialog-modal wire:model="myCustomModal" maxWidth="md" class="flex items-center my-custom-class">

and this will be applied on your modal. And now you should be able to use your conditions as well:

<x-jet-dialog-modal wire:model="myCustomModal" maxWidth="md" class="flex items-center my-custom-class @if($confirm_action_profile_modal_color === 'danger') personal_danger_text @else personal_text @endif">

nice example can be seen here: https://floyk.com/en/post/how-to-use-laravel-jetstream-livewire-modal or here: https://floyk.com/en/post/livewire-5-ways-to-call-and-update-value-on-click

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fotrino
Solution 2 Igor Simic

Related Questions