first commit

resources/views/components/offcanvas/basic.blade.php

@@ -0,0 +1,78 @@
+@php
+    use Illuminate\Support\Str;
+@endphp
+
+@props([
+    'id'         => '',     // ID único para el offcanvas
+    'title'      => '',     // Título del offcanvas
+    'position'   => 'end',  // Posición: 'start', 'end', 'top', 'bottom'
+    'size'       => 'md',   // Tamaño: sm, md, lg, xl
+    'backdrop'   => true,   // Si se debe mostrar backdrop
+    'wireIgnore' => true,   // Ignorar eventos wire (Livewire)
+    'listener'   => '',     // Nombre del listener para reload
+    'tagName'    => '',     // Etiqueta del formHelpers
+])
+
+@php
+    $offcanvasClasses = "offcanvas offcanvas-{$position}";
+
+    $offcanvasSize = match ($size) {
+        'sm' => 'offcanvas-sm',
+        'lg' => 'offcanvas-lg',
+        'xl' => 'offcanvas-xl',
+        default => '',
+    };
+
+    $helperTag = Str::kebab($tagName);
+@endphp
+
+<div
+    class="{{ $offcanvasClasses }} {{ $offcanvasSize }}"
+    tabindex="-1"
+    id="{{ $id }}"
+    aria-labelledby="{{ $id }}Label"
+    {{ $wireIgnore ? 'wire:ignore.self' : '' }}
+    data-bs-backdrop="{{ $backdrop ? 'true' : 'false' }}">
+
+    {{-- HEADER --}}
+    <div class="offcanvas-header border-bottom">
+        <h5 class="offcanvas-title">{{ $title }}</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Cerrar"></button>
+    </div>
+
+    {{-- BODY --}}
+    <div class="offcanvas-body p-4">
+        {{ $slot }}
+    </div>
+
+    {{-- FOOTER SLOT OPCIONAL --}}
+    @if (isset($footer))
+        <div class="offcanvas-footer border-top p-3">
+            {{ $footer }}
+        </div>
+    @endif
+</div>
+
+@push('page-script')
+    <script>
+        // Evento para inicializar el formulario cuando se carga la página
+        window.addEventListener("DOMContentLoaded", () => {
+            const register{{ $tagName }}FormEvents = () => {
+                document.addEventListener("refresh-{{ $helperTag }}-offcanvas", () => {
+                    window.formHelpers['{{ $helperTag }}'].refresh();
+                });
+
+                var myOffcanvas = document.getElementById('{{ $id }}')
+
+                myOffcanvas.addEventListener('show.bs.offcanvas', function () {
+                    setTimeout(() => window.formHelpers['{{ $helperTag }}'].reloadOffcanvas(), 20);
+                });
+            }
+
+            window.formHelpers = window.formHelpers || {};
+            window.formHelpers['{{ $helperTag }}'] = new FormCanvasHelper('{{ $id }}', @this);
+
+            register{{ $tagName }}FormEvents();
+        });
+    </script>
+@endpush