@zeedhi/zd-user-info-common 1.0.2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +161 -0
  2. package/dist/user-info-common.esm.js +54 -7
  3. package/dist/user-info-common.umd.js +223 -176
  4. package/package.json +2 -2
  5. package/types/UserInfoController.d.ts +7 -0
  6. package/types/interfaces.d.ts +1 -1
  7. package/types/user-info.d.ts +4 -4
package/README.md ADDED
@@ -0,0 +1,161 @@
1
+ # ZdUserInfo
2
+
3
+ Componente de UserInfo construído com o Zeedhi Next
4
+
5
+ ## Instalação
6
+
7
+ O ZdUserInfo é composto pelos pacotes `@zeedhi/zd-user-info-common` e `@zeedhi/zd-user-info-vue`.
8
+ Utilize o comando abaixo para instalar ambos automaticamente:
9
+
10
+ ```sh
11
+ npm install @zeedhi/zd-user-info
12
+ ```
13
+
14
+ Ou instale os pacotes separadamente:
15
+
16
+ ```sh
17
+ npm install @zeedhi/zd-user-info-vue @zeedhi/zd-user-info-common
18
+ ```
19
+
20
+ ### Dependências Adicionais
21
+
22
+ 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)
23
+
24
+ ## Registro do Componente
25
+
26
+ Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo `zeedhi.ts`)
27
+
28
+ ```ts
29
+ import Vue from 'vue';
30
+ import { ZdUserInfo } from '@zeedhi/zd-user-info';
31
+ // import { ZdUserInfo } from '@zeedhi/zd-user-info-vue'; caso tenha instalado os pacotes separadamente
32
+
33
+ Vue.component('ZdUserInfo', ZdUserInfo);
34
+ ```
35
+
36
+ ## Uso Básico
37
+
38
+ 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`:
39
+
40
+ ```json
41
+ {
42
+ "name": "card",
43
+ "component": "ZdCard",
44
+ "cssClass": "zd-display-flex zd-justify-end",
45
+ "children": [
46
+ {
47
+ "name": "user-info",
48
+ "component": "ZdUserInfo",
49
+ "user": "Jane Doe",
50
+ "userImage": "https://picsum.photos/id/1005/100/100.jpg",
51
+ "minWidth": "200px"
52
+ }
53
+ ]
54
+ }
55
+ ```
56
+
57
+ <p align="center" justify="center">
58
+ <img src="./img/basic-usage-1.png" alt="Basic Usage"/>
59
+ </p>
60
+ <p align="center" justify="center">
61
+ <img src="./img/basic-usage-2.png" alt="Basic Usage"/>
62
+ </p>
63
+
64
+
65
+ ## Propriedades
66
+
67
+ | **Nome** | **Tipo** | **Padrão** | **Descrição** |
68
+ |---------------------|----------------------|------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
69
+ | activator | IComponentRender | O activator padrão é um ZdAvatar com um Tooltip | Define o componente usado para ativar o menu |
70
+ | avatarProps | IDictionary | \{\} | Props que serão passadas ao componente ZdAvatar |
71
+ | bottomSlot | IComponentRender\[\] | \[\] | Define os componentes que serão renderizados na parte inferior do menu |
72
+ | 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 |
73
+ | closeOnClick | boolean | true | Define se o menu irá fechar ao clicar fora do activator |
74
+ | closeOnContentClick | boolean | true | Define se o menu deve fechar ao clicar em seu conteúdo |
75
+ | fixed | boolean | false | Aplica position fixed ao menu |
76
+ | headerSlot | IComponentRender[] | [] | Componentes que serão renderizados no cabeçalho do menu |
77
+ | height | number \| string | 'auto' | Altura do menu |
78
+ | imageProps | IDictionary | \{\} | Props que serão passadas ao componente ZdImage \(renderizado dentro do ZdAvatar\) |
79
+ | offsetX | boolean | false | Desloca o menu pelo eixo x |
80
+ | offsetY | boolean | true | Desloca o menu pelo eixo y |
81
+ | openOnClick | boolean | true | Define se o menu deve abrir ao clicar no activator |
82
+ | openOnHover | boolean | false | Define se o menu deve abrir ao passar o cursor sobre o activator |
83
+ | maxHeight | number \| string | undefined | Altura máxima do menu |
84
+ | maxWidth | number \| string | undefined | Largura máxima do menu |
85
+ | minHeight | number \| string | undefined | Altura mínima do menu |
86
+ | minWidth | number \| string | undefined | Largura mínima do menu |
87
+ | topSlot | IComponentRender\[\] | \[\] | Componentes que serão renderizados na parte superior do menu |
88
+ | user | string | '' | Nome do usuário |
89
+ | userImage | string | '' | Imagem que será renderizada dentro do ZdAvatar |
90
+ | value | boolean | false | Exibe ou esconde o menu |
91
+
92
+
93
+ ## Eventos
94
+
95
+ | **Nome** | **Parâmetros** | **Descrição** |
96
+ |-----------------|----------------------------------------------|-----------------------------------------------|
97
+ | onProfileChange | \{ component, element, event \}: IEventParam | Disparado ao clicar no item de alterar perfil |
98
+ | onLogoutClick | \{ component, element, event \}: IEventParam | Disparado ao clicar no item de sair |
99
+
100
+ ## Exemplos
101
+
102
+ ### avatarProps e imageProps
103
+
104
+ É 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:
105
+
106
+ ```json
107
+ {
108
+ "name": "card",
109
+ "component": "ZdCard",
110
+ "cssClass": "zd-display-flex zd-justify-end",
111
+ "children": [
112
+ {
113
+ "name": "user-info",
114
+ "component": "ZdUserInfo",
115
+ "user": "Jane Doe",
116
+ "userImage": "https://picsum.photos/id/1005/200/200.jpg",
117
+ "minWidth": "200px",
118
+ "avatarProps": {
119
+ "size": 62
120
+ },
121
+ "imageProps": {
122
+ "height": "100px"
123
+ }
124
+ }
125
+ ]
126
+ }
127
+ ```
128
+
129
+ <p align="center" justify="center">
130
+ <img src="./img/example-1.png" alt="Basic Usage"/>
131
+ </p>
132
+
133
+ ### Sobrescrevendo o activator
134
+
135
+ Caso não queira utilizar o activator padrão do componente, basta sobrescrever a propriedade `activator`:
136
+
137
+ ```json
138
+ {
139
+ "name": "card",
140
+ "component": "ZdCard",
141
+ "cssClass": "zd-display-flex zd-justify-end",
142
+ "children": [
143
+ {
144
+ "name": "user-info",
145
+ "component": "ZdUserInfo",
146
+ "user": "Jane Doe",
147
+ "minWidth": "200px",
148
+ "activator": {
149
+ "name": "user-button",
150
+ "component": "ZdButton",
151
+ "icon": true,
152
+ "iconName": "mdi-account"
153
+ }
154
+ }
155
+ ]
156
+ }
157
+ ```
158
+
159
+ <p align="center" justify="center">
160
+ <img src="./img/example-2.png" alt="Basic Usage"/>
161
+ </p>
package/dist/user-info-common.esm.js CHANGED
@@ -1,5 +1,44 @@
1
1
  import { ComponentRender } from '@zeedhi/common';
2
- import { Messages } from '@zeedhi/core';
2
+ import { Singleton, Messages, Loader } from '@zeedhi/core';
3
+
4
+ /*! *****************************************************************************
5
+ Copyright (c) Microsoft Corporation.
6
+
7
+ Permission to use, copy, modify, and/or distribute this software for any
8
+ purpose with or without fee is hereby granted.
9
+
10
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
12
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
13
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
14
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
15
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
16
+ PERFORMANCE OF THIS SOFTWARE.
17
+ ***************************************************************************** */
18
+
19
+ function __decorate(decorators, target, key, desc) {
20
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
21
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
22
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
23
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
24
+ }
25
+
26
+ let UserInfoController = class UserInfoController {
27
+ constructor(component) {
28
+ this.component = component;
29
+ }
30
+ get showChangeProfile() {
31
+ const { changeProfile } = this.component.visibleItems;
32
+ return changeProfile || changeProfile === undefined;
33
+ }
34
+ get showLogout() {
35
+ const { logout } = this.component.visibleItems;
36
+ return logout || logout === undefined;
37
+ }
38
+ };
39
+ UserInfoController = __decorate([
40
+ Singleton
41
+ ], UserInfoController);
3
42
 
4
43
  class UserInfo extends ComponentRender {
5
44
  constructor(props) {
@@ -16,10 +55,6 @@ class UserInfo extends ComponentRender {
16
55
  * Components to be rendered on the center slot
17
56
  */
18
57
  this.centerSlot = [];
19
- /**
20
- * Show the profile change option
21
- */
22
- this.showProfileChange = true;
23
58
  /**
24
59
  * Components to be rendered on the top slot
25
60
  */
@@ -72,11 +107,15 @@ class UserInfo extends ComponentRender {
72
107
  * Controls whether the component is visible or hidden.
73
108
  */
74
109
  this.value = false;
110
+ this.visibleItems = {
111
+ userName: true,
112
+ changeProfile: true,
113
+ logout: true,
114
+ };
75
115
  /**
76
116
  * Sets the height for the dropdown.
77
117
  */
78
118
  this.height = 'auto';
79
- this.showProfileChange = this.getInitValue('showProfileChange', props.showProfileChange, this.showProfileChange);
80
119
  this.user = this.getInitValue('user', props.user, this.user);
81
120
  this.userImage = this.getInitValue('userImage', props.userImage, this.userImage);
82
121
  this.closeOnClick = this.getInitValue('closeOnClick', props.closeOnClick, this.closeOnClick);
@@ -87,6 +126,7 @@ class UserInfo extends ComponentRender {
87
126
  this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
88
127
  this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
89
128
  this.value = this.getInitValue('value', props.value, this.value);
129
+ this.visibleItems = this.getInitValue('visibleItems', props.visibleItems, this.visibleItems);
90
130
  this.height = this.getInitValue('height', props.height, this.height);
91
131
  this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
92
132
  this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
@@ -96,7 +136,7 @@ class UserInfo extends ComponentRender {
96
136
  this.imageProps = props.imageProps || this.imageProps;
97
137
  this.activator = props.activator || this.getActivator();
98
138
  this.bottomSlot = props.bottomSlot || this.bottomSlot;
99
- this.centerSlot = props.centerSlot || this.getCenterSlot();
139
+ this.propCenterSlot = props.centerSlot;
100
140
  this.topSlot = props.topSlot || this.topSlot;
101
141
  this.headerSlot = props.headerSlot || this.headerSlot;
102
142
  this.createAccessors();
@@ -127,6 +167,7 @@ class UserInfo extends ComponentRender {
127
167
  title: 'USERINFO_CHANGE_PROFILE',
128
168
  prependIcon: 'mdi-account',
129
169
  cssClass: 'zd-px-2',
170
+ isVisible: `{{UserInfoController_${this.componentId}.showChangeProfile}}`,
130
171
  events: {
131
172
  click: ({ event, element }) => this.onProfileChange(event, element),
132
173
  },
@@ -137,6 +178,7 @@ class UserInfo extends ComponentRender {
137
178
  title: 'USERINFO_LOGOUT',
138
179
  prependIcon: 'mdi-logout-variant',
139
180
  cssClass: 'zd-px-2',
181
+ isVisible: `{{UserInfoController_${this.componentId}.showLogout}}`,
140
182
  events: {
141
183
  click: ({ event, element }) => this.onLogoutClick(event, element),
142
184
  },
@@ -151,6 +193,11 @@ class UserInfo extends ComponentRender {
151
193
  onProfileChange(event, element) {
152
194
  this.callEvent('onProfileChange', { event, element, component: this });
153
195
  }
196
+ onCreated() {
197
+ super.onCreated();
198
+ Loader.addController(`UserInfoController_${this.componentId}`, new UserInfoController(this));
199
+ this.centerSlot = this.propCenterSlot ? this.propCenterSlot : this.getCenterSlot();
200
+ }
154
201
  }
155
202
  Messages.add({
156
203
  'pt-BR': {
package/dist/user-info-common.umd.js CHANGED
@@ -1,183 +1,230 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('@zeedhi/core')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', '@zeedhi/core'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-user-info-common"] = {}, global["@zeedhi/common"], global["@zeedhi/core"]));
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/common'), require('@zeedhi/core')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/common', '@zeedhi/core'], factory) :
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/zd-user-info-common"] = {}, global["@zeedhi/common"], global["@zeedhi/core"]));
5
5
  })(this, (function (exports, common, core) { 'use strict';
6
6
 
7
- class UserInfo extends common.ComponentRender {
8
- constructor(props) {
9
- super(props);
10
- /**
11
- * Props to be passed to the ZdAvatar component
12
- */
13
- this.avatarProps = {};
14
- /**
15
- * Components to be rendered on the bottom slot
16
- */
17
- this.bottomSlot = [];
18
- /**
19
- * Components to be rendered on the center slot
20
- */
21
- this.centerSlot = [];
22
- /**
23
- * Show the profile change option
24
- */
25
- this.showProfileChange = true;
26
- /**
27
- * Components to be rendered on the top slot
28
- */
29
- this.topSlot = [];
30
- /**
31
- * User name
32
- */
33
- this.user = '';
34
- /**
35
- * User image
36
- */
37
- this.userImage = '';
38
- /**
39
- * Designates if menu should close on outside-activator click.
40
- */
41
- this.closeOnClick = true;
42
- /**
43
- * Designates if menu should close when its content is clicked.
44
- */
45
- this.closeOnContentClick = true;
46
- /**
47
- * Applies position fixed to the dropdown.
48
- */
49
- this.fixed = false;
50
- /**
51
- * Components to be rendered on the menu header
52
- */
53
- this.headerSlot = [];
54
- /**
55
- * Props to be passed to the ZdImage component (rendered inside the avatar)
56
- */
57
- this.imageProps = {};
58
- /**
59
- * Offset the menu on the x-axis.
60
- */
61
- this.offsetX = false;
62
- /**
63
- * Offset the menu on the x-axis.
64
- */
65
- this.offsetY = true;
66
- /**
67
- * Designates whether menu should open on activator click.
68
- */
69
- this.openOnClick = true;
70
- /**
71
- * Designates whether menu should open on activator hover.
72
- */
73
- this.openOnHover = false;
74
- /**
75
- * Controls whether the component is visible or hidden.
76
- */
77
- this.value = false;
78
- /**
79
- * Sets the height for the dropdown.
80
- */
81
- this.height = 'auto';
82
- this.showProfileChange = this.getInitValue('showProfileChange', props.showProfileChange, this.showProfileChange);
83
- this.user = this.getInitValue('user', props.user, this.user);
84
- this.userImage = this.getInitValue('userImage', props.userImage, this.userImage);
85
- this.closeOnClick = this.getInitValue('closeOnClick', props.closeOnClick, this.closeOnClick);
86
- this.closeOnContentClick = this.getInitValue('closeOnContentClick', props.closeOnContentClick, this.closeOnContentClick);
87
- this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
88
- this.offsetX = this.getInitValue('offsetX', props.offsetX, this.offsetX);
89
- this.offsetY = this.getInitValue('offsetY', props.offsetY, this.offsetY);
90
- this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
91
- this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
92
- this.value = this.getInitValue('value', props.value, this.value);
93
- this.height = this.getInitValue('height', props.height, this.height);
94
- this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
95
- this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
96
- this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
97
- this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
98
- this.avatarProps = props.avatarProps || this.avatarProps;
99
- this.imageProps = props.imageProps || this.imageProps;
100
- this.activator = props.activator || this.getActivator();
101
- this.bottomSlot = props.bottomSlot || this.bottomSlot;
102
- this.centerSlot = props.centerSlot || this.getCenterSlot();
103
- this.topSlot = props.topSlot || this.topSlot;
104
- this.headerSlot = props.headerSlot || this.headerSlot;
105
- this.createAccessors();
106
- }
107
- getActivator() {
108
- return {
109
- name: `${this.name}_activator_tooltip`,
110
- component: 'ZdTooltip',
111
- bottom: true,
112
- label: this.user,
113
- children: [
114
- Object.assign({ name: `${this.name}_activator`, component: 'ZdAvatar', avatarSlot: [
115
- Object.assign({ name: `${this.name}_image`, component: 'ZdImage', src: this.userImage }, this.imageProps),
116
- ] }, this.avatarProps),
117
- ],
118
- };
119
- }
120
- getCenterSlot() {
121
- return [
122
- {
123
- name: `${this.name}_center_list`,
124
- component: 'ZdList',
125
- dense: true,
126
- items: [
127
- {
128
- name: `${this.name}_change_profile`,
129
- component: 'ZdListItem',
130
- title: 'USERINFO_CHANGE_PROFILE',
131
- prependIcon: 'mdi-account',
132
- cssClass: 'zd-px-2',
133
- events: {
134
- click: ({ event, element }) => this.onProfileChange(event, element),
135
- },
136
- },
137
- {
138
- name: `${this.name}_logout`,
139
- component: 'ZdListItem',
140
- title: 'USERINFO_LOGOUT',
141
- prependIcon: 'mdi-logout-variant',
142
- cssClass: 'zd-px-2',
143
- events: {
144
- click: ({ event, element }) => this.onLogoutClick(event, element),
145
- },
146
- },
147
- ],
148
- },
149
- ];
150
- }
151
- onLogoutClick(event, element) {
152
- this.callEvent('onLogoutClick', { event, element, component: this });
153
- }
154
- onProfileChange(event, element) {
155
- this.callEvent('onProfileChange', { event, element, component: this });
156
- }
157
- }
158
- core.Messages.add({
159
- 'pt-BR': {
160
- translation: {
161
- USERINFO_CHANGE_PROFILE: 'Alterar perfil',
162
- USERINFO_LOGOUT: 'Sair',
163
- },
164
- },
165
- 'en-US': {
166
- translation: {
167
- USERINFO_CHANGE_PROFILE: 'Change profile',
168
- USERINFO_LOGOUT: 'Sign out',
169
- },
170
- },
171
- 'es-ES': {
172
- translation: {
173
- USERINFO_CHANGE_PROFILE: 'Cambiar el perfil',
174
- USERINFO_LOGOUT: 'Salir',
175
- },
176
- },
177
- });
7
+ /*! *****************************************************************************
8
+ Copyright (c) Microsoft Corporation.
9
+
10
+ Permission to use, copy, modify, and/or distribute this software for any
11
+ purpose with or without fee is hereby granted.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
14
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
15
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
16
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
17
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
18
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
19
+ PERFORMANCE OF THIS SOFTWARE.
20
+ ***************************************************************************** */
21
+
22
+ function __decorate(decorators, target, key, desc) {
23
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
24
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
25
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
26
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
27
+ }
178
28
 
179
- exports.UserInfo = UserInfo;
29
+ let UserInfoController = class UserInfoController {
30
+ constructor(component) {
31
+ this.component = component;
32
+ }
33
+ get showChangeProfile() {
34
+ const { changeProfile } = this.component.visibleItems;
35
+ return changeProfile || changeProfile === undefined;
36
+ }
37
+ get showLogout() {
38
+ const { logout } = this.component.visibleItems;
39
+ return logout || logout === undefined;
40
+ }
41
+ };
42
+ UserInfoController = __decorate([
43
+ core.Singleton
44
+ ], UserInfoController);
180
45
 
181
- Object.defineProperty(exports, '__esModule', { value: true });
46
+ class UserInfo extends common.ComponentRender {
47
+ constructor(props) {
48
+ super(props);
49
+ /**
50
+ * Props to be passed to the ZdAvatar component
51
+ */
52
+ this.avatarProps = {};
53
+ /**
54
+ * Components to be rendered on the bottom slot
55
+ */
56
+ this.bottomSlot = [];
57
+ /**
58
+ * Components to be rendered on the center slot
59
+ */
60
+ this.centerSlot = [];
61
+ /**
62
+ * Components to be rendered on the top slot
63
+ */
64
+ this.topSlot = [];
65
+ /**
66
+ * User name
67
+ */
68
+ this.user = '';
69
+ /**
70
+ * User image
71
+ */
72
+ this.userImage = '';
73
+ /**
74
+ * Designates if menu should close on outside-activator click.
75
+ */
76
+ this.closeOnClick = true;
77
+ /**
78
+ * Designates if menu should close when its content is clicked.
79
+ */
80
+ this.closeOnContentClick = true;
81
+ /**
82
+ * Applies position fixed to the dropdown.
83
+ */
84
+ this.fixed = false;
85
+ /**
86
+ * Components to be rendered on the menu header
87
+ */
88
+ this.headerSlot = [];
89
+ /**
90
+ * Props to be passed to the ZdImage component (rendered inside the avatar)
91
+ */
92
+ this.imageProps = {};
93
+ /**
94
+ * Offset the menu on the x-axis.
95
+ */
96
+ this.offsetX = false;
97
+ /**
98
+ * Offset the menu on the x-axis.
99
+ */
100
+ this.offsetY = true;
101
+ /**
102
+ * Designates whether menu should open on activator click.
103
+ */
104
+ this.openOnClick = true;
105
+ /**
106
+ * Designates whether menu should open on activator hover.
107
+ */
108
+ this.openOnHover = false;
109
+ /**
110
+ * Controls whether the component is visible or hidden.
111
+ */
112
+ this.value = false;
113
+ this.visibleItems = {
114
+ userName: true,
115
+ changeProfile: true,
116
+ logout: true,
117
+ };
118
+ /**
119
+ * Sets the height for the dropdown.
120
+ */
121
+ this.height = 'auto';
122
+ this.user = this.getInitValue('user', props.user, this.user);
123
+ this.userImage = this.getInitValue('userImage', props.userImage, this.userImage);
124
+ this.closeOnClick = this.getInitValue('closeOnClick', props.closeOnClick, this.closeOnClick);
125
+ this.closeOnContentClick = this.getInitValue('closeOnContentClick', props.closeOnContentClick, this.closeOnContentClick);
126
+ this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
127
+ this.offsetX = this.getInitValue('offsetX', props.offsetX, this.offsetX);
128
+ this.offsetY = this.getInitValue('offsetY', props.offsetY, this.offsetY);
129
+ this.openOnClick = this.getInitValue('openOnClick', props.openOnClick, this.openOnClick);
130
+ this.openOnHover = this.getInitValue('openOnHover', props.openOnHover, this.openOnHover);
131
+ this.value = this.getInitValue('value', props.value, this.value);
132
+ this.visibleItems = this.getInitValue('visibleItems', props.visibleItems, this.visibleItems);
133
+ this.height = this.getInitValue('height', props.height, this.height);
134
+ this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
135
+ this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
136
+ this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
137
+ this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
138
+ this.avatarProps = props.avatarProps || this.avatarProps;
139
+ this.imageProps = props.imageProps || this.imageProps;
140
+ this.activator = props.activator || this.getActivator();
141
+ this.bottomSlot = props.bottomSlot || this.bottomSlot;
142
+ this.propCenterSlot = props.centerSlot;
143
+ this.topSlot = props.topSlot || this.topSlot;
144
+ this.headerSlot = props.headerSlot || this.headerSlot;
145
+ this.createAccessors();
146
+ }
147
+ getActivator() {
148
+ return {
149
+ name: `${this.name}_activator_tooltip`,
150
+ component: 'ZdTooltip',
151
+ bottom: true,
152
+ label: this.user,
153
+ children: [
154
+ Object.assign({ name: `${this.name}_activator`, component: 'ZdAvatar', avatarSlot: [
155
+ Object.assign({ name: `${this.name}_image`, component: 'ZdImage', src: this.userImage }, this.imageProps),
156
+ ] }, this.avatarProps),
157
+ ],
158
+ };
159
+ }
160
+ getCenterSlot() {
161
+ return [
162
+ {
163
+ name: `${this.name}_center_list`,
164
+ component: 'ZdList',
165
+ dense: true,
166
+ items: [
167
+ {
168
+ name: `${this.name}_change_profile`,
169
+ component: 'ZdListItem',
170
+ title: 'USERINFO_CHANGE_PROFILE',
171
+ prependIcon: 'mdi-account',
172
+ cssClass: 'zd-px-2',
173
+ isVisible: `{{UserInfoController_${this.componentId}.showChangeProfile}}`,
174
+ events: {
175
+ click: ({ event, element }) => this.onProfileChange(event, element),
176
+ },
177
+ },
178
+ {
179
+ name: `${this.name}_logout`,
180
+ component: 'ZdListItem',
181
+ title: 'USERINFO_LOGOUT',
182
+ prependIcon: 'mdi-logout-variant',
183
+ cssClass: 'zd-px-2',
184
+ isVisible: `{{UserInfoController_${this.componentId}.showLogout}}`,
185
+ events: {
186
+ click: ({ event, element }) => this.onLogoutClick(event, element),
187
+ },
188
+ },
189
+ ],
190
+ },
191
+ ];
192
+ }
193
+ onLogoutClick(event, element) {
194
+ this.callEvent('onLogoutClick', { event, element, component: this });
195
+ }
196
+ onProfileChange(event, element) {
197
+ this.callEvent('onProfileChange', { event, element, component: this });
198
+ }
199
+ onCreated() {
200
+ super.onCreated();
201
+ core.Loader.addController(`UserInfoController_${this.componentId}`, new UserInfoController(this));
202
+ this.centerSlot = this.propCenterSlot ? this.propCenterSlot : this.getCenterSlot();
203
+ }
204
+ }
205
+ core.Messages.add({
206
+ 'pt-BR': {
207
+ translation: {
208
+ USERINFO_CHANGE_PROFILE: 'Alterar perfil',
209
+ USERINFO_LOGOUT: 'Sair',
210
+ },
211
+ },
212
+ 'en-US': {
213
+ translation: {
214
+ USERINFO_CHANGE_PROFILE: 'Change profile',
215
+ USERINFO_LOGOUT: 'Sign out',
216
+ },
217
+ },
218
+ 'es-ES': {
219
+ translation: {
220
+ USERINFO_CHANGE_PROFILE: 'Cambiar el perfil',
221
+ USERINFO_LOGOUT: 'Salir',
222
+ },
223
+ },
224
+ });
225
+
226
+ exports.UserInfo = UserInfo;
227
+
228
+ Object.defineProperty(exports, '__esModule', { value: true });
182
229
 
183
230
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zeedhi/zd-user-info-common",
3
- "version": "1.0.2",
3
+ "version": "1.1.0",
4
4
  "description": "Implementation of UserInfo componente using Zeedhi Next",
5
5
  "main": "dist/user-info-common.umd.js",
6
6
  "module": "dist/user-info-common.esm.js",
@@ -23,5 +23,5 @@
23
23
  "@zeedhi/common": "*",
24
24
  "@zeedhi/core": "*"
25
25
  },
26
- "gitHead": "20b28f73b33b70a69a64d89e43ec38b6d2c55aad"
26
+ "gitHead": "86893708d8588386db94214e7088918371e7dd7a"
27
27
  }
package/types/UserInfoController.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { UserInfo } from './user-info';
2
+ export declare class UserInfoController {
3
+ component: UserInfo;
4
+ constructor(component: UserInfo);
5
+ get showChangeProfile(): boolean;
6
+ get showLogout(): boolean;
7
+ }
package/types/interfaces.d.ts CHANGED
@@ -19,9 +19,9 @@ export interface IUserInfo extends IComponentRender {
19
19
  maxWidth?: number | string;
20
20
  minHeight?: number | string;
21
21
  minWidth?: number | string;
22
- showProfileChange?: boolean;
23
22
  topSlot?: IComponentRender[];
24
23
  user?: string;
25
24
  userImage?: string;
26
25
  value?: boolean;
26
+ visibleItems?: IDictionary<boolean>;
27
27
  }
package/types/user-info.d.ts CHANGED
@@ -18,10 +18,6 @@ export declare class UserInfo extends ComponentRender implements IUserInfo {
18
18
  * Components to be rendered on the center slot
19
19
  */
20
20
  centerSlot: IComponentRender[];
21
- /**
22
- * Show the profile change option
23
- */
24
- showProfileChange: boolean;
25
21
  /**
26
22
  * Components to be rendered on the top slot
27
23
  */
@@ -74,6 +70,7 @@ export declare class UserInfo extends ComponentRender implements IUserInfo {
74
70
  * Controls whether the component is visible or hidden.
75
71
  */
76
72
  value: boolean;
73
+ visibleItems: IDictionary<boolean>;
77
74
  /**
78
75
  * Sets the height for the dropdown.
79
76
  */
@@ -94,6 +91,7 @@ export declare class UserInfo extends ComponentRender implements IUserInfo {
94
91
  * Sets the minimum width for the dropdown.
95
92
  */
96
93
  minWidth?: number | string;
94
+ protected propCenterSlot?: IComponentRender[];
97
95
  constructor(props: IUserInfo);
98
96
  protected getActivator(): {
99
97
  name: string;
@@ -124,6 +122,7 @@ export declare class UserInfo extends ComponentRender implements IUserInfo {
124
122
  title: string;
125
123
  prependIcon: string;
126
124
  cssClass: string;
125
+ isVisible: string;
127
126
  events: {
128
127
  click: ({ event, element }: any) => void;
129
128
  };
@@ -131,4 +130,5 @@ export declare class UserInfo extends ComponentRender implements IUserInfo {
131
130
  }[];
132
131
  onLogoutClick(event: Event, element: HTMLElement): void;
133
132
  onProfileChange(event: Event, element: HTMLElement): void;
133
+ onCreated(): void;
134
134
  }