first commit
This commit is contained in:
169
resources/views/components/form/input.blade.php
Normal file
169
resources/views/components/form/input.blade.php
Normal file
@ -0,0 +1,169 @@
|
||||
@props([
|
||||
// Identificador único
|
||||
'uid' => uniqid(),
|
||||
|
||||
// Modelo de Livewire
|
||||
'model' => '',
|
||||
|
||||
// Etiqueta y Clases
|
||||
'label' => '',
|
||||
'labelClass' => '',
|
||||
'placeholder' => '',
|
||||
|
||||
// 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,
|
||||
'clickableIcon' => null,
|
||||
|
||||
// Configuración especial
|
||||
'phoneMode' => false, // "national", "international", "both"
|
||||
|
||||
// Diseño de disposición (columnas)
|
||||
'inline' => false,
|
||||
'labelCol' => 4,
|
||||
'inputCol' => 8,
|
||||
|
||||
// Configuración de etiquetas flotantes y texto de ayuda
|
||||
'floatLabel' => false,
|
||||
'helperText' => '',
|
||||
|
||||
// Atributos adicionales
|
||||
'attributes' => new \Illuminate\View\ComponentAttributeBag([]),
|
||||
])
|
||||
|
||||
@php
|
||||
// **Configuración de Name, ID y Model**
|
||||
$livewireModel = $attributes->get('wire:model', $model);
|
||||
$name = $attributes->get('name', $livewireModel);
|
||||
$inputId = $attributes->get('id', $name . '_' . $uid);
|
||||
$type = $attributes->get('type', 'text');
|
||||
|
||||
// **Definir formato de teléfono según `phoneMode`**
|
||||
if ($phoneMode) {
|
||||
$type = 'tel';
|
||||
$attributes = $attributes->merge([
|
||||
'autocomplete' => 'tel',
|
||||
'inputmode' => 'tel',
|
||||
]);
|
||||
|
||||
switch ($phoneMode) {
|
||||
case 'national':
|
||||
$attributes = $attributes->merge([
|
||||
'pattern' => '^(?:\D*\d){10,}$',
|
||||
'placeholder' => $placeholder !== false ? ($placeholder ?: 'Ej. (55) 1234-5678') : null,
|
||||
]);
|
||||
break;
|
||||
|
||||
case 'international':
|
||||
$attributes = $attributes->merge([
|
||||
'pattern' => '^\+?[1-9]\d{1,14}$',
|
||||
'placeholder' => $placeholder !== false ? ($placeholder ?: 'Ej. +52 1 55 1234-5678') : null,
|
||||
]);
|
||||
break;
|
||||
|
||||
case 'both':
|
||||
$attributes = $attributes->merge([
|
||||
'pattern' => '(^(?:\D*\d){10,}$)|(^\+?[1-9]\d{1,14}$)',
|
||||
'placeholder' => $placeholder !== false ? ($placeholder ?: 'Ej. (55) 1234-5678 o +52 1 55 1234-5678') : null,
|
||||
]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// **Manejo del Placeholder si no lo estableció `phoneMode`**
|
||||
if (!$attributes->has('placeholder')) {
|
||||
if ($placeholder === false) {
|
||||
// No agregar `placeholder`
|
||||
$placeholderAttr = [];
|
||||
} elseif (empty($placeholder)) {
|
||||
// Generar automáticamente desde el `label`
|
||||
$placeholderAttr = ['placeholder' => 'Ingrese ' . strtolower($label)];
|
||||
} else {
|
||||
// Usar `placeholder` definido manualmente
|
||||
$placeholderAttr = ['placeholder' => $placeholder];
|
||||
}
|
||||
|
||||
// Fusionar el placeholder si no fue definido en `phoneMode`
|
||||
$attributes = $attributes->merge($placeholderAttr);
|
||||
}
|
||||
|
||||
// **Manejo de errores**
|
||||
$errorKey = $livewireModel ?: $name;
|
||||
$hasError = $errors->has($errorKey);
|
||||
$errorClass = $hasError ? 'is-invalid' : '';
|
||||
|
||||
// **Clases dinámicas**
|
||||
$sizeClass = match ($size) {
|
||||
'sm' => 'form-control-sm',
|
||||
'lg' => 'form-control-lg',
|
||||
default => '',
|
||||
};
|
||||
|
||||
$alignClass = match ($align) {
|
||||
'center' => 'text-center',
|
||||
'end' => 'text-end',
|
||||
default => '',
|
||||
};
|
||||
|
||||
// **Fusionar atributos**
|
||||
$inputAttributes = $attributes->merge([
|
||||
'type' => $type,
|
||||
'id' => $inputId,
|
||||
'name' => $name,
|
||||
])->class("form-control $sizeClass $alignClass $errorClass");
|
||||
@endphp
|
||||
|
||||
{{-- Estructura del Input --}}
|
||||
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }}">
|
||||
{{-- Etiqueta --}}
|
||||
@if ($label)
|
||||
<label for="{{ $inputId }}" class="form-label {{ $labelClass }}">{{ $label }}</label>
|
||||
@endif
|
||||
|
||||
{{-- Input con Prefijos, Sufijos o Íconos --}}
|
||||
@if ($prefix || $suffix || $icon || $clickableIcon)
|
||||
<div class="input-group input-group-merge">
|
||||
@isset($prefix)
|
||||
<span class="input-group-text">{{ $prefix }}</span>
|
||||
@endisset
|
||||
|
||||
@isset($icon)
|
||||
<span class="input-group-text"><i class="{{ $icon }}"></i></span>
|
||||
@endisset
|
||||
|
||||
<input {!! $inputAttributes !!} {{ $livewireModel ? "wire:model=$livewireModel" : '' }} />
|
||||
|
||||
@isset($suffix)
|
||||
<span class="input-group-text">{{ $suffix }}</span>
|
||||
@endisset
|
||||
|
||||
@isset($clickableIcon)
|
||||
<button type="button" class="input-group-text cursor-pointer">
|
||||
<i class="{{ $clickableIcon }}"></i>
|
||||
</button>
|
||||
@endisset
|
||||
</div>
|
||||
@else
|
||||
{{-- Input Simple --}}
|
||||
<input {!! $inputAttributes !!} {{ $livewireModel ? "wire:model=$livewireModel" : '' }} />
|
||||
@endif
|
||||
|
||||
{{-- Texto de ayuda --}}
|
||||
@if ($helperText)
|
||||
<div class="form-text">{{ $helperText }}</div>
|
||||
@endif
|
||||
|
||||
{{-- Mensajes de error --}}
|
||||
@if ($hasError)
|
||||
<span class="text-danger">{{ $errors->first($errorKey) }}</span>
|
||||
@endif
|
||||
</div>
|
Reference in New Issue
Block a user