PertecTag

Um componente de tag personalizado e flexível para Vue.js 3, desenvolvido pelo Grupo Pereira.

📦 Instalação

npm install pertec-tag

🚀 Uso Básico

Importação e Registro Global

import { createApp } from 'vue'
import PertecTagPlugin from 'pertec-tag'
import App from './App.vue'

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

Importação Local

<template>
  <PertecTag label="Minha Tag" />
</template>

<script>
import { PertecTag } from 'pertec-tag'

export default {
  components: {
    PertecTag
  }
}
</script>

📋 Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | String | obrigatório | Texto exibido na tag | | variant | String | 'default' | Variante da cor ('default', 'success', 'warning', 'error', 'info') | | tone | String | 'subtle' | Tom da cor ('subtle', 'filled') | | size | String | 'md' | Tamanho da tag ('sm', 'md') |

🎨 Variantes

Cores Disponíveis

• default: Azul neutro
• success: Verde para ações positivas
• warning: Amarelo para avisos
• error: Vermelho para erros
• info: Azul para informações

Tons

• subtle: Fundo suave com borda
• filled: Fundo sólido sem borda

Tamanhos

• sm: Pequeno (18px de altura)
• md: Médio (24px de altura)

🔥 Exemplos

Exemplos Básicos

<template>
  <!-- Tag básica -->
  <PertecTag label="Tag Padrão" />
  
  <!-- Diferentes variantes -->
  <PertecTag label="Sucesso" variant="success" />
  <PertecTag label="Aviso" variant="warning" />
  <PertecTag label="Erro" variant="error" />
  <PertecTag label="Info" variant="info" />
  
  <!-- Diferentes tons -->
  <PertecTag label="Subtle" variant="success" tone="subtle" />
  <PertecTag label="Filled" variant="success" tone="filled" />
  
  <!-- Diferentes tamanhos -->
  <PertecTag label="Pequeno" size="sm" />
  <PertecTag label="Médio" size="md" />
</template>

Com Ícones

<template>
  <!-- Ícone à esquerda -->
  <PertecTag label="Com ícone" variant="success">
    <template #leftIcon>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
      </svg>
    </template>
  </PertecTag>
  
  <!-- Ícone à direita -->
  <PertecTag label="Deletar" variant="error">
    <template #rightIcon>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      </svg>
    </template>
  </PertecTag>
  
  <!-- Ambos os ícones -->
  <PertecTag label="Completo" variant="info">
    <template #leftIcon>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
      </svg>
    </template>
    <template #rightIcon>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
        <path d="M7 14l5-5 5 5z"/>
      </svg>
    </template>
  </PertecTag>
</template>

Exemplo Completo

<template>
  <div class="tags-container">
    <h3>Tags de Status</h3>
    <div class="tags-row">
      <PertecTag 
        label="Ativo" 
        variant="success" 
        tone="filled"
        @click="handleTagClick('ativo')" 
      />
      <PertecTag 
        label="Pendente" 
        variant="warning" 
        tone="subtle"
        @click="handleTagClick('pendente')" 
      />
      <PertecTag 
        label="Inativo" 
        variant="error" 
        tone="subtle"
        @click="handleTagClick('inativo')" 
      />
    </div>
    
    <h3>Tags com Ícones</h3>
    <div class="tags-row">
      <PertecTag 
        label="Download" 
        variant="info" 
        size="sm"
      >
        <template #leftIcon>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
          </svg>
        </template>
      </PertecTag>
      
      <PertecTag 
        label="Notificação" 
        variant="warning"
      >
        <template #leftIcon>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
          </svg>
        </template>
      </PertecTag>
    </div>
  </div>
</template>

<script>
import { PertecTag } from 'pertec-tag'

export default {
  components: {
    PertecTag
  },
  methods: {
    handleTagClick(status) {
      console.log(`Tag clicada: ${status}`)
    }
  }
}
</script>

<style scoped>
.tags-container {
  padding: 20px;
}

.tags-row {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

h3 {
  margin-bottom: 10px;
  color: #333;
}
</style>

🌙 Suporte ao Modo Escuro

O componente inclui suporte automático ao modo escuro através de:

1. Media Query: @media (prefers-color-scheme: dark)
2. Classe CSS: Aplicação da classe .dark no elemento raiz

/* Automaticamente ativa com preferência do sistema */
@media (prefers-color-scheme: dark) {
  /* estilos do modo escuro */
}

/* Ou com classe CSS */
.dark .pertec-tag {
  /* estilos do modo escuro */
}

🎯 Slots

leftIcon

Permite inserir um ícone ou elemento à esquerda do texto.

rightIcon

Permite inserir um ícone ou elemento à direita do texto.

⚡ Eventos

O componente herda todos os eventos nativos do elemento div, incluindo:

• @click
• @mouseenter
• @mouseleave
• @focus
• @blur

🔧 Personalização

CSS Custom Properties

Você pode personalizar as cores criando suas próprias variantes CSS:

.custom-tag {
  background-color: #f0f9ff;
  color: #0369a1;
  border-color: #bae6fd;
}

Sobrescrevendo Estilos

<PertecTag 
  label="Tag Personalizada" 
  class="minha-tag-customizada"
/>

<style>
.minha-tag-customizada {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: white;
  border: none;
  font-weight: bold;
}
</style>

📱 Responsividade

O componente é totalmente responsivo e se adapta automaticamente a diferentes tamanhos de tela.

🔗 Requisitos

• Vue.js 3.0+
• Navegadores modernos (ES6+)

📄 Licença

ISC - Grupo Pereira

👥 Contribuição

Desenvolvido por Jacks Bruno para o Grupo Pereira.

Grupo Pereira - Componentes Vue.js