Creando modal propio

2025-01-26 03:25:54 -03:00
parent 6a1458304a
commit 85ae2d033e
4 changed files with 81 additions and 13 deletions
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="corporate">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="emerald">

 <head>
    <meta charset="UTF-8">
--- a/resources/views/components/my-modal.blade.php
+++ b/resources/views/components/my-modal.blade.php
@@ -0,0 +1,37 @@
+<div x-data="{}"
+     x-init="$refs.dialog.addEventListener('close', () => $dispatch('close-modal-{{$name}}'))"
+     x-on:show-modal.window="
+     console.log($event)
+     if($event.detail[0] === '{{$name}}') {
+        $refs.dialog.showModal();
+     }
+     "
+     x-on:hide-modal.window="
+     if($event.detail[0] === '{{$name}}') {
+        $refs.dialog.close();
+     }
+     "
+>
+    <dialog class="modal" x-ref="dialog" wire:ignore>
+        <div class="modal-box">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
+                    ✕
+                </button>
+            </form>
+
+            @if(isset($title))
+                <h3 class="text-lg font-bold">{{$title}}</h3>
+            @endif
+
+            {{$slot}}
+            
+            @if(isset($footer))
+                <div class="modal-action">
+                    {{$footer}}
+                </div>
+            @endif
+        </div>
+
+    </dialog>
+</div>