open-index/open-npm huggingface dataset:
npm package: @leomarco/leo-marco-lib
Description: **Leo Marco Lib** é uma biblioteca de componentes Vue 3 moderna, responsiva e altamente configurável. Estilizada com [Tailwind CSS](https://tailwindcss.com/) e construída com [Vite](https://vitejs.dev/), ela é perfeita para acelerar o desenvolvimento de i
Latest version: 0.0.20

# Leo Marco Lib

**Leo Marco Lib** é uma biblioteca de componentes Vue 3 moderna, responsiva e altamente configurável. Estilizada com [Tailwind CSS](https://tailwindcss.com/) e construída com [Vite](https://vitejs.dev/), 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:

```bash
npm install vue@^3.5.0 tailwindcss@^4.0.0 chart.js@^4.0.0
```

Ou com yarn

```bash
yarn add vue@^3.5.0 tailwindcss@^4.0.0 chart.js@^4.0.0
```

Instalando a Leo Marco Lib

```bash
npm install @leomarco/leo-marco-lib
```
Ou com yarn

```bash
yarn add @leomarco/leo-marco-lib
```

## ✨ Como Usar

### 1. Importando Componentes

No seu componente Vue 3:

```html
<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:

```bash
import '@leomarco/leo-marco-lib/dist/index.css';
```

## ⚙️ Exemplo com Props

Os componentes da Leo Marco Lib são altamente personalizáveis com props:

```html
<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:

```sh
"exports": {
  ".": {
    "import": "./dist/leo-marco-lib.es.js",
    "require": "./dist/leo-marco-lib.umd.js"
  },
  "./dist/index.css": "./dist/index.css"
}

```