Vue 3 + Vite
¡Bienvenido a casarify! 🚀
Una librería moderna desarrollada con Vue.js, Tailwind CSS y Vite, diseñada para facilitar la construcción de interfaces de usuario rápidas, escalables y visualmente atractivas.
Características principales:
Vue.js: Componentes reactivos y reutilizables que simplifican el desarrollo.
Tailwind CSS: Estilizado rápido y eficiente con clases utilitarias.
Vite: Rendimiento mejorado y tiempos de construcción ultrarrápidos.
Ideal para proyectos que buscan combinar rendimiento, simplicidad y diseño moderno.
Instalación
npm install casarify
Incorporacion en el proyecto
Se debe agregar en el archivo main.js o App.vue la siguiente linea: import 'casarify/dist/casarify.css';
Componentes de la Librería
Accordion
Clásico accordion desplegable con titulo y texto en su contenedor.
Props
| Prop | Tipo | Descripción | Default |
|---|
title | String | Texto que se muestra en el header. | "" |
text | String | Texto que se muestra en el desplegable. | "" |
AlarmComponent
Timer con duración configurable.
Props
| Prop | Tipo | Descripción | Default |
|---|
alarmInSec | Number | Duración del timer. | 30 |
startTS | Number | Inicio del timer en TS. | null |
disabled | Boolean | Indica si esta deshabilitado | false |
Emits
| Emit | Descripción |
|---|
alarmStart | Indica el inicio del timer |
alarmExpired | Inicia cuando expiró el timer |
alarmRing | Indica cuando termina el conteo |
AvatarComponent
Contiene el icono con borde consumido en los mensajes.
Props
| Prop | Tipo | Descripción | Default |
|---|
color | String | Color del ícono y del borde | "" |
icon | String | Ícono de Font Awesome. Opciones: check-icon, info-icon, danger-icon, warning-icon, loading-icon | "" |
BlockHeader
Contiene título y subtítulo con sus respectivas fuentes, márgenes y paddings.
Props
| Prop | Tipo | Descripción | Default |
|---|
title | String | Título | "" |
subtitle | String | Subtítulo | "" |
CancelButton
Botón de operación cancel.
Props
| Prop | Tipo | Descripción | Default |
|---|
disabled | Boolean | Opción de deshabilitar el botón | false |
actionText | String | Texto que indica la acción a ejecutar | "" |
Emits
| Emit | Descripción |
|---|
onClick | Evento que se ejecuta con el click del botón |
ChipComponent
Chip seleccionable
Props
| Prop | Tipo | Descripción | Default |
|---|
text | String | Texto del chip | "" |
id | String | Id en caso de corresponder a un grupo de chips. | "" |
isSelected | Boolean | Indica si el chip esta seleccionado | false |
showIcon | Boolean | Indica si se muestra el ícono de seleccionado. | false |
disabled | Boolean | Indica si el chip esta deshabilitado. | false |
Emits
| Emit | Descripción |
|---|
toggle | Evento que se ejecuta al seleccionar el chip. Devuelve su id. |
ChipsGroup
Grupo que contiene los chips.
Props
| Prop | Tipo | Descripción | Default |
|---|
chips | Array | Lista de chips con sus propiedades | [] |
multiselect | Boolean | Indica si se puede seleccionar mas de un chip. | false |
Emits
| Emit | Descripción |
|---|
updateChips | Evento que se ejecuta al seleccionar el chip. Actualiza el que corresponda por su id. |
CustomButtonPrimary
Botón primario.
Props
| Prop | Tipo | Descripción | Default |
|---|
disabled | Boolean | Indica si el botón esta deshabilitado. | false |
actionText | String | Texto que indica la acción a ejecutar | "" |
iconClass | String | Ícono de Font Awesome. | "" |
marginDisabled | Boolean | Elimina el margen que contiene por default | false |
Emits
| Emit | Descripción |
|---|
onClick | Evento que se ejecuta con el click del botón |
CustomButtonSecondary
Botón secundario.
Props
| Prop | Tipo | Descripción | Default |
|---|
disabled | Boolean | Indica si el botón esta deshabilitado. | false |
actionText | String | Texto que indica la acción a ejecutar | "" |
iconClass | String | Ícono de Font Awesome. | "" |
type | String | Indica que tipo de botón es. Opciones: info, success, warning, error. | false |
Emits
| Emit | Descripción |
|---|
onClick | Evento que se ejecuta con el click del botón |
ExpansionPanel
Panel expansivo.
Props
| Prop | Tipo | Descripción | Default |
|---|
openByDefault | Boolean | Indica si el panel esta expandido por default. | false |
title | String | Título del header. | "" |
shadow | Boolean | Indica si contiene sombra. | false |
status | String | Indica que tipo de panel es. Opciones: info, success, warning, error. | "" |
icon | String | Ícono de Font Awesome en el header. | "" |
paddingY | String | Indica el valor del padding sobre el eje y | "" |
Emits
| Emit | Descripción |
|---|
toggle | Evento que se ejecuta con el click sobre el header para expandir |
FadeTransition
Transicion entrante y saliente.
No posee props pero si slot para contener al children.
FieldInput
Input principal que contiene label e ícono al incio.
Props
| Prop | Tipo | Descripción | Default |
|---|
value | String | Valor default en caso de existir | "" |
label | String | Label. | "" |
required | Boolean | Indica si es requerido. | false |
placeholder | String | Placeholder del input. | "" |
icon | String | Ícono de Font Awesome en el header. | "" |
hint | String | Texto del tooltip en caso de existir. | "" |
rules | Array | Conjunto de reglas de validación a considerar | [] |
Emits
| Emit | Descripción |
|---|
changed | Evento que se ejecuta al realizar un cambio. Devuelve un objeto con valid y value. |
FieldInputPass
Input de contraseña que contiene label, ícono al incio e ícono al final para visualizar el contenido.
Props
| Prop | Tipo | Descripción | Default |
|---|
value | String | Valor default en caso de existir | "" |
label | String | Label. | "" |
required | Boolean | Indica si es requerido. | false |
placeholder | String | Placeholder del input. | "" |
icon | String | Ícono de Font Awesome en el header. | "" |
hint | String | Texto del tooltip en caso de existir. | "" |
rules | Array | Conjunto de reglas de validación a considerar | [] |
Emits
| Emit | Descripción |
|---|
changed | Evento que se ejecuta al realizar un cambio. Devuelve un objeto con valid y value. |
FieldSelect
Select principal.
Props
| Prop | Tipo | Descripción | Default |
|---|
value | String | Valor default en caso de existir | "" |
label | String | Label. | "Selecciona una opción" |
required | Boolean | Indica si es requerido. | false |
icon | String | Ícono de Font Awesome en el header. | "" |
hint | String | Texto del tooltip en caso de existir. | "" |
options | Array | Opciones de select. Deben contener value y text. | [] |
labelAttribute | String | Label default para cada opcion | "text" |
Emits
| Emit | Descripción |
|---|
onChange | Evento que se ejecuta al realizar un cambio. Devuelve la opcion seleccionada. |
HintStatusComponent
Elemento que contiene alineados ícono y texto correspondiente a cada mensaje. Se utiliza para armar la lista de mensajes.
Props
| Prop | Tipo | Descripción | Default |
|---|
icon | String | Ícono de Font Awesome en el header. | "" |
text | String | Texto del mensaje. | "" |
innerClass | String | Ícono de Font Awesome. Opciones: check-icon, info-icon, danger-icon, warning-icon, loading-icon. | "" |
canBeClosed | Boolean | Indica si es posible cerrar el mensaje | false |
getStatusInfo | String | Si el mensaje contiene el atributo main se aplicara aqui el color de relleno del mensaje. | "" |
IconTooltip
Tooltip que contiene un ícono sobre el cual deberá realizarse un hover.
Props
| Prop | Tipo | Descripción | Default |
|---|
icon | String | Ícono de Font Awesome. | "" |
text | String | Texto del tooltip. | "" |
LabelComponent
Label.
Props
| Prop | Tipo | Descripción | Default |
|---|
labelText | String | Texto del label. | "" |
htmlFor | String | Id del elemento al cual se debe aplicar. | "" |
LoaderComponent
Loader que contiene icono spinner.
Props
| Prop | Tipo | Descripción | Default |
|---|
size | String | Clase de tailwind que define el tamaño del ícono. | "" |
md | Boolean | Define el tamaño md del spinner | false |
sm | Boolean | Define el tamaño sm del spinner | false |
MainBar
Barra que contiene título e ícono representativos de una sección.
Props
| Prop | Tipo | Descripción | Default |
|---|
iconClass | String | Ícono de Font Awesome. | "" |
large | Boolean | Indica que el tamaño es large | false |
MessagesComponent
Contiene la lista de mensajes asociados a un modelo.
Props
| Prop | Tipo | Descripción | Default |
|---|
model | String | Modelo al cual esta asociado | "general" |
NavigationSteps
Barra de steps asociados a una sección.
props: 'currentStep', 'isLoading',
Props
| Prop | Tipo | Descripción | Default |
|---|
steps | Array | Lista de steps. Cada uno debe contener title y description | [] |
isLoading | Boolean | Indica si el spinner de los pasos debe estar activo | false |
currentStep | Number | Indica en que step se encuentra la sección. | 0 |
OtpInput
Input que contiene e informa un otp.
Props
| Prop | Tipo | Descripción | Default |
|---|
maskedCode | String | Código implicito. | "#######" |
label | String | Label. | null |
Emits
| Emit | Descripción |
|---|
changed | Evento que se ejecuta al realizar un cambio. Devuelve un objeto con valid, code y completeCode. |
PrimarySwitch
Switch primario.
Props
| Prop | Tipo | Descripción | Default |
|---|
text | String | Texto del switch. | "" |
disabled | Boolean | Indica si se encuentra deshabilitado. | false |
turnOn | Boolean | Indica si se encuentra on. | false |
Emits
| Emit | Descripción |
|---|
changeSwitchValue | Evento que se ejecuta al realizar un cambio. Devuelve el valor del switch. |
PrimaryTitle
Título primario.
Props
| Prop | Tipo | Descripción | Default |
|---|
label | String | Texto. | "" |
className | String | Clase que se agrega al contenedor. | "" |
ScrolleableDiv
Contenedor de tamaño fijo sobre el cual se puede realizar un scroll.
Props
| Prop | Tipo | Descripción | Default |
|---|
text | String | Texto. | "" |
TabHeader
Contenedor de tabs.
Props
| Prop | Tipo | Descripción | Default |
|---|
tabs | Array | Lista de tabs. Cada uno debe contener key, title, icon y enabled. | [] |
activeTab | String | indica que tab se encuentra activo. | "" |
Emits
| Emit | Descripción |
|---|
changed | Evento que se ejecuta al realizar un cambio. Devuelve la key de la opcion seleccionada. |
UploadFile
Elemento para subir archivos.
Props
| Prop | Tipo | Descripción | Default |
|---|
innerClass | Array | Clase aplicable al contenedor. | "p-16" |
Emits
| Emit | Descripción |
|---|
onFileSelected | Evento que se ejecuta al subir un archivo. Devuelve el elemento completo. |
UploadImage
Elemento para subir archivos.
Props
| Prop | Tipo | Descripción | Default |
|---|
clase | Array | Clase aplicable al contenedor. | "p-16" |
Emits
| Emit | Descripción |
|---|
onFileSelected | Evento que se ejecuta al subir un archivo. Devuelve el elemento completo. |