@zeedhi/zd-user-info-common 1.3.4 → 3.0.0

package/README.md

@@ -1,161 +1,111 @@
-# ZdUserInfo
+# Componente Field Group para Zeedhi
 
-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:
-
-```sh
-npm install @zeedhi/zd-user-info
-```
-
-Ou instale os pacotes separadamente:
-
-```sh
-npm install @zeedhi/zd-user-info-vue @zeedhi/zd-user-info-common
-```
+<p align="center">
+  <a href="#instalação">Instalação</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#uso-básico">Uso Básico</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#propriedades">Propriedades</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+</p>
 
-### Dependências Adicionais
+O component zd-user-info é um card capas de agrupar campos
 
-Por padrão, o ZdUserInfo fará uso do componente <a href="http://gitlab.teknisa.com/zeedhi/avatar" target="_blank">ZdAvatar</a> 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)
+<p align="center">
+  <img alt="zd-user-info" src="./img/user-info.png" width="100%">
+</p>
 
-## Registro do Componente
+## Instalação
 
-Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo `zeedhi.ts`)
+Para instalar o pacote basta rodar o seguinte comando:\
+`npm i @zeedhi/zd-user-info`\
+Com isso, dois pacotes serão instalados: o @zeedhi/zd-user-info-common e o @zeedhi/zd-user-info-vue.\
+Após a instalação, é necessário que você importe o pacote @zeedhi/zd-user-info-vue dentro de seu arquivo de configuração `zeedhi.ts`
 
-```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
+```shell
+import { ZdFieldGroup } from '@zeedhi/zd-user-info-vue';
 
-Vue.component('ZdUserInfo', ZdUserInfo);
+Vue.component('ZdFieldGroup', ZdFieldGroup);
 ```
 
+Já o pacote @zeedhi/zd-user-info-common deve ser importado no arquivo controller do componente.
+
 ## 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`:
+Para usar, defina a propriedade component como 'ZdFieldGroup'.
 
 ```json
 {
-  "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"
-    }
-  ]
+  "name": "user-info-example",
+  "component": "ZdFieldGroup"
 }
 ```
 
-<p align="center" justify="center">
-  <img src="./img/basic-usage-1.png" alt="Basic Usage"/>
-</p>
-<p align="center" justify="center">
-  <img src="./img/basic-usage-2.png" alt="Basic Usage"/>
-</p>
-
-
 ## 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:
-
-```json
-{
-  "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"
-      }
-    }
-  ]
-}
-```
-
-<p align="center" justify="center">
-  <img src="./img/example-1.png" alt="Basic Usage"/>
-</p>
-
-### Sobrescrevendo o activator
-
-Caso não queira utilizar o activator padrão do componente, basta sobrescrever a propriedade `activator`:
-
-```json
-{
-  "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"
-      }
-    }
-  ]
-}
-```
-
-<p align="center" justify="center">
-  <img src="./img/example-2.png" alt="Basic Usage"/>
-</p>
+<table>
+  <thead>
+    <tr>
+      <th>Nome</th>
+      <th>Tipo</th>
+      <th>Default</th>
+      <th>Descrição</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>disableActionRotate</td>
+      <td>boolean | string</td>
+      <td>true</td>
+      <td>Desativa a animação de rotação de ação ao expandir ou recolher o cartão recolhido</td>
+    </tr>
+    <tr>
+      <td>expandButton</td>
+      <td>IButton</td>
+      <td>undefined</td>
+      <td>Se definido, substitui o ícone de expansão pelo botão definido</td>
+    </tr>
+    <tr>
+      <td>expanded</td>
+      <td>boolean | string</td>
+      <td>false</td>
+      <td>Define se o componente está aberto ou fecahdo</td>
+    </tr>
+    <tr>
+      <td>header</td>
+      <td>IComponent[]</td>
+      <td>[]</td>
+      <td>Componentes a serem exibidos no cabeçalho</td>
+    </tr>
+    <tr>
+      <td>hideAction</td>
+      <td>boolean | string</td>
+      <td>false</td>
+      <td>Oculta o ícone de expansão</td>
+    </tr>
+    <tr>
+      <td>iconColor</td>
+      <td>string</td>
+      <td>var(--v-primary-base)</td>
+      <td>Define a cor do icone de expansão</td>
+    </tr>
+    <tr>
+      <td>iconName</td>
+      <td>string</td>
+      <td>expand</td>
+      <td>Define o icone de  expansão</p>
+   </td>
+    </tr>
+    <tr>
+      <td>lazyLoad</td>
+      <td>boolean</td>
+      <td>boolean | string</td>
+      <td>O conteúdo será carregado somente quando o cartão recolhido for aberto</td>
+    </tr>
+    <tr>
+      <td>readonly</td>
+      <td>boolean | string</td>
+      <td>false</td>
+      <td>Torna o cartão recolhido somente leitura. Faz a mesma coisa que o suporte desativado, mas não altera os estilos</td>
+    </tr>
+  </tbody>
+</table>
+    
+<hr>

