PertecSelect

Um componente de select personalizado para Vue.js 3 desenvolvido pelo Grupo Pereira.

Características

• 🎨 Múltiplos Variantes: Default, Overlay e Overlay Inverted
• 📱 Responsivo: Funciona perfeitamente em dispositivos móveis
• ⌨️ Navegação por Teclado: Suporte completo para navegação com teclado
• 🎯 Acessibilidade: Totalmente acessível com ARIA
• 🌙 Modo Escuro: Suporte automático para modo escuro
• 🔧 TypeScript Ready: Totalmente tipado (quando usar TypeScript)
• 📦 Zero Dependências: Não possui dependências externas além do Vue 3
• 🏷️ Label Contextual: Componente de label configurável para exibir valor selecionado

Instalação

npm install pertec-select

Uso Básico

Registro Global

import { createApp } from 'vue'
import PertecSelectPlugin from 'pertec-select'
import App from './App.vue'

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

Após o registro, todos os componentes estarão disponíveis globalmente:

• PertecSelect
• PertecSelectTrigger
• PertecSelectContent
• PertecSelectItem
• PertecSelectValue
• PertecSelectSelectedLabel
• PertecSelectGroup
• PertecSelectLabel
• PertecSelectSeparator
• PertecSelectScrollUpButton
• PertecSelectScrollDownButton

Uso no Template

<template>
  <PertecSelect 
    :value="selectedValue" 
    :onValueChange="(value) => selectedValue = value"
  >
    <PertecSelectTrigger>
      <PertecSelectValue placeholder="Selecione uma opção..." />
    </PertecSelectTrigger>
    <PertecSelectContent>
      <PertecSelectItem value="apple">🍎 Maçã</PertecSelectItem>
      <PertecSelectItem value="banana">🍌 Banana</PertecSelectItem>
      <PertecSelectItem value="orange">🍊 Laranja</PertecSelectItem>
    </PertecSelectContent>
  </PertecSelect>
</template>

<script setup>
import { ref } from 'vue'
const selectedValue = ref('')
</script>

Importação Individual

import { 
  PertecSelect, 
  PertecSelectTrigger, 
  PertecSelectContent,
  PertecSelectItem,
  PertecSelectValue,
  PertecSelectSelectedLabel
} from 'pertec-select'

Label de Valor Selecionado

O componente PertecSelectSelectedLabel permite exibir uma label configurável que mostra o valor selecionado dentro do container do select. É útil para criar interfaces mais informativas e contextuais.

Uso Básico

<template>
  <div class="select-container">
    <PertecSelectSelectedLabel 
      label="Produto selecionado"
      :showWhenEmpty="false"
    />
    <PertecSelect 
      :value="selectedProduct" 
      :onValueChange="(value) => selectedProduct = value"
    >
      <PertecSelectTrigger>
        <PertecSelectValue placeholder="Selecione um produto..." />
      </PertecSelectTrigger>
      <PertecSelectContent>
        <PertecSelectItem value="laptop">💻 Laptop</PertecSelectItem>
        <PertecSelectItem value="mouse">🖱️ Mouse</PertecSelectItem>
        <PertecSelectItem value="keyboard">⌨️ Teclado</PertecSelectItem>
      </PertecSelectContent>
    </PertecSelect>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const selectedProduct = ref('')
</script>

Exemplos de Uso

<template>
  <!-- Configuração de idioma -->
  <div class="config-section">
    <PertecSelectSelectedLabel 
      label="Idioma atual"
      :showWhenEmpty="true"
    />
    <PertecSelect :value="language" :onValueChange="setLanguage">
      <PertecSelectTrigger>
        <PertecSelectValue placeholder="Selecione o idioma..." />
      </PertecSelectTrigger>
      <PertecSelectContent>
        <PertecSelectItem value="pt">🇧🇷 Português</PertecSelectItem>
        <PertecSelectItem value="en">🇺🇸 English</PertecSelectItem>
        <PertecSelectItem value="es">🇪🇸 Español</PertecSelectItem>
      </PertecSelectContent>
    </PertecSelect>
  </div>

  <!-- Seleção de tema -->
  <div class="config-section">
    <PertecSelectSelectedLabel 
      label="Tema ativo"
      :showWhenEmpty="false"
    />
    <PertecSelect :value="theme" :onValueChange="setTheme">
      <PertecSelectTrigger>
        <PertecSelectValue placeholder="Escolha um tema..." />
      </PertecSelectTrigger>
      <PertecSelectContent>
        <PertecSelectItem value="light">☀️ Claro</PertecSelectItem>
        <PertecSelectItem value="dark">🌙 Escuro</PertecSelectItem>
        <PertecSelectItem value="auto">🔄 Automático</PertecSelectItem>
      </PertecSelectContent>
    </PertecSelect>
  </div>
