feat: open and close modal

Author: ell-ska

resources/css/app.css

@@ -20,7 +20,7 @@
   }
 }
 
-@layer utils {
+@layer utilities {
   .hide-scrollbar::-webkit-scrollbar {
     display: none;
   }
@@ -29,4 +29,9 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
+
+  /* this is used by alpine.js to properly hide elements on load */
+  [x-cloak] {
+    @apply hidden;
+  }
 }

resources/views/components/modal/base.blade.php

@@ -1,4 +1,42 @@
-<div class="modal fixed inset-0 flex justify-center overflow-y-scroll">
-    <div class="absolute inset-0 bg-slate-800/80 backdrop-blur-sm"></div>
+@props([
+    'name',
+    'show' => false,
+])
+
+<div
+    x-data="{
+        show: @js($show),
+    }"
+    x-show="show"
+    x-on:open-modal.window="
+        if ($event.detail === '{{ $name }}') {
+            show = true
+        }
+    "
+    x-on:close-modal.window="
+        if ($event.detail === '{{ $name }}') {
+            show = false
+        }
+    "
+    x-init="
+        $watch('show', (show) => {
+            if (show) {
+                document.body.classList.add('overflow-hidden')
+            } else {
+                document.body.classList.remove('overflow-hidden')
+            }
+        })
+    "
+    x-cloak
+    @class([
+        'flex' => $show,
+        'hidden' => "$show",
+        'fixed inset-0 flex justify-center overflow-y-scroll',
+    ])
+>
+    <div
+        @click="show = false"
+        class="absolute inset-0 bg-slate-800/80 backdrop-blur-sm"
+    ></div>
     {{ $slot }}
 </div>