Testing Alpha

resources/views/components/form/form.blade.php

@@ -1,6 +1,6 @@
 @props([
     'id' => uniqid(),                // ID único del formulario
-    'uniqueId' => '',                // ID único del formulario
+    'uid' => '',                // ID único del formulario
     'mode' => 'create',              // Modo actual ('create', 'edit', 'delete')
     'method' => 'POST',              // Método del formulario (POST, GET, PUT, DELETE)
     'action' => '',                  // URL de acción
@@ -31,10 +31,10 @@
 
 <form {{ $attributes->merge($formAttributes) }}>
     @if (!$whitOutId)
-        <x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="id" />
+        <x-vuexy-admin::form.input :uid="$uid" type="hidden" model="id" />
     @endif
     @if (!$whitOutMode)
-        <x-vuexy-admin::form.input :uid="$uniqueId" type="hidden" model="mode" />
+        <x-vuexy-admin::form.input :uid="$uid" type="hidden" model="mode" />
     @endif
     @if ($mode !== 'delete' && in_array($actionPosition, ['top', 'both']))
         <div class="notification-container mb-4"></div>

resources/views/components/form/input-password.blade.php

@@ -0,0 +1,81 @@
+@props([
+    'uid' => uniqid(),
+    'model' => '',
+    'label' => 'Contraseña',
+    'placeholder' => '············',
+    'labelClass' => '',
+    'icon' => null,
+])
+
+@php
+    $livewireModel = $attributes->get('wire:model', $model);
+    $name = $attributes->get('name', $livewireModel);
+    $inputId = $attributes->get('id', $name . '_' . $uid);
+
+    $errorKey = $livewireModel ?: $name;
+    $hasError = $errors->has($errorKey);
+    $errorClass = $hasError ? 'is-invalid' : '';
+@endphp
+
+<div class="mb-4 fv-row">
+    <label class="form-label {{ $labelClass }}" for="{{ $inputId }}">{{ $label }}</label>
+
+    <div class="input-group input-group-merge">
+        {{-- Prefijo (opcional) --}}
+        @if ($icon)
+            <span class="input-group-text">
+                <i class="{{ $icon }}"></i>
+            </span>
+        @endif
+
+        {{-- Input --}}
+        <input
+            type="password"
+            id="{{ $inputId }}"
+            name="{{ $name }}"
+            wire:model="{{ $livewireModel }}"
+            class="form-control {{ $errorClass }}"
+            placeholder="{{ $placeholder }}"
+            autocomplete="new-password"
+            aria-describedby="{{ $inputId }}-aria"
+        />
+
+        {{-- Toggle --}}
+        <span class="input-group-text cursor-pointer toggle-password" data-target="{{ $inputId }}">
+            <i class="ti ti-eye-off password-toggle-icon"></i>
+        </span>
+    </div>
+    @if ($hasError)
+        <span class="text-danger">{{ $errors->first($errorKey) }}</span>
+    @endif
+</div>
+
+@push('page-script')
+    <script>
+        function attachPasswordToggles() {
+            document.querySelectorAll('.toggle-password').forEach(toggle => {
+                const alreadyAttached = toggle.getAttribute('data-bound');
+                if (alreadyAttached) return;
+
+                toggle.setAttribute('data-bound', 'true');
+
+                toggle.addEventListener('click', function () {
+                    const targetId = this.getAttribute('data-target');
+                    const input = document.getElementById(targetId);
+                    const icon = this.querySelector('.password-toggle-icon');
+
+                    if (input && icon) {
+                        const isPassword = input.type === 'password';
+                        input.type = isPassword ? 'text' : 'password';
+                        icon.classList.toggle('ti-eye', isPassword);
+                        icon.classList.toggle('ti-eye-off', !isPassword);
+                    }
+                });
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", function () {
+            attachPasswordToggles();
+        });
+    </script>
+@endpush

resources/views/components/form/input.blade.php

@@ -146,14 +146,14 @@
             {{-- Prefijo --}}
             @if ($prefix || $prefixIcon)
                 @if ($prefixClickable)
-                    <button type="button" class="input-group-text cursor-pointer" {{ $prefixAction ? "wire:click=$prefixAction" : '' }}>
+                    <span class="input-group-text cursor-pointer" {{ $prefixAction ? "wire:click=$prefixAction" : '' }}>
                         @if ($prefixIcon)
                             <i class="{{ $prefixIcon }}"></i>
                         @endif
                         @if ($prefix)
                             {{ $prefix }}
                         @endif
-                    </button>
+                    </span>
                 @else
                     <span class="input-group-text">
                         @if ($prefixIcon)
@@ -171,14 +171,14 @@
             {{-- Sufijo --}}
             @if ($suffix || $suffixIcon)
                 @if ($suffixClickable)
-                    <button type="button" class="input-group-text cursor-pointer" {{ $suffixAction ? "wire:click=$suffixAction" : '' }}>
+                    <span class="input-group-text cursor-pointer" {{ $suffixAction ? "wire:click=$suffixAction" : '' }}>
                         @if ($suffixIcon)
                             <i class="{{ $suffixIcon }}"></i>
                         @endif
                         @if ($suffix)
                             {{ $suffix }}
                         @endif
-                    </button>
+                    </span>
                 @else
                     <span class="input-group-text">
                         @if ($suffixIcon)