Prepare modules

This commit is contained in:
2025-03-22 12:44:30 -06:00
parent 099267ee07
commit 7d8566350d
137 changed files with 3723 additions and 4325 deletions

View File

@ -0,0 +1,24 @@
@props([
'type' => 'primary', // Tipos: primary, secondary, success, danger, warning, info, dark
'outline' => false,
'dismissible' => false,
'icon' => null,
])
@php
$alertClass = $outline ? "alert-outline-{$type}" : "alert-{$type}";
@endphp
<div class="alert {{ $alertClass }} {{ $dismissible ? 'alert-dismissible' : '' }} d-flex align-items-center" role="alert">
@if ($icon)
<span class="alert-icon rounded me-2">
<i class="{{ $icon }}"></i>
</span>
@endif
<div>
{{ $slot }}
</div>
@if ($dismissible)
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
@endif
</div>

View File

@ -71,7 +71,7 @@
@endphp
{{-- ============================ CHECKBOX CON INPUT GROUP ============================ --}}
<div class="mb-4 {{ $parentClass }}">
<div class="mb-4 {{ $parentClass }} fv-row">
@if ($label)
<label for="{{ $checkboxId }}" class="{{ $labelClass }}">{{ $label }}</label>
@endif

View File

@ -74,7 +74,7 @@
@if ($switch)
{{-- ============================ MODO SWITCH ============================ --}}
<div class="{{ $alignClass }} {{ $inline ? 'd-inline-block' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-2' }}">
<div class="{{ $alignClass }} {{ $inline ? 'd-inline-block' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-2' }} fv-row">
<label class="switch {{ $switchTypeClass }} {{ $switchColorClass }} {{ $sizeClass }} {{ $labelClass }}">
<input
{{ $livewireModel ? "wire:model=$livewireModel" : '' }}
@ -110,7 +110,7 @@
@else
{{-- ============================ MODO CHECKBOX ============================ --}}
<div class="form-check {{ $checkColorClass }} {{ $alignClass }} {{ $sizeClass }} {{ $inline ? 'form-check-inline' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }}">
<div class="form-check {{ $checkColorClass }} {{ $alignClass }} {{ $sizeClass }} {{ $inline ? 'form-check-inline' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }} fv-row">
<input
{{ $livewireModel ? "wire:model=$livewireModel" : '' }}
{{ $disabled ? 'disabled' : '' }}

View File

@ -24,7 +24,7 @@
: ($image ? "<img src='{$image}' alt='{$title}' class='img-fluid rounded'>" : '');
@endphp
<div class="mb-4 form-check custom-option custom-option-icon {{ $checked ? 'checked' : '' }}">
<div class="mb-4 form-check custom-option custom-option-icon {{ $checked ? 'checked' : '' }} fv-row">
<label class="form-check-label custom-option-content" for="{{ $inputId }}">
<span class="custom-option-body">
{!! $visualContent !!}

View File

@ -8,6 +8,8 @@
'wireSubmit' => false, // Usar wire:submit.prevent
'class' => '', // Clases adicionales para el formulario
'actionPosition' => 'bottom', // Posición de acciones: top, bottom, both, none
'whitOutId' => false, // Excluir el ID del formulario
'whitOutMode' => false, // Excluir el modo del formulario
])
@php
@ -28,8 +30,12 @@
@endphp
<form {{ $attributes->merge($formAttributes) }}>
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="id" />
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="mode" />
@if (!$whitOutId)
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="id" />
@endif
@if (!$whitOutMode)
<x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="mode" />
@endif
@if ($mode !== 'delete' && in_array($actionPosition, ['top', 'both']))
<div class="notification-container mb-4"></div>
<div class="form-actions mb-4">

View File

@ -1,184 +0,0 @@
@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

View File

