expose __sheetOpen via x-modelable

Author: anotherfrontendguy

resources/views/components/sheet/close.blade.php

@@ -1,5 +1,5 @@
 <x-button
-    x-on:click="sheetOpen = false; $refs.__sheet.close()"
+    x-on:click="__sheetOpen = false"
     {{ $attributes->twMerge('') }}
 >
     {{ $slot }}

resources/views/components/sheet/content.blade.php

@@ -5,8 +5,10 @@
 @inject('sheet', 'App\Services\DialogCvaService')
 
 <dialog
-    x-ref="__sheet"
-    x-trap.noscroll="sheetOpen"
+    wire:ignore.self
+    x-on:cancel="__sheetOpen = false"
+    x-trap.noscroll="__sheetOpen"
+    x-effect="__sheetOpen ? $el.showModal() : $el.close()"
     {{ $attributes->twMerge($sheet(['side' => $side, 'variant' => 'sheet'])) }}
 >
     <x-sheet.close

resources/views/components/sheet/index.blade.php

@@ -1,6 +1,6 @@
 <div
-    x-data="{ sheetOpen: false }"
-    x-on:keydown.escape.window="sheetOpen = false"
+    x-data="{ __sheetOpen: false }"
+    x-modelable="__sheetOpen"
 >
     {{ $slot }}
 </div>

resources/views/components/sheet/trigger.blade.php

@@ -1,3 +1,3 @@
-<div x-on:click="sheetOpen = true; $refs.__sheet.showModal()">
+<div x-on:click="__sheetOpen = true">
     {{ $slot }}
 </div>