fix:improve access controls and language

also adds improved dialogs / modals

resources/views/components/confirmation-modal.blade.php

@@ -1,7 +1,7 @@
 @props(['id' => null, 'maxWidth' => null])
 
-<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
-    <div class="p-4">
+<x-ib-livewire-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }} :showClose="false">
+    <div class="p-2">
         <div class="sm:flex sm:items-start">
             <div class="mx-auto shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                 <svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -21,9 +21,7 @@
         </div>
     </div>
 
-    <div class="flex flex-row justify-end px-6 py-4 text-end">
+    <div class="flex flex-row justify-end mt-3 p-2 text-end">
         {{ $footer }}
     </div>
-</x-modal>
-
-
+</x-ib-livewire-modal>

resources/views/components/dialog-modal.blade.php

@@ -1,7 +1,7 @@
 @props(['id' => null, 'maxWidth' => null])
 
-<x-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
-    <div class="px-6 py-4">
+<x-ib-livewire-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }} :showClose="false">
+    <div class="p-2">
         <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
             {{ $title }}
         </div>
@@ -11,7 +11,7 @@
         </div>
     </div>
 
-    <div class="flex flex-row justify-end px-6 py-4 text-end">
+    <div class="flex flex-row justify-end mt-3 p-2 text-end">
         {{ $footer }}
     </div>
-</x-modal>
+</x-ib-livewire-modal>

resources/views/components/ib-alpine-modal.blade.php

@@ -3,10 +3,11 @@
     'showClose' => true,
     'closeOnEscape' => true,
     'title' => null,
-    'subtitle' => null
+    'subtitle' => null,
+    'persistent' => false
 ])
 
-<div 
+<dialog 
     x-data="{ open: false }"
     x-on:toggle-{{ $key }}.window="open = !open"
     class="relative z-50 w-auto h-auto"
@@ -17,7 +18,9 @@
     <template x-teleport="body">
         <div x-transition.opacity x-show="open" class="fixed top-0 left-0 z-[99] flex items-center justify-center w-full h-full">
             <div 
-                @click="open=false" 
+                @if(!$persistent)
+                    @click="open=false" 
+                @endif
                 class="absolute inset-0 w-full h-full bg-black bg-opacity-40"
                 x-show="open"
                 x-cloak
@@ -44,4 +47,4 @@
             </x-card>
         </div>
     </template>
-</div>
+</dialog>

resources/views/components/ib-drawer.blade.php

@@ -22,9 +22,8 @@
 
     <div @click="open = false" class="fixed inset-0 bg-black opacity-50"></div>
 
-    <x-card 
-        
-        {{ $attributes->merge(['class' => 'min-h-screen w-5/6 xl:w-3/5 rounded-none px-8 transition']) }} 
+    <x-card
+        {{ $attributes->merge(['class' => 'min-h-screen w-full md:w-3/4 xl:w-3/5 rounded-none px-8 transition']) }} 
     >
         @if($title)
             <x-slot:title>

resources/views/components/ib-livewire-modal.blade.php

@@ -0,0 +1,46 @@
+@props([
+    'showClose' => true,
+    'closeOnEscape' => true,
+    'title' => null,
+    'subtitle' => null,
+    'persistent' => false
+])
+
+<dialog
+    {{ $attributes->except('wire:model')->class(["modal"]) }}
+    x-data="{open: @entangle($attributes->wire('model')).live }"
+    :class="{'modal-open !animate-none': open}"
+    :open="open"
+    @if($closeOnEscape)
+        @keydown.escape.window = "$wire.{{ $attributes->wire('model')->value() }} = false"
+    @endif
+>
+    <x-card     
+        :title="$title"
+        :subtitle="$subtitle"
+        {{ $attributes->merge(['class' => 'modal-box relative transform overflow-hidden rounded-md ext-left shadow-xl w-full sm:w-2/3 lg:w-1/3 m-2 sm:m-0']) }} 
+    >
+        @if ($showClose)
+            <x-button 
+                icon="o-x-mark" 
+                class="absolute top-4 right-4 btn-ghost btn-circle btn-sm" 
+                @click="$wire.{{ $attributes->wire('model')->value() }} = false"
+            />
+        @endif
+
+        {{ $slot }}
+
+    </x-card>
+
+    <div class="modal-backdrop" method="dialog">
+        <a 
+            @if(!$persistent)
+                @click="$wire.{{ $attributes->wire('model')->value() }} = false"
+            @endif
+            type="button"
+            title="{{ __('Close') }}"
+        >
+            {{ __('Close') }}
+        </a>
+    </div>
+</dialog>