@ -16,13 +16,18 @@
'mb0' => false, // Remover margen inferior
'parentClass' => '',
// Elementos opcionales antes/después del input
// Elementos de prefijo
'prefix' => null,
'suffix' => null,
'prefixIcon' => null,
'icon' => null, // Alias para prefixIcon
'prefixClickable' => false,
'prefixAction' => null,
// Íconos dentro del input
'icon' => null,
'clickableIcon' => null,
// Elementos de sufijo
'suffix' => null,
'suffixIcon' => null,
'suffixClickable' => false,
'suffixAction' => null,
// Configuración especial
'phoneMode' => false, // "national", "international", "both"
@ -47,6 +52,9 @@
$inputId = $attributes->get('id', $name . '_' . $uid);
$type = $attributes->get('type', 'text');
// Manejar el alias de icon a prefixIcon
$prefixIcon = $prefixIcon ?? $icon;
// **Definir formato de teléfono según `phoneMode`**
if ($phoneMode) {
$type = 'tel';
@ -120,37 +128,68 @@
'id' => $inputId,
'name' => $name,
])->class("form-control $sizeClass $alignClass $errorClass");
// Verificar si se necesita el input-group
$hasAddons = $prefix || $prefixIcon || $suffix || $suffixIcon;
@endphp
{{-- Estructura del Input --}}
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }}">
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }} fv-row">
{{-- Etiqueta --}}
@if ($label)
<label for="{{ $inputId }}" class="form-label {{ $labelClass }}">{{ $label }}</label>
@endif
{{-- Input con Prefijos, Sufijos o Íconos --}}
@if ($prefix || $suffix || $icon || $clickableIcon)
{{-- Input con Prefijos o Sufijos --}}
@if ($hasAddons)
<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
{{-- Prefijo --}}
@if ($prefix || $prefixIcon)
@if ($prefixClickable)
<button type="button" class="input-group-text cursor-pointer" {{ $prefixAction ? "wire:click=$prefixAction" : '' }}>
@if ($prefixIcon)
<i class="{{ $prefixIcon }}"></i>
@endif
@if ($prefix)
{{ $prefix }}
@endif
</button>
@else
<span class="input-group-text">
@if ($prefixIcon)
<i class="{{ $prefixIcon }}"></i>
@endif
@if ($prefix)
{{ $prefix }}
@endif
</span>
@endif
@endif
<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
{{-- Sufijo --}}
@if ($suffix || $suffixIcon)
@if ($suffixClickable)
<button type="button" class="input-group-text cursor-pointer" {{ $suffixAction ? "wire:click=$suffixAction" : '' }}>
@if ($suffixIcon)
<i class="{{ $suffixIcon }}"></i>
@endif
@if ($suffix)
{{ $suffix }}
@endif
</button>
@else
<span class="input-group-text">
@if ($suffixIcon)
<i class="{{ $suffixIcon }}"></i>
@endif
@if ($suffix)
{{ $suffix }}
@endif
</span>
@endif
@endif
</div>
@else
{{-- Input Simple --}}
@ -166,4 +205,4 @@
@if ($hasError)
<span class="text-danger">{{ $errors->first($errorKey) }}</span>
@endif
</div>
</div>

View File

@ -72,7 +72,7 @@
@endphp
{{-- ============================ RADIO BUTTON CON INPUT GROUP ============================ --}}
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }}">
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }} fv-row">
@if ($label)
<label for="{{ $radioId }}" class="{{ $labelClass }}">{{ $label }}</label>
@endif
@ -86,7 +86,7 @@
type="radio"
{{ $livewireRadio }}
{{ $disabled ? 'disabled' : '' }}
class="form-check-input mt-0"
class="form-check-input fv-row mt-0"
onchange="toggleRadioInputState('{{ $radioId }}', '{{ $textInputId }}', {{ $focusOnCheck ? 'true' : 'false' }}, {{ $disableOnOffRadio ? 'true' : 'false' }})"
>
</div>

View File

@ -72,7 +72,7 @@
@if ($switch)
{{-- ============================ MODO SWITCH ============================ --}}
<div class="{{ $alignClass }} {{ $inline ? 'd-inline-block' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }}">
<div class="{{ $alignClass }} {{ $inline ? 'd-inline-block' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }} fv-row">
<label class="switch {{ $switchTypeClass }} {{ $switchColorClass }} {{ $sizeClass }} {{ $labelClass }}">
<input
{{ $livewireModel ? "wire:model=$livewireModel" : '' }}
@ -102,7 +102,7 @@
@else
{{-- ============================ MODO RADIO ============================ --}}
<div class="{{ $layoutClass }} {{ $radioColorClass }} {{ $alignClass }} {{ $sizeClass }} {{ $inline ? 'form-check-inline' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }}">
<div class="{{ $layoutClass }} {{ $radioColorClass }} {{ $alignClass }} {{ $sizeClass }} {{ $inline ? 'form-check-inline' : '' }} {{ $parentClass }} {{ $mb0 ? '' : 'mb-4' }} fv-row">
<input
{{ $livewireModel ? "wire:model=$livewireModel" : '' }}
{{ $disabled ? 'disabled' : '' }}

