{"ops":[{"insert":"Для начала у вас уже должен быть готовый проект Laravel, хотя бы с одной страницей на которой мы разместим кнопку открытия нашего модального окна.\nУстанавливаем Livewire\ncomposer require livewire/livewire"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Устанавливаем компонент LivewireUI Modal\ncomposer require livewire-ui/modal"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Публикуем модульный шаблон\nphp artisan vendor:publish --tag=livewire-ui-modal-views"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Создаем модель\nphp artisan make:livewire ModalContact"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"white"},"insert":" "},{"insert":"\nРедактируем "},{"attributes":{"bold":true},"insert":"ModalContact"},{"insert":" в "},{"attributes":{"bold":true},"insert":"app/Http/Livewire"},{"insert":"\n\n"},{"attributes":{"color":"yellow"},"insert":"<?php"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" namespace App\\Http\\Livewire;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" use LivewireUI\\Modal\\"},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class ModalContact extends "},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"{"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   public function render()"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   {"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       return view('livewire.modal-contact');"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   }"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"}"},{"insert":"\n \nВносим редактирование в "},{"attributes":{"bold":true},"insert":"modal.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/vendor/livewire-ui-modal "},{"insert":"\n"},{"attributes":{"bold":true},"insert":" "},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"<div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($jsPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*script>{!! file_get_contents($jsPath) !!}</*script>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @isset($cssPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <*style>{!! file_get_contents($cssPath) !!}</*style>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-data=\"LivewireUIModal()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-init=\"init()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:close.stop=\"setShowPropertyTo(false)\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.escape.window=\"closeModalOnEscape()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.tab.prevent=\"$event.shiftKey || nextFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-on:keydown.shift.tab.prevent=\"prevFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       class=\"fixed inset-0 z-10 overflow-y-auto\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"      "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"display: none; margin-top: 0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       <div class=\"flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-on:click=\"closeModalOnClickAway()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"fixed inset-0 transition-all transform\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               <div class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <span class=\"hidden sm:inline-block sm:align-middle sm:h-screen\" aria-hidden=\"true\">&#8203;</span>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-show=\"show && showActiveComponent\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-start=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:enter-end=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-start=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-transition:leave-end=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               x-bind:class=\"modalWidth\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               class=\"inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               id=\"modal-container\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"              "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"margin-bottom: 250px; z-index: 1000000000000000000;\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @forelse($components as $id => $component)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   <div x-show.immediate=\"activeComponent == '{{ $id }}'\" x-ref=\"{{ $id }}\" wire:key=\"{{ $id }}\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                       @livewire($component['name'], $component['attributes'], key($id))"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"                   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @empty"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"               @endforelse"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"           </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"       </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"   </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"</div>"},{"insert":"\n \nРедактируем стили для корректного отображения модульного окна (в зависимости от размеров окна стили могут меняться)\nИ создаем само окно "},{"attributes":{"bold":true},"insert":"modal-contact.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/livewire "},{"insert":"в котором мы можем разместить все что нам нужно.\n \nТакже мы можем создавать сколько угодно модульных окон создавая другие модели\nphp artisan make:livewire ModalName"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Теперьнам осталось только разместить кнопку на странице\n<button class=\" \" onclick=\"Livewire.emit('openModal', 'modal-contact')\">Модальное окно</button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Удачи!\n"}]}