laravel-vuexy-admin/resources/views/components/form/input.blade copy.php

@props([
    'uid' => uniqid(),


    'model' => '',


    'label' => '',
    'labelClass' => '',


    'class' => '',

    'align' => 'start',
    'size' => '',
    'mb-0' => false,





    'parentClass' => '',


    'prefix' => null,
    'suffix' => null,

    'icon' => null,
    'clickableIcon' => null,

    'inline' => false,

    'labelCol' => 4,
    'inputCol' => 8,

    'floatLabel' => false,
    'helperText' => '',

    'attributes' => new \Illuminate\View\ComponentAttributeBag([]), // Atributos adicionales
])

@php
    // Configuración dinámica de atributos y clases CSS
    $livewireModel = $attributes->get('wire:model', $model); // Permitir uso directo de wire:model en el atributo
    $name = $name ?: $livewireModel; // Si no se proporciona el nombre, toma el nombre del modelo
    $inputId = $id ?: ($uid ? $name . '_' . $uid : $name); // ID generado si no se proporciona uno


    // Obtener los atributos actuales en un array
    $attributesArray = array_merge([
        'type' => $type,
        'id' => $inputId,
        'name' => $name,
    ]);


    // Agregar wire:model solo si existe
    if ($livewireModel) {
        $attributesArray['wire:model'] = $livewireModel;
    }


    $attributesArray = array_merge($attributesArray, $attributes->getAttributes());


    // Reconstruir el ComponentAttributeBag con los atributos modificados
    $inputAttributes = new \Illuminate\View\ComponentAttributeBag($attributesArray);

    dump($inputAttributes);


    // Manejo de errores de validación
    $errorKey = $livewireModel ?: $name;
    $errorClass = $errors->has($errorKey) ? 'is-invalid' : '';

    // Definir el tamaño del input basado en la clase seleccionada
    $sizeClass = $size === 'small' ? 'form-control-sm' : ($size === 'large' ? 'form-control-lg' : '');

    // Alineación del texto
    $alignClass = match ($align) {
        'center' => 'text-center',
        'end' => 'text-end',
        default => ''
    };

    // Clases combinadas para el input
    $fullClass = trim("form-control $sizeClass $alignClass $errorClass $class");

    // Detectar si se necesita usar input-group
    $requiresInputGroup = $prefix || $suffix || $icon || $clickableIcon;
@endphp

{{-- Input oculto sin estilos --}}
@if($type === 'hidden')
    <input type="hidden" id="{{ $inputId }}" name="{{ $name }}" {{ $livewireModel ? "wire:model=$livewireModel" : '' }}
     />
@elseif($floatLabel)
    {{-- Input con etiqueta flotante --}}
    <div class="form-floating mb-4 {{ $parentClass }}">
        <input
            type="{{ $type }}"
            id="{{ $inputId }}"
            name="{{ $name }}"
            {{ $livewireModel ? "wire:model=$livewireModel" : '' }}
            class="{{ $fullClass }}"
            placeholder="{{ $placeholder ?: 'Ingrese ' . strtolower($label) }}"
            {{ $step ? "step=$step" : '' }}
            {{ $max ? "maxlength=$max" : '' }}
            {{ $min ? "minlength=$min" : '' }}
            {{ $pattern ? "pattern=$pattern" : '' }}
            {{ $disabled ? 'disabled' : '' }}
            {{ $multiple ? 'multiple' : '' }} />
        <label for="{{ $inputId }}">{{ $label }}</label>

        @if ($helperText)
            <div class="form-text">{{ $helperText }}</div>
        @endif

        @if ($errors->has($errorKey))
            <span class="text-danger">{{ $errors->first($errorKey) }}</span>
        @endif
    </div>
@else
    {{-- Input con formato clásico --}}
    <div class="{{ $inline ? 'row' : '' }} {{ $parentClass }} fv-row mb-4">
        @isset($label)
            <label for="{{ $inputId }}" class="{{ $inline ? 'col-form-label col-md-' . $labelCol : 'form-label' }} {{ $labelClass }}">{{ $label }}</label>
        @endisset
        <div class="{{ $inline ? 'col-md-' . $inputCol : '' }}">
            @if ($requiresInputGroup)
                <div class="input-group input-group-merge">
                    @if ($prefix)
                        <span class="input-group-text">{{ $prefix }}</span>
                    @endif
                    @if ($icon)
                        <span class="input-group-text"><i class="{{ $icon }}"></i></span>
                    @endif
                    <input
                        type="{{ $type }}"
                        id="{{ $inputId }}"
                        name="{{ $name }}"
                        {{ $livewireModel ? "wire:model=$livewireModel" : '' }}
                        class="{{ $fullClass }}"
                        placeholder="{{ $placeholder ?: 'Ingrese ' . strtolower($label) }}"
                        {{ $step ? "step=$step" : '' }}
                        {{ $max ? "maxlength=$max" : '' }}
                        {{ $min ? "minlength=$min" : '' }}
                        {{ $pattern ? "pattern=$pattern" : '' }}
                        {{ $disabled ? 'disabled' : '' }}
                        {{ $multiple ? 'multiple' : '' }} />
                    @if ($suffix)
                        <span class="input-group-text">{{ $suffix }}</span>
                    @endif
                    @if ($clickableIcon)
                        <button type="button" class="input-group-text cursor-pointer">
                            <i class="{{ $clickableIcon }}"></i>
                        </button>
                    @endif
                </div>
            @else
                {{-- Input sin prefijo o íconos --}}
                <input
                    type="{{ $type }}"
                    id="{{ $inputId }}"
                    name="{{ $name }}"
                    {{ $livewireModel ? "wire:model=$livewireModel" : '' }}
                    class="{{ $fullClass }}"
                    placeholder="{{ $placeholder ?: 'Ingrese ' . strtolower($label) }}"
                    {{ $step ? "step=$step" : '' }}
                    {{ $max ? "maxlength=$max" : '' }}
                    {{ $min ? "minlength=$min" : '' }}
                    {{ $pattern ? "pattern=$pattern" : '' }}
                    {{ $disabled ? 'disabled' : '' }}
                    {{ $multiple ? 'multiple' : '' }} />
            @endif
            @if ($helperText)
                <small class="form-text text-muted">{{ $helperText }}</small>
            @endif
            @if ($errors->has($errorKey))
                <span class="text-danger">{{ $errors->first($errorKey) }}</span>
            @endif
        </div>
    </div>
@endif