modal fix?

app/Http/Livewire/Project/Service/ComposeModal.php

@@ -4,14 +4,19 @@
 
 use App\Models\Service;
 use Livewire\Component;
+use LivewireUI\Modal\ModalComponent;
 
-class ComposeModal extends Component
+class ComposeModal extends ModalComponent
 {
     public Service $service;
+    public $serviceId;
     protected $rules = [
         'service.docker_compose_raw' => 'required',
         'service.docker_compose' => 'required',
     ];
+    public function mount() {
+        $this->service = Service::find($this->serviceId);
+    }
     public function render()
     {
         return view('livewire.project.service.compose-modal');
@@ -19,5 +24,6 @@ public function render()
     public function submit() {
         $this->emit('warning', "Saving new docker compose...");
         $this->emit('saveCompose', $this->service->docker_compose_raw);
+        $this->closeModal();
     }
 }

composer.json

@@ -39,6 +39,7 @@
         "stripe/stripe-php": "^12.0",
         "symfony/yaml": "^6.2",
         "visus/cuid2": "^2.0.0",
+        "wire-elements/modal": "^1.0",
         "yosymfony/toml": "^1.0"
     },
     "require-dev": {

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "2fdb48eb84a31346d8396443b34b0cb0",
+    "content-hash": "c1fc9357fddf5e7b23bb5d500c54fe29",
     "packages": [
         {
             "name": "aws/aws-crt-php",
@@ -10222,6 +10222,64 @@
             },
             "time": "2022-06-03T18:03:27+00:00"
         },
+        {
+            "name": "wire-elements/modal",
+            "version": "1.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/wire-elements/modal.git",
+                "reference": "1019f423485afb6df0d1531d978e93d4ad0975fb"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/wire-elements/modal/zipball/1019f423485afb6df0d1531d978e93d4ad0975fb",
+                "reference": "1019f423485afb6df0d1531d978e93d4ad0975fb",
+                "shasum": ""
+            },
+            "require": {
+                "livewire/livewire": "^2.0",
+                "php": "^7.4|^8.0",
+                "spatie/laravel-package-tools": "^1.9"
+            },
+            "require-dev": {
+                "orchestra/testbench": "^6.15",
+                "phpunit/phpunit": "^9.5"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "LivewireUI\\Modal\\LivewireModalServiceProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "LivewireUI\\Modal\\": "src"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Philo Hermans",
+                    "email": "me@philohermans.com"
+                }
+            ],
+            "description": "Laravel Livewire modal component",
+            "keywords": [
+                "laravel",
+                "livewire",
+                "modal"
+            ],
+            "support": {
+                "issues": "https://github.com/wire-elements/modal/issues",
+                "source": "https://github.com/wire-elements/modal/tree/1.0.8"
+            },
+            "time": "2023-04-07T12:35:15+00:00"
+        },
         {
             "name": "yosymfony/parser-utils",
             "version": "v2.0.0",

config/livewire-ui-modal.php

@@ -0,0 +1,52 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include CSS
+    |--------------------------------------------------------------------------
+    |
+    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
+    | to set this parameter to true. This includes the modern-normalize css.
+    |
+    */
+    'include_css' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include JS
+    |--------------------------------------------------------------------------
+    |
+    | Livewire UI will inject the required Javascript in your blade template.
+    | If you want to bundle the required Javascript you can set this to false
+    | and add `require('vendor/wire-elements/modal/resources/js/modal');`
+    | to your script bundler like webpack.
+    |
+    */
+    'include_js' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Modal Component Defaults
+    |--------------------------------------------------------------------------
+    |
+    | Configure the default properties for a modal component.
+    |
+    | Supported modal_max_width
+    | 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', '7xl'
+    */
+    'component_defaults' => [
+        'modal_max_width' => '2xl',
+
+        'close_modal_on_click_away' => true,
+
+        'close_modal_on_escape' => true,
+
+        'close_modal_on_escape_is_forceful' => true,
+
+        'dispatch_close_event' => false,
+
+        'destroy_on_close' => false,
+    ],
+];

package-lock.json

@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@alpinejs/focus": "^3.13.3",
                 "@tailwindcss/typography": "0.5.10",
                 "alpinejs": "3.13.3",
                 "daisyui": "4.4.19",
