Português Brasileiro

English

Português Brasileiro

English

Appearance

Instalação ​

O Tony Components é uma biblioteca moderna de componentes Vue projetada para oferecer usabilidade, flexibilidade e design consistente. É compatível com Nuxt 3, Vite e aplicações Vue 3 convencionais.

Pré-requisitos ​

Antes de instalar o Tony Components, certifique-se de ter:

  • Node.js 16.x ou superior
  • npm 7+ ou yarn/pnpm
  • Vue 3.x
  • (Opcional) Nuxt 3.x para integração com Nuxt

Instalação via npm ​

bash
npm install @liialabs/tony-components

Instalação via yarn ​

bash
yarn add @liialabs/tony-components

Instalação via pnpm ​

bash
pnpm add @liialabs/tony-components

Configuração ​

Nuxt 3 ​

  1. Adicione o módulo ao seu arquivo nuxt.config.ts:
typescript

export default defineNuxtConfig({
  modules: [
    'tony-components',
  ],
  tonyComponents: {
    darkMode: true, // Ativar tema escuro
    useTony: true, // Ativar o tema global
    useLayout: true, // Ativar layouts
    useComponents: true, // Ativar componentes
    useForms: true, // Ativar formulários
    useInertia: false, // Desativar suporte ao Inertia.js
  },
});
  1. Execute o servidor de desenvolvimento:
bash

npm run dev

Aplicações Vue com Vite ​

  1. Importe e registre o plugin no arquivo vite.config.ts:
typescript
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import TonyComponents from 'tony-components';

export default defineConfig({
  plugins: [
    vue(),
    TonyComponents({
      useTony: true, // Ativar o tema global
      useLayout: true, // Ativar layouts
      useComponents: true, // Ativar componentes
      useForms: true, // Ativar formulários
      useInertia: false, // Desativar suporte ao Inertia.js
    }),
  ],
});
  1. Execute o servidor de desenvolvimento
shell
npm run dev

Vue 3 com Webpack ​

Para projetos Vue 3 que utilizam Webpack, você precisa registrar os componentes manualmente:

  1. Crie um arquivo de plugin plugins/tony-components.js:
typescript

import { tonyComponents } from '@liialabs/tony-components';

export default {
  install: (app) => {
    app.use(tonyComponents, {
      darkMode: true,
      useTony: true,
      useComponents: true,
      useForms: true,
    });
  }
};
  1. Importe o plugin no seu arquivo main.js
typescript

import { createApp } from 'vue';
import App from './App.vue';
import tonyComponents from './plugins/tony-components';

// Importar estilos (se necessário)
import '@liialabs/tony-components/dist/style.css';

const app = createApp(App);
app.use(tonyComponents);
app.mount('#app');

Arquivo de Configuração ​

O Tony Components usa um sistema flexível de configuração através do arquivo tony.configuration.json. Este arquivo permite personalizar aspectos como:

  • Paleta de cores
  • Tipografia
  • Espaçamento
  • Breakpoints responsivos
  • Estilos de componentes

Exemplo de configuração básica ​

Crie um arquivo tony.configuration.json na raiz do seu projeto:

json
{
  "theme": {
    "colors": {
      "primary": "#3498db",
      "secondary": "#2ecc71",
      "accent": "#9b59b6",
      "info": "#3498db",
      "success": "#2ecc71",
      "warning": "#f39c12",
      "error": "#e74c3c",
      "text": "#2c3e50",
      "background": "#ffffff",
      "customColor1": "#1abc9c"
    },
    "typography": {
      "fontFamily": "'Roboto', sans-serif",
      "fontSize": {
        "base": "16px",
        "small": "0.875rem",
        "large": "1.125rem"
      }
    },
    "spacing": {
      "base": "1rem",
      "xs": "0.25rem",
      "sm": "0.5rem",
      "md": "1rem",
      "lg": "1.5rem",
      "xl": "2rem"
    }
  }
}

Fluxo de Transformação O arquivo de configuração é processado automaticamente durante o build, gerando variáveis TypeScript e SCSS que são usadas em toda a biblioteca. Isto garante consistência entre o código e os estilos.

Para mais detalhes sobre o sistema de transformação, consulte a seção de temas.

Uso Básico ​

Após a instalação e configuração, você pode utilizar os componentes do Tony Components diretamente nos seus arquivos Vue:

vue
<template>
  <TCard>
    <TCardHeader>Meu Card</TCardHeader>
    <TCardBody>
      <p>Conteúdo do card</p>
      <TButton flavor="primary">Clique Aqui</TButton>
    </TCardBody>
  </TCard>
</template>

No Vue, existe uma convenção importante sobre como os nomes de componentes são tratados. Quando você registra um componente em camelCase (por exemplo, TCard), o Vue automaticamente o converte para kebab-case (por exemplo, t-card) quando usado no template.

Ambas as Sintaxes são válidas ​

HTML é insensível a maiúsculas e minúsculas. Isso significa que, no contexto de um arquivo .vue, o navegador não diferencia entre <TCard> e <t-card>. Para evitar ambiguidades e seguir as convenções do HTML, o Vue converte automaticamente os nomes de componentes camelCase para kebab-case.

vue
<template>
  <t-card>
    <t-card-header>Meu Card</t-card-header>
    <t-card-body>
      <p>Conteúdo do card</p>
      <t-button flavor="primary">Clique Aqui</t-button>
    </t-card-body>
  </t-card>
</template>

Quando usar cada formato? ​

  • CamelCase: É mais comum em arquivos .vue quando você quer manter consistência com o nome do componente no código JavaScript.

  • kebab-case: É preferido em templates HTML, pois segue as convenções do HTML e é mais legível para desenvolvedores acostumados com o padrão de tags HTML

Verificando a Instalação ​

Para verificar se o Tony Components está corretamente instalado e funcional, crie um componente de teste:

vue
<template>
  <div class="test-container">
    <h2>Teste do Tony Components</h2>
    <div class="button-row">
      <t-button>Botão Padrão</t-button>
      <t-button flavor="primary">Botão Primário</t-button>
      <t-button flavor="secondary">Botão Secundário</t-button>
      <t-button flavor="accent">Botão Accent</t-button>
    </div>

    <div class="card-example">
      <t-card>
        <t-card-header>Exemplo de Card</t-card-header>
        <t-card-body>
          <p>Se você estiver vendo este card com estilos aplicados, o Tony Components está funcionando corretamente!</p>
          <t-button flavor="success">Sucesso!</t-button>
        </t-card-body>
      </t-card>
    </div>
  </div>
</template>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.button-row {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.card-example {
  margin-top: 30px;
}
</style>

Se os botões forem renderizados com os estilos do Tony Components, a instalação foi bem-sucedida!

Próximos Passos ​

Agora que você instalou o Tony Components, recomendamos:

  • Explorar a estrutura de diretórios para entender a organização da biblioteca
  • Aprender sobre a integração com Vue e integração com Laravel
  • Personalizar a aparência através da configuração
  • Criar seu primeiro app com Tony Components

Problemas Comuns ​

Os componentes não estão sendo reconhecidos ​

Certifique-se de que:

  • Você registrou corretamente o plugin
  • Todos os imports estão corretos
  • Você está usando a versão correta do Vue (Vue 3+)

Os Estilos não estão sendo aplicados ​

Verifique se:

  • Os arquivos CSS foram importados corretamente
  • Não há conflitos com outros frameworks CSS
  • O arquivo de configuração está na localização correta