npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I鈥檝e always been into building performant and accessible sites, but lately I鈥檝e been taking it extremely seriously. So much so that I鈥檝e been building a tool to help me optimize and monitor the sites that I build to make sure that I鈥檓 making an attempt to offer the best experience to those who visit them. If you鈥檙e into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 馃憢, I鈥檓 Ryan Hefner聽 and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you鈥檙e interested in other things I鈥檓 working on, follow me on Twitter or check out the open source projects I鈥檝e been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon鈥搃sh.

Open Software & Tools

This site wouldn鈥檛 be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 馃檹

漏 2026 鈥撀燩kg Stats / Ryan Hefner

casarify

v1.1.0

Published

隆Bienvenido a casarify! 馃殌

Downloads

16

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

certisurdevcertisurdev

Keywords

Readme

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.|