Componentes Base (Vuesax) — Design System Pedbot

vs-button Botão

Componente de botão primário do Pedbot. Usado em todos os formulários, CTAs e ações destrutivas. A cor é controlada pelo CSS variable --vs-primary.

Vuesax docs

Variantes usadas no Pedbot

filled (default) border flat relief

✓ Usar

color="primary" para ações principais
color="danger" para ações destrutivas
type="border" para ações secundárias
:disabled="loading" durante submissão

✗ Não usar

Cores hex diretas em color prop
Botões sem vs-button (ver audit — 23 casos)
type="gradient" — não é padrão Pedbot
size="large" — usar size="small" ou default

<!-- Ação principal -->
<vs-button color="primary" type="filled" @click="salvar">
  Salvar
</vs-button>

<!-- Ação secundária -->
<vs-button color="primary" type="border" @click="cancelar">
  Cancelar
</vs-button>

<!-- Ação destrutiva -->
<vs-button color="danger" type="border" icon="trash-2" icon-pack="feather" @click="excluir">
  Excluir
</vs-button>

<!-- Com loading -->
<vs-button color="primary" :disabled="loading" @click="enviar">
  <span v-if="!loading">Enviar</span>
  <span v-else>Enviando...</span>
</vs-button>

vs-input Input de Texto

Input principal do Pedbot. Suporte a label flutuante, validação com danger/warning, ícones e slots. Todos os formulários usam v-model com este componente.

Vuesax docs

PropTipoUso no Pedbot

labelStringLabel flutuante — sempre usar

v-modelStringBinding bidirecional padrão

val-icon-dangerStringÍcone Feather p/ estado de erro

dangerBooleanEstado de validação inválida

danger-textStringMensagem de erro abaixo do input

iconStringÍcone à direita (Feather pack)

icon-packStringSempre "feather" no Pedbot

placeholderStringPlaceholder (quando sem label)

<!-- Input padrão com label e validação -->
<vs-input
  label="Nome do cliente"
  v-model="form.nome"
  :danger="errors.nome"
  :danger-text="errors.nome"
  val-icon-danger="x"
  icon="user"
  icon-pack="feather"
  class="w-full"
/>

<!-- Input de senha com toggle -->
<vs-input
  label="Senha"
  :type="showPass ? 'text' : 'password'"
  v-model="form.senha"
  :icon="showPass ? 'eye-off' : 'eye'"
  icon-pack="feather"
  @icon-click="showPass = !showPass"
  icon-no-border
  class="w-full"
/>

vs-select Select / Dropdown

Select Vuesax com suporte a busca, múltipla seleção e opções customizadas via vs-option. Amplamente usado em filtros e formulários do Pedbot.

Vuesax docs

✓ Usar

autocomplete para listas longas (>10 itens)
multiple para seleção de tags/filtros
label em todo select de formulário
v-model com valor primitivo (String/Number)

✗ Não usar

<select> HTML nativo — usar sempre vs-select
Objetos complexos no v-model sem serializar
vs-select sem vs-option (não renderiza)

<!-- Select simples -->
<vs-select label="Status" v-model="filtro.status" class="w-full">
  <vs-option label="Todos" value="">Todos</vs-option>
  <vs-option label="Ativo" value="active">Ativo</vs-option>
  <vs-option label="Inativo" value="inactive">Inativo</vs-option>
</vs-select>

<!-- Select múltiplo com autocomplete -->
<vs-select
  label="Atendentes"
  v-model="form.atendentes"
  multiple
  autocomplete
  class="w-full"
>
  <vs-option
    v-for="u in usuarios"
    :key="u.id"
    :label="u.nome"
    :value="u.id"
  >{{ u.nome }}</vs-option>
</vs-select>

vs-checkbox vs-radio vs-switch Seletores booleanos

Checkbox para seleção múltipla, Radio para seleção exclusiva, Switch para toggles on/off. O Pedbot usa predominantemente Switch para configurações e Checkbox em tabelas de seleção.

Vuesax docs

<!-- Checkbox em lista -->
<vs-checkbox v-model="selecionados" :vs-value="item.id" color="primary">
  {{ item.nome }}
</vs-checkbox>

<!-- Radio group -->
<vs-radio v-model="tipo" vs-value="bot" color="primary">Bot de Triagem</vs-radio>
<vs-radio v-model="tipo" vs-value="maria" color="primary">MarIA</vs-radio>

<!-- Switch para configuração (padrão Pedbot) -->
<div class="flex items-center gap-3">
  <vs-switch v-model="config.ativo" color="primary" />
  <span>{{ config.ativo ? 'Ativo' : 'Inativo' }}</span>
</div>

vs-tabs Abas

