From ceedd5225f97d52ecc4e96fd3178221523dab55d Mon Sep 17 00:00:00 2001 From: Andras Bacsai Date: Wed, 6 Dec 2023 15:50:13 +0100 Subject: [PATCH] modal fix? --- .../Livewire/Project/Service/ComposeModal.php | 8 ++- composer.json | 1 + composer.lock | 60 ++++++++++++++++++- config/livewire-ui-modal.php | 52 ++++++++++++++++ package-lock.json | 23 +++++++ package.json | 1 + resources/js/app.js | 3 +- resources/views/layouts/base.blade.php | 1 + .../project/service/compose-modal.blade.php | 37 ++++++------ .../livewire/project/service/index.blade.php | 1 - .../project/service/stack-form.blade.php | 4 +- .../vendor/livewire-ui-modal/modal.blade.php | 58 ++++++++++++++++++ tailwind.config.js | 2 + 13 files changed, 226 insertions(+), 25 deletions(-) create mode 100644 config/livewire-ui-modal.php create mode 100644 resources/views/vendor/livewire-ui-modal/modal.blade.php diff --git a/app/Http/Livewire/Project/Service/ComposeModal.php b/app/Http/Livewire/Project/Service/ComposeModal.php index bd5a7c041..81d38cee2 100644 --- a/app/Http/Livewire/Project/Service/ComposeModal.php +++ b/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(); } } diff --git a/composer.json b/composer.json index 81a1394a0..349133ffa 100644 --- a/composer.json +++ b/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": { diff --git a/composer.lock b/composer.lock index 28231de66..bcf9b80ec 100644 --- a/composer.lock +++ b/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", diff --git a/config/livewire-ui-modal.php b/config/livewire-ui-modal.php new file mode 100644 index 000000000..295029182 --- /dev/null +++ b/config/livewire-ui-modal.php @@ -0,0 +1,52 @@ + 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, + ], +]; diff --git a/package-lock.json b/package-lock.json index 9a3100536..0e4825979 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2ec2d49be..e74c5e915 100644 --- a/package.json +++ b/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", diff --git a/resources/js/app.js b/resources/js/app.js index e61f1a3a4..4aee434fc 100644 --- a/resources/js/app.js +++ b/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; diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php index 91e28338e..5c1536164 100644 --- a/resources/views/layouts/base.blade.php +++ b/resources/views/layouts/base.blade.php @@ -37,6 +37,7 @@ @livewireScripts + @livewire('livewire-ui-modal')
diff --git a/resources/views/livewire/project/service/compose-modal.blade.php b/resources/views/livewire/project/service/compose-modal.blade.php index d03ef2cbd..55c30dfb0 100644 --- a/resources/views/livewire/project/service/compose-modal.blade.php +++ b/resources/views/livewire/project/service/compose-modal.blade.php @@ -1,6 +1,5 @@ - - -
+ +

Docker Compose

Show Deployable Compose @@ -10,21 +9,19 @@ Compose
-
Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent name collision.
To see the actual volume names, check the Deployable Compose file, or go to Storage menu.
+
Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent + name collision.
To see the actual volume names, check the Deployable Compose file, or go to Storage + menu.
-
- - -
-
- - -
- - Save - - -
- -
-
+
+ + +
+
+ + +
+ + Save + + diff --git a/resources/views/livewire/project/service/index.blade.php b/resources/views/livewire/project/service/index.blade.php index ea9d2028a..2b439461a 100644 --- a/resources/views/livewire/project/service/index.blade.php +++ b/resources/views/livewire/project/service/index.blade.php @@ -1,6 +1,5 @@
-
Documentation diff --git a/resources/views/livewire/project/service/stack-form.blade.php b/resources/views/livewire/project/service/stack-form.blade.php index 65ead1777..0024fd7f0 100644 --- a/resources/views/livewire/project/service/stack-form.blade.php +++ b/resources/views/livewire/project/service/stack-form.blade.php @@ -5,7 +5,9 @@
Configuration
Save - Edit Compose + Edit + Compose File
diff --git a/resources/views/vendor/livewire-ui-modal/modal.blade.php b/resources/views/vendor/livewire-ui-modal/modal.blade.php new file mode 100644 index 000000000..04980eb86 --- /dev/null +++ b/resources/views/vendor/livewire-ui-modal/modal.blade.php @@ -0,0 +1,58 @@ +
+ @isset($jsPath) + + @endisset + @isset($cssPath) + + @endisset + + +
diff --git a/tailwind.config.js b/tailwind.config.js index da34c54ae..d44267e6a 100644 --- a/tailwind.config.js +++ b/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",