@@ -35,6 +36,15 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/@alpinejs/focus": {
+            "version": "3.13.3",
+            "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.13.3.tgz",
+            "integrity": "sha512-fTRX/9wOfysyZ1PJ4gHeUnmiNTIgqBDIqKxeP5iMvj1UHD3TFLDXllvoIKH3ezqcsyQZqxd/q1MFM7dlIhkmeg==",
+            "dependencies": {
+                "focus-trap": "^6.9.4",
+                "tabbable": "^5.3.3"
+            }
+        },
         "node_modules/@babel/parser": {
             "version": "7.23.5",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.5.tgz",
@@ -1140,6 +1150,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/focus-trap": {
+            "version": "6.9.4",
+            "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+            "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+            "dependencies": {
+                "tabbable": "^5.3.3"
+            }
+        },
         "node_modules/follow-redirects": {
             "version": "1.15.2",
             "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
@@ -1927,6 +1945,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/tabbable": {
+            "version": "5.3.3",
+            "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+            "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+        },
         "node_modules/tailwindcss": {
             "version": "3.3.6",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",

package.json

@@ -18,6 +18,7 @@
         "vue": "3.3.10"
     },
     "dependencies": {
+        "@alpinejs/focus": "^3.13.3",
         "@tailwindcss/typography": "0.5.10",
         "alpinejs": "3.13.3",
         "daisyui": "4.4.19",

resources/js/app.js

@@ -1,8 +1,9 @@
 import Alpine from "alpinejs";
+import focus from '@alpinejs/focus'
 import { createApp } from "vue";
 import MagicBar from "./components/MagicBar.vue";
 import Toaster from "../../vendor/masmerise/livewire-toaster/resources/js";
-
+Alpine.plugin(focus)
 Alpine.plugin(Toaster);
 
 window.Alpine = Alpine;

resources/views/layouts/base.blade.php

@@ -37,6 +37,7 @@
 
     <body>
         @livewireScripts
+        @livewire('livewire-ui-modal')
         <dialog id="help" class="modal">
             <livewire:help />
             <form method="dialog" class="modal-backdrop">

resources/views/livewire/project/service/compose-modal.blade.php

@@ -1,6 +1,5 @@
-<dialog id="composeModal" class="modal" x-data="{ raw: true }" wire:ignore.self>
+<form x-data="{ raw: true }" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
-    <form method="dialog" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
+    <div class="flex items-end gap-2">
-        <div class="flex items-end gap-2">
         <h1>Docker Compose</h1>
         <div x-cloak x-show="raw">
             <x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable Compose</x-forms.button>
@@ -10,21 +9,19 @@
                 Compose</x-forms.button>
         </div>
     </div>
-        <div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage menu.</div>
+    <div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent
+        name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
+        menu.</div>
 
-        <div x-cloak x-show="raw">
+    <div x-cloak x-show="raw">
-            <x-forms.textarea rows="20" id="service.docker_compose_raw">
+        <x-forms.textarea rows="20" id="service.docker_compose_raw">
-            </x-forms.textarea>
+        </x-forms.textarea>
-        </div>
+    </div>
-        <div x-cloak x-show="raw === false">
+    <div x-cloak x-show="raw === false">
-            <x-forms.textarea rows="20" readonly id="service.docker_compose">
+        <x-forms.textarea rows="20" readonly id="service.docker_compose">
-            </x-forms.textarea>
+        </x-forms.textarea>
-        </div>
+    </div>
-        <x-forms.button onclick="composeModal.close()" type="submit">
+    <x-forms.button type="submit">
-            Save
+        Save
-        </x-forms.button>
+    </x-forms.button>
-    </form>
+</form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
-</dialog>

resources/views/livewire/project/service/index.blade.php

@@ -1,6 +1,5 @@
 <div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.checkStatus" wire:poll.10000ms="checkStatus">
     <livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
-    <livewire:project.service.compose-modal :service="$service" />
     <div class="flex h-full pt-6" >
         <div class="flex flex-col items-start gap-4 min-w-fit">
             <a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>

resources/views/livewire/project/service/stack-form.blade.php

@@ -5,7 +5,9 @@
             <div>Configuration</div>
         </div>
         <x-forms.button type="submit">Save</x-forms.button>
-        <x-forms.button class="w-64" onclick="composeModal.showModal()">Edit Compose
+        <x-forms.button class="w-64"
+            onclick="Livewire.emit('openModal', 'project.service.compose-modal',{{ json_encode(['serviceId' => $service->id]) }})">Edit
+            Compose
             File</x-forms.button>
     </div>
     <div class="flex gap-2">

resources/views/vendor/livewire-ui-modal/modal.blade.php

@@ -0,0 +1,58 @@
+<div>
+    @isset($jsPath)
+        <script>{!! file_get_contents($jsPath) !!}</script>
+    @endisset
+    @isset($cssPath)
+        <style>{!! file_get_contents($cssPath) !!}</style>
+    @endisset
+
+    <div
+            x-data="LivewireUIModal()"
+            x-init="init()"
+            x-on:close.stop="setShowPropertyTo(false)"
+            x-on:keydown.escape.window="closeModalOnEscape()"
+            x-show="show"
+            class="fixed inset-0 z-10 overflow-y-auto"
+            style="display: none;"
+    >
+        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
+            <div
+                    x-show="show"
+                    x-on:click="closeModalOnClickAway()"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0"
+                    x-transition:enter-end="opacity-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100"
+                    x-transition:leave-end="opacity-0"
+                    class="fixed inset-0 transition-all transform"
+            >
+                <div class="absolute inset-0 opacity-50 bg-coolgray-200"></div>
+            </div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div
+                    x-show="show && showActiveComponent"
+                    x-transition:enter="ease-out duration-300"
+                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave="ease-in duration-200"
+                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    x-bind:class="modalWidth"
+                    class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
+                    id="modal-container"
+                    x-trap.noscroll.inert="show && showActiveComponent"
+                    aria-modal="true"
+            >
+                @forelse($components as $id => $component)
+                    <div class="flex items-center justify-center" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
+                        @livewire($component['name'], $component['attributes'], key($id))
+                    </div>
+                @empty
+                @endforelse
+            </div>
+        </div>
+    </div>
+</div>

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: [
+        './vendor/wire-elements/modal/resources/views/*.blade.php',
+        './storage/framework/views/*.php',
         "./resources/**/*.blade.php",
         "./app/**/*.php",
         "./resources/**/*.js",