first commit

resources/views/components/form/radio-group.blade.php

@@ -0,0 +1,149 @@
+@props([
+    // Identificador único
+    'uid' => uniqid(),
+
+    // Modelos para Livewire
+    'radioModel' => '',
+    'textModel' => '',
+
+    // Etiqueta y clases de la etiqueta
+    'label' => '',
+    'labelClass' => '',
+
+    // Clases generales
+    'align' => 'start',
+    'size' => '', // Tamaño del input (sm, lg)
+    'mb0' => false, // Remover margen inferior
+    'parentClass' => '',
+
+    // Elementos opcionales antes/después del input
+    'prefix' => null,
+    'suffix' => null,
+
+    // Íconos dentro del input
+    'icon' => null, // Ícono fijo
+    'clickableIcon' => null, // Ícono con botón
+
+    // Configuración del radio
+    'checked' => false,
+    'disabled' => false,
+    'name' => '', // Grupo del radio
+
+    // Configuración del input de texto
+    'disableOnOffRadio' => true, // Deshabilita input hasta que el radio esté seleccionado
+    'focusOnCheck' => true, // Hace foco en el input al seleccionar el radio
+
+    // Texto de ayuda
+    'helperText' => '',
+
+    // Atributos adicionales para el input de texto
+    'attributes' => new \Illuminate\View\ComponentAttributeBag([]),
+])
+
+@php
+    // **Generación de Name, ID y Model**
+    $livewireRadio = $radioModel ? "wire:model=$radioModel" : '';
+    $livewireText = $textModel ? "wire:model=$textModel" : '';
+
+    $nameRadio = $attributes->get('name', $radioModel ?: $name);
+    $nameText = $attributes->get('name', $textModel);
+
+    $radioId = $attributes->get('id', 'radio_' . $uid);
+    $textInputId = 'txt_' . $uid;
+
+    // **Placeholder del input de texto**
+    $placeholder = $attributes->get('placeholder', 'Ingrese información');
+
+    // **Clases dinámicas**
+    $sizeClass = match ($size) {
+        'sm' => 'form-control-sm',
+        'lg' => 'form-control-lg',
+        default => '',
+    };
+
+    $fullClass = trim("form-control $sizeClass");
+
+    // **Fusionar atributos del input de texto**
+    $inputAttributes = $attributes->merge([
+        'id' => $textInputId,
+        'name' => $nameText,
+        'placeholder' => $placeholder,
+    ])->class($fullClass);
+@endphp
+
+{{-- ============================ RADIO BUTTON CON INPUT GROUP ============================ --}}
+<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }}">
+    @if ($label)
+        <label for="{{ $radioId }}" class="{{ $labelClass }}">{{ $label }}</label>
+    @endif
+
+    <div class="input-group">
+        {{-- Radio dentro del input-group-text --}}
+        <div class="input-group-text">
+            <input
+                id="{{ $radioId }}"
+                name="{{ $nameRadio }}"
+                type="radio"
+                {{ $livewireRadio }}
+                {{ $disabled ? 'disabled' : '' }}
+                class="form-check-input mt-0"
+                onchange="toggleRadioInputState('{{ $radioId }}', '{{ $textInputId }}', {{ $focusOnCheck ? 'true' : 'false' }}, {{ $disableOnOffRadio ? 'true' : 'false' }})"
+            >
+        </div>
+
+        {{-- Prefijo opcional --}}
+        @isset($prefix)
+            <span class="input-group-text">{{ $prefix }}</span>
+        @endisset
+
+        {{-- Ícono fijo opcional --}}
+        @isset($icon)
+            <span class="input-group-text"><i class="{{ $icon }}"></i></span>
+        @endisset
+
+        {{-- Input de texto dentro del mismo grupo --}}
+        <input
+            {{ $livewireText }}
+            {!! $inputAttributes !!}
+            @if ($disableOnOffRadio) disabled @endif
+            aria-label="Text input with radio button"
+        >
+
+        {{-- Sufijo opcional --}}
+        @isset($suffix)
+            <span class="input-group-text">{{ $suffix }}</span>
+        @endisset
+
+        {{-- Ícono clickeable opcional --}}
+        @isset($clickableIcon)
+            <button type="button" class="input-group-text cursor-pointer">
+                <i class="{{ $clickableIcon }}"></i>
+            </button>
+        @endisset
+    </div>
+
+    {{-- Texto de ayuda opcional --}}
+    @if ($helperText)
+        <div class="form-text">{{ $helperText }}</div>
+    @endif
+</div>
+
+{{-- ============================ JAVASCRIPT PURO ============================ --}}
+<script>
+    function toggleRadioInputState(radioId, inputId, focusOnCheck, disableOnOffRadio) {
+        let radio = document.getElementById(radioId);
+        let textInput = document.getElementById(inputId);
+
+        if (!radio || !textInput) return;
+
+        // Deshabilitar o habilitar el input de texto
+        if (disableOnOffRadio) {
+            textInput.disabled = !radio.checked;
+        }
+
+        // Enfocar automáticamente el input si está habilitado
+        if (focusOnCheck && radio.checked) {
+            textInput.focus();
+        }
+    }
+</script>