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"
      }
    }
  ]
}