@zeedhi/zd-user-info-vue

ZdUserInfo

Componente de UserInfo construído com o Zeedhi Next

Instalação

O ZdUserInfo é composto pelos pacotes @zeedhi/zd-user-info-common e @zeedhi/zd-user-info-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-user-info

Ou instale os pacotes separadamente:

npm install @zeedhi/zd-user-info-vue @zeedhi/zd-user-info-common

Dependências Adicionais

Por padrão, o ZdUserInfo fará uso do componente ZdAvatar para renderizar o activator do Dropdown. Caso queira utilizar o activator padrão, instale também o ZdAvatar, mas caso não queira será necessário sobrescrever a propriedade activator (ver exemplos)

Registro do Componente

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdUserInfo } from '@zeedhi/zd-user-info'; 
// import { ZdUserInfo } from '@zeedhi/zd-user-info-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdUserInfo', ZdUserInfo);

Uso Básico

Para utilizá-lo em um Metadata, basta definir a propriedade component como "ZdUserInfo". Para definir o nome do usuário, defina a propriedade user, e para definir a imagem do usuário defina a propriedade userImage:

{
  "name": "card",
  "component": "ZdCard",
  "cssClass": "zd-display-flex zd-justify-end",
  "children": [
    {
      "name": "user-info",
      "component": "ZdUserInfo",
      "user": "Jane Doe",
      "userImage": "https://picsum.photos/id/1005/100/100.jpg",
      "minWidth": "200px"
    }
  ]
}

Propriedades

Nome	Tipo	Padrão	Descrição
activator	IComponentRender	O activator padrão é um ZdAvatar com um Tooltip	Define o componente usado para ativar o menu
avatarProps	IDictionary	{}	Props que serão passadas ao componente ZdAvatar
bottomSlot	IComponentRender[]	[]	Define os componentes que serão renderizados na parte inferior do menu
centerSlot	IComponentRender[]	O centerSlot padrão é um List com duas opções: alterar perfil e logout	Define os componentes que serão renderizados no centro do menu
closeOnClick	boolean	true	Define se o menu irá fechar ao clicar fora do activator
closeOnContentClick	boolean	true	Define se o menu deve fechar ao clicar em seu conteúdo
fixed	boolean	false	Aplica position fixed ao menu
headerSlot	IComponentRender[]	[]	Componentes que serão renderizados no cabeçalho do menu
height	number | string	'auto'	Altura do menu
imageProps	IDictionary	{}	Props que serão passadas ao componente ZdImage (renderizado dentro do ZdAvatar)
offsetX	boolean	false	Desloca o menu pelo eixo x
offsetY	boolean	true	Desloca o menu pelo eixo y
openOnClick	boolean	true	Define se o menu deve abrir ao clicar no activator
openOnHover	boolean	false	Define se o menu deve abrir ao passar o cursor sobre o activator
maxHeight	number | string	undefined	Altura máxima do menu
maxWidth	number | string	undefined	Largura máxima do menu
minHeight	number | string	undefined	Altura mínima do menu
minWidth	number | string	undefined	Largura mínima do menu
topSlot	IComponentRender[]	[]	Componentes que serão renderizados na parte superior do menu
user	string	''	Nome do usuário
userImage	string	''	Imagem que será renderizada dentro do ZdAvatar
value	boolean	false	Exibe ou esconde o menu

Eventos

Nome	Parâmetros	Descrição
onProfileChange	{ component, element, event }: IEventParam	Disparado ao clicar no item de alterar perfil
onLogoutClick	{ component, element, event }: IEventParam	Disparado ao clicar no item de sair

Exemplos

avatarProps e imageProps

É possível sobrescrever as propriedades dos componentes ZdAvatar e ZdImage que são renderizados. No exemplo abaixo a propriedade imageProps é utilizada para melhorar a resolução da imagem, enquanto a propriedade avatarProps é utilizada para aumentar o tamanho do ZdAvatar:

{
  "name": "card",
  "component": "ZdCard",
  "cssClass": "zd-display-flex zd-justify-end",
  "children": [
    {
      "name": "user-info",
      "component": "ZdUserInfo",
      "user": "Jane Doe",
      "userImage": "https://picsum.photos/id/1005/200/200.jpg",
      "minWidth": "200px",
      "avatarProps": {
        "size": 62
      },
      "imageProps": {
        "height": "100px"
      }
    }
  ]
}

Sobrescrevendo o activator

Caso não queira utilizar o activator padrão do componente, basta sobrescrever a propriedade activator:

{
  "name": "card",
  "component": "ZdCard",
  "cssClass": "zd-display-flex zd-justify-end",
  "children": [
    {
      "name": "user-info",
      "component": "ZdUserInfo",
      "user": "Jane Doe",
      "minWidth": "200px",
      "activator": {
        "name": "user-button",
        "component": "ZdButton",
        "icon": true,
        "iconName": "mdi-account"
      }
    }
  ]
}