</template>

Props do PertecSelectSelectedLabel

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | string | obrigatório | Texto da label a ser exibida | | showWhenEmpty | boolean | false | Se deve mostrar a label mesmo quando nenhum valor está selecionado |

Comportamento

• Com valor selecionado: Exibe a label seguida do texto do item selecionado
• Sem valor selecionado:
  • Se showWhenEmpty for true: exibe a label seguida de "-"
  • Se showWhenEmpty for false: não exibe nada
• Suporte a modo escuro: Adapta automaticamente as cores conforme o tema
• Contexto automático: Sincroniza automaticamente com o valor do select pai

Integração com Contexto

O componente se integra automaticamente ao contexto do PertecSelect pai, não sendo necessário passar o valor selecionado manualmente. Ele detecta automaticamente mudanças no valor e atualiza o texto exibido.

Variantes

Default

<PertecSelect variant="default">
  <!-- conteúdo -->
</PertecSelect>

Overlay (para fundos escuros)

<PertecSelect variant="overlay">
  <!-- conteúdo -->
</PertecSelect>

Overlay Inverted

<PertecSelect variant="overlay-inverted">
  <!-- conteúdo -->
</PertecSelect>

Tamanhos

<!-- Tamanho padrão -->
<PertecSelectTrigger>
  <PertecSelectValue />
</PertecSelectTrigger>

<!-- Tamanho pequeno -->
<PertecSelectTrigger size="small">
  <PertecSelectValue />
</PertecSelectTrigger>

Componentes Avançados

Com Grupos e Separadores

<PertecSelectContent>
  <PertecSelectGroup>
    <PertecSelectLabel>Frutas</PertecSelectLabel>
    <PertecSelectItem value="apple">Maçã</PertecSelectItem>
    <PertecSelectItem value="banana">Banana</PertecSelectItem>
  </PertecSelectGroup>
  <PertecSelectSeparator />
  <PertecSelectGroup>
    <PertecSelectLabel>Vegetais</PertecSelectLabel>
    <PertecSelectItem value="carrot">Cenoura</PertecSelectItem>
    <PertecSelectItem value="broccoli">Brócolis</PertecSelectItem>
  </PertecSelectGroup>
</PertecSelectContent>

Com Botões de Scroll

<PertecSelectContent>
  <PertecSelectScrollUpButton />
  <!-- itens -->
  <PertecSelectScrollDownButton />
</PertecSelectContent>

API

PertecSelect Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | value | string | undefined | Valor selecionado | | onValueChange | (value: string) => void | undefined | Callback quando valor muda | | disabled | boolean | false | Se o select está desabilitado | | variant | 'default' \| 'overlay' \| 'overlay-inverted' | 'default' | Variante visual | | placeholder | string | 'Selecione uma opção' | Texto placeholder |

PertecSelectTrigger Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | variant | 'default' \| 'overlay' \| 'overlay-inverted' | 'default' | Variante visual | | size | 'default' \| 'small' | 'default' | Tamanho do trigger | | disabled | boolean | false | Se o trigger está desabilitado |

PertecSelectItem Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | value | string | obrigatório | Valor do item | | disabled | boolean | false | Se o item está desabilitado |

PertecSelectSelectedLabel Props

| Prop | Tipo | Padrão | Descrição | |------|------|--------|-----------| | label | string | obrigatório | Texto da label a ser exibida | | showWhenEmpty | boolean | false | Se deve mostrar a label mesmo quando nenhum valor está selecionado |

Navegação por Teclado

• Enter/Space: Abre o select ou seleciona o item focado
• Seta para baixo: Move o foco para o próximo item
• Seta para cima: Move o foco para o item anterior
• Escape: Fecha o select
• Tab: Fecha o select e move para o próximo elemento

Personalização

O componente usa CSS Modules para estilização. Você pode sobrescrever os estilos importando seus próprios arquivos CSS após o componente.

/* Personalizar cores */
.pertec-select-trigger {
  --select-bg: #your-color;
  --select-border: #your-border-color;
}

Dependências

• Vue.js 3.0+
• Remix Icon (para ícones)

Desenvolvimento

# Instalar dependências
npm install

# Executar em modo desenvolvimento
npm run dev

# Build para produção
npm run build

Licença

ISC - Grupo Pereira

Autor

Jacks Bruno