SwitchPedBot

src/components/switch/SwitchPedBot.vue

Form Low 2 usos

Reimplementação customizada do vs-switch do Vuesax. Toggle switch com suporte a v-model booleano ou array (seleção múltipla via vsValue), ícones customizáveis nos estados on/off, e largura automática calculada no mounted() baseada no clientWidth dos slots — diferencial em relação ao Vuesax padrão (largura fixa). Exportado internamente como VsSwitch, importado como SwitchPedBot. Registrado localmente — apenas 2 usos no admin.

Atenção: Os 35 usos de <vs-switch> no codebase são do Vuesax padrão (escopo diferente). Este componente custom tem apenas 2 usos reais e difere principalmente pela largura automática.

Toggle Booleano

v-model Boolean — caso mais comum. Sem slots ou ícones. Largura default de 42px. Usado para preferências de notificação.

Inativo (false)

Ativo (true)

Com label ao lado

Email me when someone comments on my article

<switch-ped-bot v-model="comment" />
<span class="ml-4">Email me when someone comments on my article</span>

Com Labels On/Off

Slots on e off preenchidos com texto. A largura do switch se ajusta automaticamente via mounted() para caber o texto: max(slotOn.clientWidth, slotOff.clientWidth) + 24px.

Inativo ("Offline")

Online

Offline

Ativo ("Online")

Online

Offline

<switch-ped-bot :disabled="isDisabled" v-model="status">
  <span slot="on">Online</span>
  <span slot="off">Offline</span>
</switch-ped-bot>

Desabilitado

Estado disabled passado via $attrs — herdado pelo input checkbox interno (inheritAttrs: false + v-bind="$attrs"). Opacidade reduzida pelo CSS do Vuesax. Cursor not-allowed.

Disabled inativo

Online

Offline

Disabled ativo

Online

Offline

<switch-ped-bot
  v-model="status"
  :disabled="isDisabled"
>
  <span slot="on">Online</span>
  <span slot="off">Offline</span>
</switch-ped-bot>

Toggle em Array

v-model Array com vsValue. Múltiplos switches com um array compartilhado — vsValue é adicionado ou removido do array a cada toggle. Similar ao value de checkbox HTML. Sem uso real no admin.

notificacoes (ativo)

notificacoes

relatorios (inativo)

relatorios

Array resultante: ['notificacoes']

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<switch-ped-bot
  v-model="selectedOptions"
  vs-value="notificacoes"
/>
<switch-ped-bot
  v-model="selectedOptions"
  vs-value="relatorios"
/>

Com Ícones

Ícones diferentes para estado on e off via vsIconOn / vsIconOff. Exibidos via <vs-icon> dentro do thumb. Sem uso real no admin.

Inativo (ícone "close")

Ativo (ícone "check")

✓

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<switch-ped-bot
  v-model="isActive"
  vs-icon-on="check"
  vs-icon-off="close"
/>

Cor Customizada

Prop color define a cor do switch ativo. Aceita tokens do tema (success, danger, warning) ou hex. Background aplicado como inline style via _color.getColor() do utils. Sem uso real no admin.

color="primary" (default)

color="success"

color="danger"

color="warning"

<!-- Exemplo sintético — sem uso real encontrado no admin -->
<switch-ped-bot
  v-model="isActive"
  color="success"
/>
<switch-ped-bot
  v-model="isDanger"
  color="danger"
/>

API

<!-- v-model: Boolean ou Array; color: token ou hex -->
<!-- vsIconOn/vsIconOff: Material Icons; vsValue: usado com v-model Array -->
<!-- disabled via $attrs (inheritAttrs: false) -->
<switch-ped-bot
  v-model="isEnabled"
  color="primary"
  vs-icon-on="check"
  vs-icon-off="close"
>
  <span slot="on">Ativo</span>
  <span slot="off">Inativo</span>
</switch-ped-bot>

Props

Nome	Tipo	Default	Obrig.	Descrição
`value`	Any	`null`	—	`v-model`. Boolean: toggle simples. Array: adiciona/remove `vsValue`. Background colorido quando `truthy`.
`color`	String	`"primary"`	—	Cor do switch ativo. Tokens: `primary`, `success`, `danger`, `warning`. Ou hex direto.
`vsIcon`	String	`null`	—	Ícone nos estados on e off. Sobrescrito por `vsIconOn`/`vsIconOff`.
`vsIconOn`	String	`null`	—	Ícone apenas no estado ativo. Prevalece sobre `vsIcon`.
`vsIconOff`	String	`null`	—	Ícone apenas no estado inativo. Prevalece sobre `vsIcon`.
`iconPack`	String	`"material-icons"`	—	Pack de ícones para `vs-icon`. Ex: `'feather'`.
`vsValue`	Any	`null`	—	Valor adicionado/removido do array quando `v-model` é Array. Similar ao `value` de checkbox HTML.

Slots

Nome	Descrição
`on`	Conteúdo exibido no lado ativo (esquerda quando ligado). Normalmente texto curto. Largura calculada automaticamente no `mounted()`.
`off`	Conteúdo exibido no lado inativo (direita quando desligado). A largura do switch usa o maior entre `on` e `off`.

Eventos

Nome	Payload	Descrição
`input`	Boolean \| Array	Evento `v-model`. Boolean: emite `!value`. Array: emite novo array com `vsValue` adicionado ou removido.
`change`	Event	Evento nativo do input checkbox, emitido junto com `input`.

Cálculo de largura automática

No mounted(), o componente compara clientWidth dos refs 'on' e 'off' e usa o maior: widthx = max(slotOn.clientWidth, slotOff.clientWidth) + 24. Largura default quando slots estão vazios: 42px. Este é o principal diferencial em relação ao vs-switch do Vuesax padrão (largura fixa).

Dependências

Vuesax: vs-icon (para exibir ícones nos estados on/off)
Utils: src/assets/utils/color.js — _color.getColor() para calcular background inline do switch ativo

Onde é usado

src/layouts/components/navbar/components/ConnectedSwitch.vue
src/views/pages/user-settings/UserSettingsNotifications.vue