TagComponent

src/components/group-of-customer/Tag.vue

display low complexity 3 usos

Exibidor de tags de grupos de clientes. Mostra até 2 ícones 'label' sobrepostos como trigger de um dropdown, que lista todos os grupos com seus ícones coloridos e nomes. Usado em listas de contatos/clientes para indicar quais grupos o cliente pertence.

Grupo único

1 grupo — apenas 1 ícone label no trigger. Internamente, takeTwoColors retorna array com 1 elemento.

VIP

<TagComponent
  v-if="contact.customer.group_of_customer !== undefined &&
    contact.customer.group_of_customer.length !== 0"
  :groups="contact.customer.group_of_customer"
/>

Múltiplos grupos

2+ grupos — 2 ícones label sobrepostos no trigger (1st z-index 3, 2nd z-index 1, margin-left -18px, margin-top -3px), lista completa no dropdown.

<TagComponent
  v-if="contact.customer.group_of_customer !== undefined &&
    contact.customer.group_of_customer.length !== 0"
  :groups="contact.customer.group_of_customer"
/>

API

Exemplo de uso

<TagComponent
  :groups="[
    { color_tag: '#FF6B6B', name: 'VIP' },
    { color_tag: '#4ECDC4', name: 'Atacado' },
    { color_tag: '#FFE66D', name: 'Recorrente' }
  ]"
/>

Props

Prop	Tipo	Obrigatório	Default	Descrição
`groups`	`Array \| Object`	Sim	`—`	Lista de grupos do cliente. Cada item deve ter: `{ color_tag: String, name: String }`. Os 2 primeiros itens são exibidos como ícones no trigger. Todos aparecem no dropdown.

Dependências

Vuesax

vs-icon (icon='label', size='small', :color)

Custom

VsDropdown
VsDropdownMenu
VsDropdownItem

External

vue-perfect-scrollbar

Onde é usado

src/views/customers/CustomersListForward.vue
src/views/chat-attendance/ChatContact.vue
src/views/chat-attendance/new-chat/NewChatContact.vue

Notas de uso

O componente tem apenas 1 prop (groups) e o comportamento visual (1 ou 2 ícones) é decidido internamente pela computed takeTwoColors. Por isso ambas as variantes têm o mesmo código de uso — a diferença é nos dados passados.