package/{types → dist/types}/UserInfoController.d.ts

@@ -1,7 +1,8 @@
-import { UserInfo } from './user-info';
-export declare class UserInfoController {
-    component: UserInfo;
-    constructor(component: UserInfo);
-    get showChangeProfile(): boolean;
-    get showLogout(): boolean;
-}
+import { UserInfo } from './user-info';
+declare class UserInfoController {
+    component: UserInfo;
+    constructor(component: UserInfo);
+    get showChangeProfile(): boolean;
+    get showLogout(): boolean;
+}
+export { UserInfoController };

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './user-info';
+export * from './interfaces';
+export * from './tek-user-info/interfaces';
+export * from './tek-user-info/tek-user-info';
+export * from './tek-user-info/tek-user-info-list';

package/{types → dist/types}/interfaces.d.ts

@@ -1,27 +1,27 @@
-import { IComponentRender } from '@zeedhi/common';
-import { IDictionary } from '@zeedhi/core';
-export interface IUserInfo extends IComponentRender {
-    activator?: IComponentRender;
-    avatarProps?: IDictionary;
-    bottomSlot?: IComponentRender[];
-    centerSlot?: IComponentRender[];
-    closeOnClick?: boolean;
-    closeOnContentClick?: boolean;
-    fixed?: boolean;
-    headerSlot?: IComponentRender[];
-    height?: number | string;
-    imageProps?: IDictionary;
-    offsetX?: boolean;
-    offsetY?: boolean;
-    openOnClick?: boolean;
-    openOnHover?: boolean;
-    maxHeight?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    minWidth?: number | string;
-    topSlot?: IComponentRender[];
-    user?: string;
-    userImage?: string;
-    value?: boolean;
-    visibleItems?: IDictionary<boolean>;
-}
+import { IComponentRender } from '@zeedhi/common';
+import { IDictionary } from '@zeedhi/core';
+export interface IUserInfo extends IComponentRender {
+    activator?: IComponentRender;
+    avatarProps?: IDictionary;
+    bottomSlot?: IComponentRender[];
+    centerSlot?: IComponentRender[];
+    closeOnClick?: boolean;
+    closeOnContentClick?: boolean;
+    fixed?: boolean;
+    headerSlot?: IComponentRender[];
+    height?: number | string;
+    imageProps?: IDictionary;
+    offsetX?: boolean;
+    offsetY?: boolean;
+    openOnClick?: boolean;
+    openOnHover?: boolean;
+    maxHeight?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    minWidth?: number | string;
+    topSlot?: IComponentRender[];
+    user?: string;
+    userImage?: string;
+    value?: boolean;
+    visibleItems?: IDictionary<boolean>;
+}

package/dist/types/tek-user-info/TekUserInfoController.d.ts

