fintech-ui-kit

UI Kit FinTech es un pequeño paquete de componentes UI accesibles, sencillos y personalizables, diseñada con Vue 3, TailwindCSS 3, y pensada especialmente para proyectos del sector FinTech.

Paquetes requeridos

Vue 3, TailwindCSS 3

Features

• Botones
• Inputs
• Modal

Authors

• @PedroMendoza

Instalación

Instalar fintech-ui-kit con npm

  npm install fintech-ui-kit

Importamos y usamos en un proyecto Vue 3

<script setup>
import { Button, Modal, Input } from 'fintech-ui-kit'
</script>

<template>
  <Button label="Click me">Aceptar<Button>
  <Input placeholder="Escribe aquí..." />
  <Modal :visible="true">
    <template #title>
      <h2 class="text-xl font-bold">Hola desde el Modal</h2>
    </template>  
  <Modal>
</template>

API de Componentes

Boton

• Props

| Nombre | Tipo | Defecto | Descripción | | :-------- | :------- | :------- | :------------------------------ | | size | string | md | Se define el tamaño del boton | | variant | string | primary | Se define la variante del boton | | disabled | boolean | false | Desabilita el boton |

Input

• Props

| Nombre | Tipo | Defecto | Descripción | | :-------- | :------- | :------- | :------------------------------ | | value | string, number | undefined | El valor del input | | label | string | undefined | Se define la etiqueta del input | | type | string | text | Se define el tipo del input | | placeholder | string | uundefined | Se define el placeholder del input | | variant | string | primary | Se define la variante del input | | disabled | boolean | false | Desabilita el input | | rounded | boolean | false | Agregar el redondeado al input | | error | string | undefined | Ingresa el mensaje de error al input |

Modal

• Props

| Nombre | Tipo | Defecto | Descripción | | :-------- | :------- | :------- | :------------------------------ | | visible | boolean | false | El valor del modal | | width | string | max-w-md | Se define el ancho del modal | | height | string | auto | Se define el alto del modal | | rounded | string | rounded-2xl | Se define el valor del redondeado del modal |

• Evento

| Nombre | Descripción | | :-------- | :------------------------------ | | close | Emite el evento para el cerrar el modal |

• Slots

| Nombre | Descripción | | :-------- | :------------------------------ | | title | Se define el slot para el titulo del modal | | content | Se define el slot para el contenido del modal | | actions | Se define el slot para los botones del modal |

Tabla

• Props

| Nombre | Tipo | Defecto | Descripción | | :-------- | :------- | :------- | :------------------------------ | | headers | array | [] | Se define el encabezado de la tabla | | items | array | [] | Se define el contenido de la tabla | | pagination | object | {} | Se define la paginacion de la tabla |