InputMask
Uso
El componente SInputMask envuelve a SInput con funcionalidad de mascara usando la libreria IMask. Usa la prop mask para definir el patron de entrada.
Patrones de Mascara
Usa diferentes patrones de mascara para aplicar formatos como fechas, numeros de telefono y numeros de tarjeta de credito. El caracter 0 representa un digito requerido.
Error
Establece error en true para mostrar el input con estilo de error.
Deshabilitado
Establece disabled en true para evitar la interaccion del usuario.
Block
El componente SInputMaskBlock envuelve a SInputMask 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
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
mask | FactoryOpts['mask'] | - | El patron de mascara (ej. '00/00/0000') |
modelValue | string | number | null | - | El valor del input (v-model) |
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.
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | Se emite cuando el valor con mascara cambia |
complete | - | Se emite cuando la mascara esta completamente satisfecha |
Slots
| Nombre | Descripcion |
|---|---|
left | Contenido personalizado en el lado izquierdo del input |
right | Contenido personalizado en el lado derecho del input |