Leo Marco Lib

Leo Marco Lib é uma biblioteca de componentes Vue 3 moderna, responsiva e altamente configurável. Estilizada com Tailwind CSS e construída com Vite, ela é perfeita para acelerar o desenvolvimento de interfaces elegantes e responsivas.

🚀 Instalação

Pré-requisitos

Antes de instalar a biblioteca, certifique-se de que seu projeto tenha as seguintes dependências:

npm install vue@^3.5.0 tailwindcss@^4.0.0 chart.js@^4.0.0

Ou com yarn

yarn add vue@^3.5.0 tailwindcss@^4.0.0 chart.js@^4.0.0

Instalando a Leo Marco Lib

npm install @leomarco/leo-marco-lib

Ou com yarn

yarn add @leomarco/leo-marco-lib

✨ Como Usar

1. Importando Componentes

No seu componente Vue 3:

<template>
  <div>
    <app-button label="Meu Botão" color="cyan-500" />
  </div>
</template>

<script setup>
import { AppButton } from '@leomarco/leo-marco-lib';
</script>

2. Importando os estilos da biblioteca

Você precisa importar os estilos da lib no seu main.js ou main.ts:

import '@leomarco/leo-marco-lib/dist/index.css';

⚙️ Exemplo com Props

Os componentes da Leo Marco Lib são altamente personalizáveis com props:

<template>
  <app-button
    rounded
    outlined
    label="Botão Customizado"
    color="green-400"
  />
</template>

📊 Usando Componentes com Chart.js

Se você estiver usando componentes que renderizam gráficos, como por exemplo o AppChart,certifique-se de que o chart.js esteja instalado (como mostrado na instalação).

📦 Build e Exportações

A biblioteca exporta os seguintes arquivos:

• Módulo ES (leo-marco-lib.es.js)

• Módulo UMD (leo-marco-lib.umd.js)

• Estilos CSS (dist/index.css)

Configuração no package.json:

"exports": {
  ".": {
    "import": "./dist/leo-marco-lib.es.js",
    "require": "./dist/leo-marco-lib.umd.js"
  },
  "./dist/index.css": "./dist/index.css"
}