Sistema de abas para organizar conteúdo. Usado extensivamente nas views de configuração (/configs/*) e em detalhes de entidades. O Pedbot usa predominantemente o estilo padrão (sublinhado ativo).

Vuesax docs

✓ Usar

v-model para controlar aba ativa por índice
:vs-icon para ícones Feather nas tabs
Agrupar configs por categoria em tabs separadas
alignment="fixed" em modais

✗ Não usar

Mais de 6 abas visíveis (usar sidebar/seções)
Conteúdo de aba com mais de 2 scroll pages
color diferente de primary

<vs-tabs v-model="activeTab" color="primary">
  <vs-tab label="Geral" vs-icon="settings" vs-icon-pack="feather">
    <!-- conteúdo geral -->
  </vs-tab>
  <vs-tab label="Integrações" vs-icon="link" vs-icon-pack="feather">
    <!-- integrações -->
  </vs-tab>
  <vs-tab label="Permissões" vs-icon="shield" vs-icon-pack="feather">
    <!-- permissões -->
  </vs-tab>
</vs-tabs>

vs-pagination Paginação

Paginação padrão de listas e tabelas. O Pedbot tem um wrapper custom Pagination.vue em cima deste componente para padronizar o comportamento. Preferir o wrapper em vez do componente direto.

Vuesax docs

<!-- Preferir o wrapper Pedbot -->
<pagination
  :total="totalPages"
  v-model="currentPage"
  @change="fetchData"
/>

<!-- Direto (somente quando o wrapper não serve) -->
<vs-pagination
  :total="totalPages"
  v-model="currentPage"
  color="primary"
  :max="7"
/>

vs-dialog Modal / Dialog

Dialog/modal para confirmações, formulários inline e popups de detalhe. Z-index controlado pelo Vuesax internamente (530,001 — maior z do sistema). O Pedbot usa predominantemente largura média (600–900px).

Vuesax docs

✓ Usar

vs-dialog para confirmações de ação
:vs-accept e :vs-cancel para ações
style="z-index:99999" quando sobreposto a outro dialog
Fechar programaticamente com v-model

✗ Não usar

<div class="modal"> — reimplementar modal é anti-pattern
Dialogs aninhados mais de 2 níveis
fullscreen — preferir vs-sidebar para mobile

<!-- Dialog de confirmação -->
<vs-dialog
  v-model="showConfirmDelete"
  title="Confirmar exclusão"
  :vs-accept="confirmarExclusao"
  vs-accept-text="Excluir"
  vs-cancel-text="Cancelar"
  color="danger"
>
  <p>Tem certeza que deseja excluir <strong>{{ item.nome }}</strong>?</p>
</vs-dialog>

<!-- Dialog com formulário (usando slots) -->
<vs-dialog
  v-model="showForm"
  title="Novo cliente"
  style="width: 720px;"
  :vs-accept="salvar"
>
  <div slot="header">
    <h3>Novo cliente</h3>
  </div>
  <!-- form content here -->
</vs-dialog>

vs-dropdown Dropdown

Dropdown de ações contextuais. O Pedbot tem o wrapper VsDropdownCustom que corrige comportamentos de z-index e posicionamento. Preferir o wrapper.

Vuesax docs

<!-- Usando wrapper Pedbot (preferido) -->
<vs-dropdown-custom vs-trigger-click>
  <vs-button type="flat" icon="more-vertical" icon-pack="feather" />

  <vs-dropdown-menu>
    <vs-dropdown-item @click="editar">
      <feather-icon icon="edit-2" svgClasses="h-4 w-4 mr-2" />
      Editar
    </vs-dropdown-item>
    <vs-dropdown-item divider />
    <vs-dropdown-item class="text-danger" @click="excluir">
      <feather-icon icon="trash-2" svgClasses="h-4 w-4 mr-2" />
      Excluir
    </vs-dropdown-item>
  </vs-dropdown-menu>
</vs-dropdown-custom>

vs-tooltip Tooltip

Tooltip padrão para textos de ajuda e labels de ícones. O Pedbot tem dois wrappers: NewTooltip (preferido, HTML rico) e VxTooltip (legado). Usar o componente nativo v-tooltip para casos simples.

Vuesax docs

<!-- Tooltip simples via diretiva -->
<vs-button
  v-tooltip="'Copiar link'"
  icon="copy"
  icon-pack="feather"
  type="flat"
/>

<!-- Tooltip com posição -->
<feather-icon
  icon="info"
  v-tooltip.top="'Este campo é obrigatório para emissão de nota fiscal'"
  svgClasses="h-4 w-4 text-grey"
/>

<!-- NewTooltip (HTML rico) -->
<new-tooltip :title="'Histórico'" position="top">
  <template #content>
    <p>Exibe o histórico completo de <strong>alterações</strong></p>
  </template>
  <vs-button type="flat" icon="clock" icon-pack="feather" />
</new-tooltip>

vs-alert Alerta inline

Banner de alerta inline para avisos contextuais dentro de formulários e cards. Não confundir com vs-notification (toast global).

Vuesax docs

<!-- Alerta de aviso -->
<vs-alert color="warning" icon="alert-triangle" icon-pack="feather" :active="true">
  Esta ação não pode ser desfeita.
</vs-alert>

<!-- Alerta de info com title -->
<vs-alert color="primary" icon="info" icon-pack="feather" :active="mostrarInfo" title="Atenção">
  O bot só responde em dias úteis, das 8h às 18h.
</vs-alert>

vs-card Card

Card base do Vuesax. O Pedbot o usa raramente diretamente — a maioria dos cards usa o wrapper VxCard que adiciona header com título, collapse e ações. Usar vs-card direto apenas para cards de conteúdo simples sem título.

Vuesax docs

<!-- Raramente usado direto — preferir VxCard -->
<vs-card>
  <div slot="header">
    <h4>Resumo</h4>
  </div>
  <p>Conteúdo do card...</p>
</vs-card>

<!-- Preferido: wrapper VxCard -->
<vx-card title="Resumo" :collapsible="true">
  <p>Conteúdo do card...</p>
</vx-card>

vs-table Tabela base

Tabela base do Vuesax. O Pedbot usa predominantemente o wrapper VxTable (que corrige comportamentos de sort e expansão). Para listas simples, pode usar vs-table direto com vs-th, vs-tr, vs-td.

Vuesax docs

<!-- Tabela com VxTable (preferido para listas maiores) -->
<vx-table :data="pedidos" search stripe>
  <template #thead>
    <vs-th sort-key="id">ID</vs-th>
    <vs-th sort-key="cliente">Cliente</vs-th>
    <vs-th sort-key="total">Total</vs-th>
    <vs-th>Ações</vs-th>
  </template>
  <template #default="{ data }">
    <vs-tr v-for="row in data" :key="row.id">
      <vs-td>{{ row.id }}</vs-td>
      <vs-td>{{ row.cliente }}</vs-td>
      <vs-td>R$ {{ row.total }}</vs-td>
      <vs-td><!-- ações --></vs-td>
    </vs-tr>
  </template>
</vx-table>

vs-chip Chip / Tag

Chip para badges de status, tags de categoria e labels visuais. O Pedbot tem também o componente custom TagComponent para tags editáveis. Usar vs-chip para display e TagComponent para input de tags.

Vuesax docs

color="primary" color="success" color="warning" color="danger" color="dark"

<!-- Status badges -->
<vs-chip color="success" size="small">Ativo</vs-chip>
<vs-chip color="danger" size="small">Inativo</vs-chip>
<vs-chip color="warning" size="small">Pendente</vs-chip>

<!-- Chip removível (input de tags) -->
<vs-chip
  v-for="tag in tags"
  :key="tag"
  @click="removerTag(tag)"
  closable
  color="primary"
>{{ tag }}</vs-chip>

vs-avatar Avatar

Avatar de usuário/entidade. Usado no chat de atendimento, navbar e listas de usuários. Suporte a imagem, iniciais e ícone.

Vuesax docs

<!-- Avatar com imagem -->
<vs-avatar :src="usuario.foto" size="36px" />

<!-- Avatar com iniciais (fallback) -->
<vs-avatar
  :text="usuario.nome ? usuario.nome.charAt(0) : 'U'"
  size="36px"
  color="primary"
/>

<!-- Avatar em lista de chat -->
<vs-avatar
  :src="conversa.clienteFoto"
  :text="conversa.clienteNome.charAt(0)"
  size="42px"
  :badge-color="conversa.online ? 'success' : 'grey'"
  badge
/>

$vs.notify() Notificação Toast

Toast global para feedback de operações. Chamado via this.$vs.notify() — não é um componente declarativo mas uma função imperativa. Padrão no Pedbot para confirmação de saves, erros de API e avisos.

Vuesax docs

✓ Usar sempre após

Save bem-sucedido de formulário
Erro de requisição API/GraphQL
Operação assíncrona concluída
Ação destrutiva executada (excluir, etc.)

✗ Não usar para

Validação de campo (usar danger-text)
Informações estáticas (usar vs-alert)
Múltiplos notifies seguidos (>1 por ação)

// Sucesso
this.$vs.notify({
  title: 'Salvo!',
  text: 'Configurações atualizadas com sucesso.',
  color: 'success',
  iconPack: 'feather',
  icon: 'icon-check',
  position: 'top-right'
})

// Erro
this.$vs.notify({
  title: 'Erro ao salvar',
  text: error.message || 'Tente novamente.',
  color: 'danger',
  iconPack: 'feather',
  icon: 'icon-x',
  position: 'top-right'
})

// Warning
this.$vs.notify({
  title: 'Atenção',
  text: 'Limite de mensagens atingido.',
  color: 'warning',
  iconPack: 'feather',
  icon: 'icon-alert-triangle',
  position: 'top-right'
})

$vs.loading() Loading global

Overlay de loading global para operações pesadas (navegação entre páginas, carregamento inicial de dados). Para loading inline em componentes, preferir vs-button :disabled ou skeleton local.

Vuesax docs

// Abrir loading global
this.$vs.loading()

// Fechar
this.$vs.loading.close()

// Loading em container específico
this.$vs.loading({ container: this.$refs.minhaDiv, scale: 0.6 })
this.$vs.loading.close(this.$refs.minhaDiv._loaders[0])

Componentes Base (Vuesax 3.x)