@@ -0,0 +1,22 @@
+import { TekUserInfo } from './tek-user-info';
+declare class TekUserInfoController {
+    component: TekUserInfo;
+    get versionInfo(): import('./interfaces').IVersionInfo | null;
+    constructor(component: TekUserInfo);
+    get name(): string;
+    set name(value: string);
+    get version(): string;
+    set version(value: string);
+    get hasDefaultEmail(): boolean;
+    get hasAboutImage(): boolean;
+    mergeText(name: string, version: string): string;
+    get mainVersion(): string;
+    protected getItems(tab: 'frontend' | 'backend' | 'modules'): string | never[];
+    get frontendItems(): string | never[];
+    get backendItems(): string | never[];
+    get modulesItems(): string | never[];
+    get showReportError(): boolean;
+    get showVersionInfo(): boolean;
+    get showAbout(): boolean;
+}
+export { TekUserInfoController };

package/dist/types/tek-user-info/interfaces.d.ts

@@ -0,0 +1,27 @@
+import { IList } from '@zeedhi/common';
+import { IUserInfo } from '../interfaces';
+export interface IVersionInfo {
+    name: string;
+    version: string;
+    frontend: {
+        name: string;
+        version: string;
+    }[];
+    backend: {
+        name: string;
+        version: string;
+    }[];
+    modules: {
+        name: string;
+        version: string;
+    }[];
+}
+export interface ITekUserInfo extends IUserInfo {
+    aboutImage?: string;
+    defaultEmail?: string;
+    versionInfo?: IVersionInfo | null;
+    versionUrl?: string;
+}
+export interface ITekUserInfoList extends IList {
+    parentName?: string;
+}

package/dist/types/tek-user-info/tek-user-info-list.d.ts

@@ -0,0 +1,32 @@
+import { List } from '@zeedhi/common';
+import { ITekUserInfo, ITekUserInfoList } from './interfaces';
+export declare class TekUserInfoList extends List implements ITekUserInfoList {
+    /**
+     * Name of the user info component
+     */
+    parentName: string;
+    dense: boolean;
+    constructor(props: ITekUserInfo);
+    onCreated(): void;
+    protected getItems(): ({
+        name: string;
+        component: string;
+        title: string;
+        subtitle: string;
+        isVisible: string;
+        cssClass: string;
+        prependIcon?: undefined;
+        events?: undefined;
+    } | {
+        name: string;
+        component: string;
+        title: string;
+        prependIcon: string;
+        cssClass: string;
+        isVisible: string;
+        events: {
+            click: () => void;
+        };
+        subtitle?: undefined;
+    })[];
+}

package/dist/types/tek-user-info/tek-user-info.d.ts

@@ -0,0 +1,37 @@
+import { Button, IComponentRender, Modal } from '@zeedhi/common';
+import { IEventParam } from '@zeedhi/core';
+import { UserInfo } from '../user-info';
+import { ITekUserInfo, IVersionInfo } from './interfaces';
+export declare class TekUserInfo extends UserInfo implements ITekUserInfo {
+    aboutModal?: Modal;
+    reportModal?: Modal;
+    /**
+    * Data about the application version
+    */
+    versionInfo: IVersionInfo | null;
+    /**
+    * Default email address to be defined in the Report Bug form
+    */
+    defaultEmail: string;
+    /**
+    * Url from which the version info will be retrieved
+    */
+    versionUrl: string;
+    /**
+    * Path to the image to be shown on about modal
+    */
+    aboutImage: string;
+    protected propBottomSlot?: IComponentRender[];
+    constructor(props: ITekUserInfo);
+    protected getBottomSlot(): IComponentRender[];
+    onAboutClick(): void;
+    protected getVersionTree(tab: 'frontend' | 'backend' | 'modules'): {
+        name: string;
+        component: string;
+        text: string;
+    }[];
+    onReportClick(): void;
+    onSendReport({ event, element }: IEventParam<Button>): Promise<void>;
+    onCreated(): void;
+    onMounted(element: any): Promise<void>;
+}