View File

@ -1,86 +0,0 @@
@props([
'uid' => uniqid(),
'id' => '',
'model' => '',
'name' => '',
'label' => '',
'labelClass' => 'form-label',
'placeholder' => '',
'options' => [],
'selected' => null,
'class' => '',
'parentClass' => '',
'multiple' => false,
'disabled' => false,
'prefixLabel' => null,
'suffixLabel' => null,
'buttonBefore' => null,
'buttonAfter' => null,
'inline' => false, // Si es en línea
'labelCol' => 2, // Columnas que ocupa el label (Bootstrap grid)
'inputCol' => 10, // Columnas que ocupa el input (Bootstrap grid)
'helperText' => '', // Texto de ayuda opcional
'select2' => false, // Activar Select2 automáticamente
])
@php
$name = $name ?: $model;
$inputId = $id ?: ($uid ? str_replace('.', '_', $name) . '_' . $uid : $name);
$placeholder = $placeholder ?: 'Seleccione ' . strtolower($label);
$errorClass = $errors->has($model) ? 'is-invalid' : '';
$options = is_array($options) ? collect($options) : $options;
$select2Class = $select2 ? 'select2' : ''; // Agrega la clase select2 si está habilitado
@endphp
<div class="{{ $inline ? 'row' : 'mb-4' }} {{ $parentClass }} fv-row">
@if($label != null)
<label for="{{ $inputId }}" class="{{ $inline ? 'col-md-' . $labelCol : '' }} {{ $labelClass }}">{{ $label }}</label>
@endif
<div class="{{ $inline ? 'col-md-' . $inputCol : '' }}">
<div class="input-group {{ $prefixLabel || $suffixLabel || $buttonBefore || $buttonAfter ? 'input-group-merge' : '' }}">
@if ($buttonBefore)
<button class="btn btn-outline-primary waves-effect" type="button">{{ $buttonBefore }}</button>
@endif
@if ($prefixLabel)
<label class="input-group-text" for="{{ $inputId }}">{{ $prefixLabel }}</label>
@endif
<select
id="{{ $inputId }}"
name="{{ $name }}"
class="form-select {{ $errorClass }} {{ $class }} {{ $select2Class }}"
{{ $multiple ? 'multiple' : '' }}
{{ $disabled ? 'disabled' : '' }}
{{ $model ? "wire:model=$model" : '' }}
{{ $select2 ? 'data-live-search="true"' : '' }}
>
@if (!$multiple && $placeholder)
<option value="">{{ $placeholder }}</option>
@endif
@foreach ($options as $key => $value)
<option value="{{ $key }}" {{ (string) $key === (string) $selected ? 'selected' : '' }}>
{{ $value }}
</option>
@endforeach
</select>
@if ($suffixLabel)
<label class="input-group-text" for="{{ $inputId }}">{{ $suffixLabel }}</label>
@endif
@if ($buttonAfter)
<button class="btn btn-outline-primary waves-effect" type="button">{{ $buttonAfter }}</button>
@endif
</div>
@if ($helperText)
<div class="form-text">{{ $helperText }}</div>
@endif
@if ($errors->has($model))
<span class="text-danger">{{ $errors->first($model) }}</span>
@endif
</div>
</div>

View File

@ -88,7 +88,7 @@
@endphp
{{-- ============================ TEXTAREA ============================ --}}
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }} {{ $alignClass }} {{ $floatingClass }}">
<div class="{{ $mb0 ? '' : 'mb-4' }} {{ $parentClass }} {{ $alignClass }} {{ $floatingClass }} fv-row">
@if (!$floating && $label)
<label for="{{ $inputId }}" class="{{ $labelClass }}">{{ $label }}</label>
@endif