@zeedhi/zd-user-info-vue 1.0.0 → 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.
- package/README.md +161 -0
- package/dist/user-info-vue.esm.js +30 -54
- package/dist/user-info-vue.umd.js +30 -54
- package/package.json +3 -3
- package/types/UserInfo.d.ts +1 -1
- package/tsconfig.eslint.json +0 -10
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>
|
|
@@ -22,10 +22,6 @@ function __decorate(decorators, target, key, desc) {
|
|
|
22
22
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
23
23
|
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;
|
|
24
24
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
function __metadata(metadataKey, metadataValue) {
|
|
28
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
29
25
|
}
|
|
30
26
|
|
|
31
27
|
let ZdUserInfo = class ZdUserInfo extends ZdComponentRender {
|
|
@@ -35,97 +31,74 @@ let ZdUserInfo = class ZdUserInfo extends ZdComponentRender {
|
|
|
35
31
|
}
|
|
36
32
|
};
|
|
37
33
|
__decorate([
|
|
38
|
-
Prop({ type: [Object] })
|
|
39
|
-
__metadata("design:type", Object)
|
|
34
|
+
Prop({ type: [Object] })
|
|
40
35
|
], ZdUserInfo.prototype, "activator", void 0);
|
|
41
36
|
__decorate([
|
|
42
|
-
Prop({ type: [Object], default: () => ({}) })
|
|
43
|
-
__metadata("design:type", Object)
|
|
37
|
+
Prop({ type: [Object], default: () => ({}) })
|
|
44
38
|
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
45
39
|
__decorate([
|
|
46
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
47
|
-
__metadata("design:type", Array)
|
|
40
|
+
Prop({ type: [Array], default: () => ([]) })
|
|
48
41
|
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
49
42
|
__decorate([
|
|
50
|
-
Prop({ type: [Array] })
|
|
51
|
-
__metadata("design:type", Array)
|
|
43
|
+
Prop({ type: [Array] })
|
|
52
44
|
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
53
45
|
__decorate([
|
|
54
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
55
|
-
__metadata("design:type", Array)
|
|
46
|
+
Prop({ type: [Array], default: () => ([]) })
|
|
56
47
|
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
57
48
|
__decorate([
|
|
58
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
59
|
-
__metadata("design:type", Array)
|
|
49
|
+
Prop({ type: [Array], default: () => ([]) })
|
|
60
50
|
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
61
51
|
__decorate([
|
|
62
|
-
PropWatch({ type: [String
|
|
63
|
-
__metadata("design:type", Boolean)
|
|
64
|
-
], ZdUserInfo.prototype, "showProfileChange", void 0);
|
|
65
|
-
__decorate([
|
|
66
|
-
PropWatch({ type: [String], default: '' }),
|
|
67
|
-
__metadata("design:type", String)
|
|
52
|
+
PropWatch({ type: [String], default: '' })
|
|
68
53
|
], ZdUserInfo.prototype, "user", void 0);
|
|
69
54
|
__decorate([
|
|
70
|
-
PropWatch({ type: [String], default: '' })
|
|
71
|
-
__metadata("design:type", String)
|
|
55
|
+
PropWatch({ type: [String], default: '' })
|
|
72
56
|
], ZdUserInfo.prototype, "userImage", void 0);
|
|
73
57
|
__decorate([
|
|
74
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
75
|
-
__metadata("design:type", Boolean)
|
|
58
|
+
PropWatch({ type: [Boolean, String], default: true })
|
|
76
59
|
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
77
60
|
__decorate([
|
|
78
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
79
|
-
__metadata("design:type", Boolean)
|
|
61
|
+
PropWatch({ type: [Boolean, String], default: true })
|
|
80
62
|
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
81
63
|
__decorate([
|
|
82
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
83
|
-
__metadata("design:type", Boolean)
|
|
64
|
+
PropWatch({ type: [Boolean, String], default: false })
|
|
84
65
|
], ZdUserInfo.prototype, "fixed", void 0);
|
|
85
66
|
__decorate([
|
|
86
|
-
PropWatch({ type: [Object], default: () => ({}) })
|
|
87
|
-
__metadata("design:type", Object)
|
|
67
|
+
PropWatch({ type: [Object], default: () => ({}) })
|
|
88
68
|
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
89
69
|
__decorate([
|
|
90
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
91
|
-
__metadata("design:type", Boolean)
|
|
70
|
+
PropWatch({ type: [Boolean, String], default: false })
|
|
92
71
|
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
93
72
|
__decorate([
|
|
94
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
95
|
-
__metadata("design:type", Boolean)
|
|
73
|
+
PropWatch({ type: [Boolean, String], default: true })
|
|
96
74
|
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
97
75
|
__decorate([
|
|
98
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
99
|
-
__metadata("design:type", Boolean)
|
|
76
|
+
PropWatch({ type: [Boolean, String], default: true })
|
|
100
77
|
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
101
78
|
__decorate([
|
|
102
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
103
|
-
__metadata("design:type", Boolean)
|
|
79
|
+
PropWatch({ type: [Boolean, String], default: false })
|
|
104
80
|
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
105
81
|
__decorate([
|
|
106
|
-
PropWatch({ type: [Number, String], default: 'auto' })
|
|
107
|
-
__metadata("design:type", Object)
|
|
82
|
+
PropWatch({ type: [Number, String], default: 'auto' })
|
|
108
83
|
], ZdUserInfo.prototype, "height", void 0);
|
|
109
84
|
__decorate([
|
|
110
|
-
PropWatch({ type: [Number, String] })
|
|
111
|
-
__metadata("design:type", Object)
|
|
85
|
+
PropWatch({ type: [Number, String] })
|
|
112
86
|
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
113
87
|
__decorate([
|
|
114
|
-
PropWatch({ type: [Number, String] })
|
|
115
|
-
__metadata("design:type", Object)
|
|
88
|
+
PropWatch({ type: [Number, String] })
|
|
116
89
|
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
117
90
|
__decorate([
|
|
118
|
-
PropWatch({ type: [Number, String] })
|
|
119
|
-
__metadata("design:type", Object)
|
|
91
|
+
PropWatch({ type: [Number, String] })
|
|
120
92
|
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
121
93
|
__decorate([
|
|
122
|
-
PropWatch({ type: [Number, String] })
|
|
123
|
-
__metadata("design:type", Object)
|
|
94
|
+
PropWatch({ type: [Number, String] })
|
|
124
95
|
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
125
96
|
__decorate([
|
|
126
|
-
PropWatch({ default: undefined })
|
|
127
|
-
__metadata("design:type", Object)
|
|
97
|
+
PropWatch({ default: undefined })
|
|
128
98
|
], ZdUserInfo.prototype, "value", void 0);
|
|
99
|
+
__decorate([
|
|
100
|
+
PropWatch({ type: [String, Object], default: () => ({}) })
|
|
101
|
+
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
129
102
|
ZdUserInfo = __decorate([
|
|
130
103
|
Component
|
|
131
104
|
], ZdUserInfo);
|
|
@@ -234,9 +207,12 @@ var __vue_render__ = function () {
|
|
|
234
207
|
_vm._v(" "),
|
|
235
208
|
_vm._t("headerSlot"),
|
|
236
209
|
]
|
|
237
|
-
:
|
|
210
|
+
: _vm.instance.visibleItems.userName ||
|
|
211
|
+
_vm.instance.visibleItems.userName === undefined
|
|
212
|
+
? _c("div", { staticClass: "zd-text-center text-h5 zd-pa-2" }, [
|
|
238
213
|
_vm._v(_vm._s(_vm.instance.user)),
|
|
239
|
-
])
|
|
214
|
+
])
|
|
215
|
+
: _vm._e(),
|
|
240
216
|
_vm._v(" "),
|
|
241
217
|
_vm.instance.topSlot.length > 0 || _vm.$slots.topSlot
|
|
242
218
|
? [
|
|
@@ -24,10 +24,6 @@
|
|
|
24
24
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
25
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
26
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function __metadata(metadataKey, metadataValue) {
|
|
30
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
31
27
|
}
|
|
32
28
|
|
|
33
29
|
let ZdUserInfo = class ZdUserInfo extends vuetify.ZdComponentRender {
|
|
@@ -37,97 +33,74 @@
|
|
|
37
33
|
}
|
|
38
34
|
};
|
|
39
35
|
__decorate([
|
|
40
|
-
vuePropertyDecorator.Prop({ type: [Object] })
|
|
41
|
-
__metadata("design:type", Object)
|
|
36
|
+
vuePropertyDecorator.Prop({ type: [Object] })
|
|
42
37
|
], ZdUserInfo.prototype, "activator", void 0);
|
|
43
38
|
__decorate([
|
|
44
|
-
vuePropertyDecorator.Prop({ type: [Object], default: () => ({}) })
|
|
45
|
-
__metadata("design:type", Object)
|
|
39
|
+
vuePropertyDecorator.Prop({ type: [Object], default: () => ({}) })
|
|
46
40
|
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
47
41
|
__decorate([
|
|
48
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
49
|
-
__metadata("design:type", Array)
|
|
42
|
+
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
50
43
|
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
51
44
|
__decorate([
|
|
52
|
-
vuePropertyDecorator.Prop({ type: [Array] })
|
|
53
|
-
__metadata("design:type", Array)
|
|
45
|
+
vuePropertyDecorator.Prop({ type: [Array] })
|
|
54
46
|
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
55
47
|
__decorate([
|
|
56
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
57
|
-
__metadata("design:type", Array)
|
|
48
|
+
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
58
49
|
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
59
50
|
__decorate([
|
|
60
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
61
|
-
__metadata("design:type", Array)
|
|
51
|
+
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
62
52
|
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
63
53
|
__decorate([
|
|
64
|
-
vuetify.PropWatch({ type: [String
|
|
65
|
-
__metadata("design:type", Boolean)
|
|
66
|
-
], ZdUserInfo.prototype, "showProfileChange", void 0);
|
|
67
|
-
__decorate([
|
|
68
|
-
vuetify.PropWatch({ type: [String], default: '' }),
|
|
69
|
-
__metadata("design:type", String)
|
|
54
|
+
vuetify.PropWatch({ type: [String], default: '' })
|
|
70
55
|
], ZdUserInfo.prototype, "user", void 0);
|
|
71
56
|
__decorate([
|
|
72
|
-
vuetify.PropWatch({ type: [String], default: '' })
|
|
73
|
-
__metadata("design:type", String)
|
|
57
|
+
vuetify.PropWatch({ type: [String], default: '' })
|
|
74
58
|
], ZdUserInfo.prototype, "userImage", void 0);
|
|
75
59
|
__decorate([
|
|
76
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
77
|
-
__metadata("design:type", Boolean)
|
|
60
|
+
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
78
61
|
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
79
62
|
__decorate([
|
|
80
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
81
|
-
__metadata("design:type", Boolean)
|
|
63
|
+
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
82
64
|
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
83
65
|
__decorate([
|
|
84
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
85
|
-
__metadata("design:type", Boolean)
|
|
66
|
+
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
86
67
|
], ZdUserInfo.prototype, "fixed", void 0);
|
|
87
68
|
__decorate([
|
|
88
|
-
vuetify.PropWatch({ type: [Object], default: () => ({}) })
|
|
89
|
-
__metadata("design:type", Object)
|
|
69
|
+
vuetify.PropWatch({ type: [Object], default: () => ({}) })
|
|
90
70
|
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
91
71
|
__decorate([
|
|
92
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
93
|
-
__metadata("design:type", Boolean)
|
|
72
|
+
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
94
73
|
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
95
74
|
__decorate([
|
|
96
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
97
|
-
__metadata("design:type", Boolean)
|
|
75
|
+
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
98
76
|
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
99
77
|
__decorate([
|
|
100
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
101
|
-
__metadata("design:type", Boolean)
|
|
78
|
+
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
102
79
|
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
103
80
|
__decorate([
|
|
104
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
105
|
-
__metadata("design:type", Boolean)
|
|
81
|
+
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
106
82
|
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
107
83
|
__decorate([
|
|
108
|
-
vuetify.PropWatch({ type: [Number, String], default: 'auto' })
|
|
109
|
-
__metadata("design:type", Object)
|
|
84
|
+
vuetify.PropWatch({ type: [Number, String], default: 'auto' })
|
|
110
85
|
], ZdUserInfo.prototype, "height", void 0);
|
|
111
86
|
__decorate([
|
|
112
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
113
|
-
__metadata("design:type", Object)
|
|
87
|
+
vuetify.PropWatch({ type: [Number, String] })
|
|
114
88
|
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
115
89
|
__decorate([
|
|
116
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
117
|
-
__metadata("design:type", Object)
|
|
90
|
+
vuetify.PropWatch({ type: [Number, String] })
|
|
118
91
|
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
119
92
|
__decorate([
|
|
120
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
121
|
-
__metadata("design:type", Object)
|
|
93
|
+
vuetify.PropWatch({ type: [Number, String] })
|
|
122
94
|
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
123
95
|
__decorate([
|
|
124
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
125
|
-
__metadata("design:type", Object)
|
|
96
|
+
vuetify.PropWatch({ type: [Number, String] })
|
|
126
97
|
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
127
98
|
__decorate([
|
|
128
|
-
vuetify.PropWatch({ default: undefined })
|
|
129
|
-
__metadata("design:type", Object)
|
|
99
|
+
vuetify.PropWatch({ default: undefined })
|
|
130
100
|
], ZdUserInfo.prototype, "value", void 0);
|
|
101
|
+
__decorate([
|
|
102
|
+
vuetify.PropWatch({ type: [String, Object], default: () => ({}) })
|
|
103
|
+
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
131
104
|
ZdUserInfo = __decorate([
|
|
132
105
|
vuePropertyDecorator.Component
|
|
133
106
|
], ZdUserInfo);
|
|
@@ -236,9 +209,12 @@
|
|
|
236
209
|
_vm._v(" "),
|
|
237
210
|
_vm._t("headerSlot"),
|
|
238
211
|
]
|
|
239
|
-
:
|
|
212
|
+
: _vm.instance.visibleItems.userName ||
|
|
213
|
+
_vm.instance.visibleItems.userName === undefined
|
|
214
|
+
? _c("div", { staticClass: "zd-text-center text-h5 zd-pa-2" }, [
|
|
240
215
|
_vm._v(_vm._s(_vm.instance.user)),
|
|
241
|
-
])
|
|
216
|
+
])
|
|
217
|
+
: _vm._e(),
|
|
242
218
|
_vm._v(" "),
|
|
243
219
|
_vm.instance.topSlot.length > 0 || _vm.$slots.topSlot
|
|
244
220
|
? [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-user-info-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Implementation of UserInfo componente using Zeedhi Next",
|
|
5
5
|
"main": "dist/user-info-vue.umd.js",
|
|
6
6
|
"module": "dist/user-info-vue.esm.js",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"@zeedhi/common": "^1.0.0",
|
|
18
18
|
"@zeedhi/core": "^1.0.0",
|
|
19
19
|
"@zeedhi/vuetify": "^1.0.0",
|
|
20
|
-
"@zeedhi/zd-user-info-common": "
|
|
20
|
+
"@zeedhi/zd-user-info-common": "file:packages/common",
|
|
21
21
|
"vue": "^2.6.12",
|
|
22
22
|
"vue-class-component": "^7.2.6",
|
|
23
23
|
"vue-property-decorator": "^9.1.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "86893708d8588386db94214e7088918371e7dd7a"
|
|
26
26
|
}
|
package/types/UserInfo.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export default class ZdUserInfo extends ZdComponentRender {
|
|
|
11
11
|
centerSlot: IComponentRender[];
|
|
12
12
|
topSlot: IComponentRender[];
|
|
13
13
|
headerSlot: IComponentRender[];
|
|
14
|
-
showProfileChange: boolean;
|
|
15
14
|
user: string;
|
|
16
15
|
userImage: string;
|
|
17
16
|
closeOnClick: boolean;
|
|
@@ -28,4 +27,5 @@ export default class ZdUserInfo extends ZdComponentRender {
|
|
|
28
27
|
minHeight?: number | string;
|
|
29
28
|
minWidth?: number | string;
|
|
30
29
|
value: any;
|
|
30
|
+
visibleItems: IDictionary;
|
|
31
31
|
}
|