InputPassword
Uso
El componente SInputPassword envuelve a SInput con un boton para alternar la visibilidad. Haz clic en el icono de ojo para mostrar u ocultar la contrasena.
Medidor
Establece meter en true para mostrar una barra de color en la parte inferior del input indicando la validez de la contrasena. Combina con rules para validacion completa.
Reglas de Validacion
Usa la prop rules para definir criterios de validacion de contrasena. Combina con el componente SInputPasswordPanel para mostrar retroalimentacion de validacion en tiempo real.
Deshabilitado
Establece disabled en true para evitar la interaccion del usuario.
Block
El componente SInputPasswordBlock envuelve a SInputPassword con una etiqueta, texto de ayuda y texto de error. Combina todas las props del componente base con label, helpText y errorText. Cuando se proporciona errorText, el estado de error se aplica automaticamente.
Props
SInputPassword
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | string | number | null | - | El valor de la contrasena (v-model) |
rules | TRules | - | Objeto de reglas de validacion |
meter | boolean | false | Muestra la barra de medidor de seguridad |
placeholder | string | - | Texto placeholder |
disabled | boolean | false | Deshabilita el input |
error | boolean | false | Muestra estilos de error |
rounded | 'both' | 'left' | 'right' | 'none' | 'full' | 'both' | Estilo de radio de borde |
El componente tambien acepta todas las props de SInput.
Objeto de Reglas
| Regla | Tipo | Descripcion |
|---|---|---|
min | number | Longitud minima de caracteres |
max | number | Longitud maxima de caracteres |
lowercase | boolean | Requiere al menos una letra minuscula |
uppercase | boolean | Requiere al menos una letra mayuscula |
digit | boolean | Requiere al menos un digito |
special | boolean | Requiere al menos un caracter especial |
SInputPasswordPanel
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
state | TState | - | El estado de validacion del evento state |
open | boolean | true | Si el panel esta expandido |
class | string | - | Clases CSS adicionales |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | Se emite cuando el valor de la contrasena cambia |
state | TState | Se emite con el objeto de estado de validacion |
isValid | boolean | Se emite cuando la validez general cambia |