@zeedhi/zd-user-info-vue 1.2.0 → 1.3.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 +160 -160
- package/dist/user-info-vue.esm.js +28 -108
- package/dist/user-info-vue.umd.js +28 -108
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,161 +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"/>
|
|
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
161
|
</p>
|
|
@@ -25,7 +25,7 @@ function __decorate(decorators, target, key, desc) {
|
|
|
25
25
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
let ZdUserInfo
|
|
28
|
+
let ZdUserInfo = class ZdUserInfo extends ZdComponentRender {
|
|
29
29
|
constructor() {
|
|
30
30
|
super(...arguments);
|
|
31
31
|
this.instanceType = UserInfo;
|
|
@@ -33,77 +33,77 @@ let ZdUserInfo$2 = class ZdUserInfo extends ZdComponentRender {
|
|
|
33
33
|
};
|
|
34
34
|
__decorate([
|
|
35
35
|
Prop({ type: [Object] })
|
|
36
|
-
], ZdUserInfo
|
|
36
|
+
], ZdUserInfo.prototype, "activator", void 0);
|
|
37
37
|
__decorate([
|
|
38
38
|
Prop({ type: [Object], default: () => ({}) })
|
|
39
|
-
], ZdUserInfo
|
|
39
|
+
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
40
40
|
__decorate([
|
|
41
41
|
Prop({ type: [Array], default: () => ([]) })
|
|
42
|
-
], ZdUserInfo
|
|
42
|
+
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
43
43
|
__decorate([
|
|
44
44
|
Prop({ type: [Array] })
|
|
45
|
-
], ZdUserInfo
|
|
45
|
+
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
46
46
|
__decorate([
|
|
47
47
|
Prop({ type: [Array], default: () => ([]) })
|
|
48
|
-
], ZdUserInfo
|
|
48
|
+
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
49
49
|
__decorate([
|
|
50
50
|
Prop({ type: [Array], default: () => ([]) })
|
|
51
|
-
], ZdUserInfo
|
|
51
|
+
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
52
52
|
__decorate([
|
|
53
53
|
PropWatch({ type: [String], default: '' })
|
|
54
|
-
], ZdUserInfo
|
|
54
|
+
], ZdUserInfo.prototype, "user", void 0);
|
|
55
55
|
__decorate([
|
|
56
56
|
PropWatch({ type: [String], default: '' })
|
|
57
|
-
], ZdUserInfo
|
|
57
|
+
], ZdUserInfo.prototype, "userImage", void 0);
|
|
58
58
|
__decorate([
|
|
59
59
|
PropWatch({ type: [Boolean, String], default: true })
|
|
60
|
-
], ZdUserInfo
|
|
60
|
+
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
61
61
|
__decorate([
|
|
62
62
|
PropWatch({ type: [Boolean, String], default: true })
|
|
63
|
-
], ZdUserInfo
|
|
63
|
+
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
64
64
|
__decorate([
|
|
65
65
|
PropWatch({ type: [Boolean, String], default: false })
|
|
66
|
-
], ZdUserInfo
|
|
66
|
+
], ZdUserInfo.prototype, "fixed", void 0);
|
|
67
67
|
__decorate([
|
|
68
68
|
PropWatch({ type: [Object], default: () => ({}) })
|
|
69
|
-
], ZdUserInfo
|
|
69
|
+
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
70
70
|
__decorate([
|
|
71
71
|
PropWatch({ type: [Boolean, String], default: false })
|
|
72
|
-
], ZdUserInfo
|
|
72
|
+
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
73
73
|
__decorate([
|
|
74
74
|
PropWatch({ type: [Boolean, String], default: true })
|
|
75
|
-
], ZdUserInfo
|
|
75
|
+
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
76
76
|
__decorate([
|
|
77
77
|
PropWatch({ type: [Boolean, String], default: true })
|
|
78
|
-
], ZdUserInfo
|
|
78
|
+
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
79
79
|
__decorate([
|
|
80
80
|
PropWatch({ type: [Boolean, String], default: false })
|
|
81
|
-
], ZdUserInfo
|
|
81
|
+
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
82
82
|
__decorate([
|
|
83
83
|
PropWatch({ type: [Number, String], default: 'auto' })
|
|
84
|
-
], ZdUserInfo
|
|
84
|
+
], ZdUserInfo.prototype, "height", void 0);
|
|
85
85
|
__decorate([
|
|
86
86
|
PropWatch({ type: [Number, String] })
|
|
87
|
-
], ZdUserInfo
|
|
87
|
+
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
88
88
|
__decorate([
|
|
89
89
|
PropWatch({ type: [Number, String] })
|
|
90
|
-
], ZdUserInfo
|
|
90
|
+
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
91
91
|
__decorate([
|
|
92
92
|
PropWatch({ type: [Number, String] })
|
|
93
|
-
], ZdUserInfo
|
|
93
|
+
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
94
94
|
__decorate([
|
|
95
95
|
PropWatch({ type: [Number, String] })
|
|
96
|
-
], ZdUserInfo
|
|
96
|
+
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
97
97
|
__decorate([
|
|
98
98
|
PropWatch({ default: undefined })
|
|
99
|
-
], ZdUserInfo
|
|
99
|
+
], ZdUserInfo.prototype, "value", void 0);
|
|
100
100
|
__decorate([
|
|
101
101
|
PropWatch({ type: [String, Object], default: () => ({}) })
|
|
102
|
-
], ZdUserInfo
|
|
103
|
-
ZdUserInfo
|
|
102
|
+
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
103
|
+
ZdUserInfo = __decorate([
|
|
104
104
|
Component
|
|
105
|
-
], ZdUserInfo
|
|
106
|
-
var script = ZdUserInfo
|
|
105
|
+
], ZdUserInfo);
|
|
106
|
+
var script = ZdUserInfo;
|
|
107
107
|
|
|
108
108
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
109
109
|
if (typeof shadowMode !== 'boolean') {
|
|
@@ -310,87 +310,7 @@ __vue_render__._withStripped = true;
|
|
|
310
310
|
undefined
|
|
311
311
|
);
|
|
312
312
|
|
|
313
|
-
let ZdUserInfo = class ZdUserInfo extends ZdComponentRender {
|
|
314
|
-
constructor() {
|
|
315
|
-
super(...arguments);
|
|
316
|
-
this.instanceType = UserInfo;
|
|
317
|
-
}
|
|
318
|
-
};
|
|
319
|
-
__decorate([
|
|
320
|
-
Prop({ type: [Object] })
|
|
321
|
-
], ZdUserInfo.prototype, "activator", void 0);
|
|
322
|
-
__decorate([
|
|
323
|
-
Prop({ type: [Object], default: () => ({}) })
|
|
324
|
-
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
325
|
-
__decorate([
|
|
326
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
327
|
-
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
328
|
-
__decorate([
|
|
329
|
-
Prop({ type: [Array] })
|
|
330
|
-
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
331
|
-
__decorate([
|
|
332
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
333
|
-
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
334
|
-
__decorate([
|
|
335
|
-
Prop({ type: [Array], default: () => ([]) })
|
|
336
|
-
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
337
|
-
__decorate([
|
|
338
|
-
PropWatch({ type: [String], default: '' })
|
|
339
|
-
], ZdUserInfo.prototype, "user", void 0);
|
|
340
|
-
__decorate([
|
|
341
|
-
PropWatch({ type: [String], default: '' })
|
|
342
|
-
], ZdUserInfo.prototype, "userImage", void 0);
|
|
343
|
-
__decorate([
|
|
344
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
345
|
-
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
346
|
-
__decorate([
|
|
347
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
348
|
-
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
349
|
-
__decorate([
|
|
350
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
351
|
-
], ZdUserInfo.prototype, "fixed", void 0);
|
|
352
|
-
__decorate([
|
|
353
|
-
PropWatch({ type: [Object], default: () => ({}) })
|
|
354
|
-
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
355
|
-
__decorate([
|
|
356
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
357
|
-
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
358
|
-
__decorate([
|
|
359
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
360
|
-
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
361
|
-
__decorate([
|
|
362
|
-
PropWatch({ type: [Boolean, String], default: true })
|
|
363
|
-
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
364
|
-
__decorate([
|
|
365
|
-
PropWatch({ type: [Boolean, String], default: false })
|
|
366
|
-
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
367
|
-
__decorate([
|
|
368
|
-
PropWatch({ type: [Number, String], default: 'auto' })
|
|
369
|
-
], ZdUserInfo.prototype, "height", void 0);
|
|
370
|
-
__decorate([
|
|
371
|
-
PropWatch({ type: [Number, String] })
|
|
372
|
-
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
373
|
-
__decorate([
|
|
374
|
-
PropWatch({ type: [Number, String] })
|
|
375
|
-
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
376
|
-
__decorate([
|
|
377
|
-
PropWatch({ type: [Number, String] })
|
|
378
|
-
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
379
|
-
__decorate([
|
|
380
|
-
PropWatch({ type: [Number, String] })
|
|
381
|
-
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
382
|
-
__decorate([
|
|
383
|
-
PropWatch({ default: undefined })
|
|
384
|
-
], ZdUserInfo.prototype, "value", void 0);
|
|
385
|
-
__decorate([
|
|
386
|
-
PropWatch({ type: [String, Object], default: () => ({}) })
|
|
387
|
-
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
388
|
-
ZdUserInfo = __decorate([
|
|
389
|
-
Component
|
|
390
|
-
], ZdUserInfo);
|
|
391
|
-
var ZdUserInfo$1 = ZdUserInfo;
|
|
392
|
-
|
|
393
313
|
const packageContent = require('../package.json');
|
|
394
314
|
VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
395
315
|
|
|
396
|
-
export { __vue_component__ as ZdUserInfo,
|
|
316
|
+
export { __vue_component__ as ZdUserInfo, script as ZdUserInfoClass };
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
let ZdUserInfo
|
|
29
|
+
let ZdUserInfo = class ZdUserInfo extends vuetify.ZdComponentRender {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(...arguments);
|
|
32
32
|
this.instanceType = zdUserInfoCommon.UserInfo;
|
|
@@ -34,77 +34,77 @@
|
|
|
34
34
|
};
|
|
35
35
|
__decorate([
|
|
36
36
|
vuePropertyDecorator.Prop({ type: [Object] })
|
|
37
|
-
], ZdUserInfo
|
|
37
|
+
], ZdUserInfo.prototype, "activator", void 0);
|
|
38
38
|
__decorate([
|
|
39
39
|
vuePropertyDecorator.Prop({ type: [Object], default: () => ({}) })
|
|
40
|
-
], ZdUserInfo
|
|
40
|
+
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
41
41
|
__decorate([
|
|
42
42
|
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
43
|
-
], ZdUserInfo
|
|
43
|
+
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
44
44
|
__decorate([
|
|
45
45
|
vuePropertyDecorator.Prop({ type: [Array] })
|
|
46
|
-
], ZdUserInfo
|
|
46
|
+
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
47
47
|
__decorate([
|
|
48
48
|
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
49
|
-
], ZdUserInfo
|
|
49
|
+
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
50
50
|
__decorate([
|
|
51
51
|
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
52
|
-
], ZdUserInfo
|
|
52
|
+
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
53
53
|
__decorate([
|
|
54
54
|
vuetify.PropWatch({ type: [String], default: '' })
|
|
55
|
-
], ZdUserInfo
|
|
55
|
+
], ZdUserInfo.prototype, "user", void 0);
|
|
56
56
|
__decorate([
|
|
57
57
|
vuetify.PropWatch({ type: [String], default: '' })
|
|
58
|
-
], ZdUserInfo
|
|
58
|
+
], ZdUserInfo.prototype, "userImage", void 0);
|
|
59
59
|
__decorate([
|
|
60
60
|
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
61
|
-
], ZdUserInfo
|
|
61
|
+
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
62
62
|
__decorate([
|
|
63
63
|
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
64
|
-
], ZdUserInfo
|
|
64
|
+
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
65
65
|
__decorate([
|
|
66
66
|
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
67
|
-
], ZdUserInfo
|
|
67
|
+
], ZdUserInfo.prototype, "fixed", void 0);
|
|
68
68
|
__decorate([
|
|
69
69
|
vuetify.PropWatch({ type: [Object], default: () => ({}) })
|
|
70
|
-
], ZdUserInfo
|
|
70
|
+
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
71
71
|
__decorate([
|
|
72
72
|
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
73
|
-
], ZdUserInfo
|
|
73
|
+
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
74
74
|
__decorate([
|
|
75
75
|
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
76
|
-
], ZdUserInfo
|
|
76
|
+
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
77
77
|
__decorate([
|
|
78
78
|
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
79
|
-
], ZdUserInfo
|
|
79
|
+
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
80
80
|
__decorate([
|
|
81
81
|
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
82
|
-
], ZdUserInfo
|
|
82
|
+
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
83
83
|
__decorate([
|
|
84
84
|
vuetify.PropWatch({ type: [Number, String], default: 'auto' })
|
|
85
|
-
], ZdUserInfo
|
|
85
|
+
], ZdUserInfo.prototype, "height", void 0);
|
|
86
86
|
__decorate([
|
|
87
87
|
vuetify.PropWatch({ type: [Number, String] })
|
|
88
|
-
], ZdUserInfo
|
|
88
|
+
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
89
89
|
__decorate([
|
|
90
90
|
vuetify.PropWatch({ type: [Number, String] })
|
|
91
|
-
], ZdUserInfo
|
|
91
|
+
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
92
92
|
__decorate([
|
|
93
93
|
vuetify.PropWatch({ type: [Number, String] })
|
|
94
|
-
], ZdUserInfo
|
|
94
|
+
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
95
95
|
__decorate([
|
|
96
96
|
vuetify.PropWatch({ type: [Number, String] })
|
|
97
|
-
], ZdUserInfo
|
|
97
|
+
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
98
98
|
__decorate([
|
|
99
99
|
vuetify.PropWatch({ default: undefined })
|
|
100
|
-
], ZdUserInfo
|
|
100
|
+
], ZdUserInfo.prototype, "value", void 0);
|
|
101
101
|
__decorate([
|
|
102
102
|
vuetify.PropWatch({ type: [String, Object], default: () => ({}) })
|
|
103
|
-
], ZdUserInfo
|
|
104
|
-
ZdUserInfo
|
|
103
|
+
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
104
|
+
ZdUserInfo = __decorate([
|
|
105
105
|
vuePropertyDecorator.Component
|
|
106
|
-
], ZdUserInfo
|
|
107
|
-
var script = ZdUserInfo
|
|
106
|
+
], ZdUserInfo);
|
|
107
|
+
var script = ZdUserInfo;
|
|
108
108
|
|
|
109
109
|
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
|
110
110
|
if (typeof shadowMode !== 'boolean') {
|
|
@@ -311,91 +311,11 @@
|
|
|
311
311
|
undefined
|
|
312
312
|
);
|
|
313
313
|
|
|
314
|
-
let ZdUserInfo = class ZdUserInfo extends vuetify.ZdComponentRender {
|
|
315
|
-
constructor() {
|
|
316
|
-
super(...arguments);
|
|
317
|
-
this.instanceType = zdUserInfoCommon.UserInfo;
|
|
318
|
-
}
|
|
319
|
-
};
|
|
320
|
-
__decorate([
|
|
321
|
-
vuePropertyDecorator.Prop({ type: [Object] })
|
|
322
|
-
], ZdUserInfo.prototype, "activator", void 0);
|
|
323
|
-
__decorate([
|
|
324
|
-
vuePropertyDecorator.Prop({ type: [Object], default: () => ({}) })
|
|
325
|
-
], ZdUserInfo.prototype, "avatarProps", void 0);
|
|
326
|
-
__decorate([
|
|
327
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
328
|
-
], ZdUserInfo.prototype, "bottomSlot", void 0);
|
|
329
|
-
__decorate([
|
|
330
|
-
vuePropertyDecorator.Prop({ type: [Array] })
|
|
331
|
-
], ZdUserInfo.prototype, "centerSlot", void 0);
|
|
332
|
-
__decorate([
|
|
333
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
334
|
-
], ZdUserInfo.prototype, "topSlot", void 0);
|
|
335
|
-
__decorate([
|
|
336
|
-
vuePropertyDecorator.Prop({ type: [Array], default: () => ([]) })
|
|
337
|
-
], ZdUserInfo.prototype, "headerSlot", void 0);
|
|
338
|
-
__decorate([
|
|
339
|
-
vuetify.PropWatch({ type: [String], default: '' })
|
|
340
|
-
], ZdUserInfo.prototype, "user", void 0);
|
|
341
|
-
__decorate([
|
|
342
|
-
vuetify.PropWatch({ type: [String], default: '' })
|
|
343
|
-
], ZdUserInfo.prototype, "userImage", void 0);
|
|
344
|
-
__decorate([
|
|
345
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
346
|
-
], ZdUserInfo.prototype, "closeOnClick", void 0);
|
|
347
|
-
__decorate([
|
|
348
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
349
|
-
], ZdUserInfo.prototype, "closeOnContentClick", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
352
|
-
], ZdUserInfo.prototype, "fixed", void 0);
|
|
353
|
-
__decorate([
|
|
354
|
-
vuetify.PropWatch({ type: [Object], default: () => ({}) })
|
|
355
|
-
], ZdUserInfo.prototype, "imageProps", void 0);
|
|
356
|
-
__decorate([
|
|
357
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
358
|
-
], ZdUserInfo.prototype, "offsetX", void 0);
|
|
359
|
-
__decorate([
|
|
360
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
361
|
-
], ZdUserInfo.prototype, "offsetY", void 0);
|
|
362
|
-
__decorate([
|
|
363
|
-
vuetify.PropWatch({ type: [Boolean, String], default: true })
|
|
364
|
-
], ZdUserInfo.prototype, "openOnClick", void 0);
|
|
365
|
-
__decorate([
|
|
366
|
-
vuetify.PropWatch({ type: [Boolean, String], default: false })
|
|
367
|
-
], ZdUserInfo.prototype, "openOnHover", void 0);
|
|
368
|
-
__decorate([
|
|
369
|
-
vuetify.PropWatch({ type: [Number, String], default: 'auto' })
|
|
370
|
-
], ZdUserInfo.prototype, "height", void 0);
|
|
371
|
-
__decorate([
|
|
372
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
373
|
-
], ZdUserInfo.prototype, "maxHeight", void 0);
|
|
374
|
-
__decorate([
|
|
375
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
376
|
-
], ZdUserInfo.prototype, "maxWidth", void 0);
|
|
377
|
-
__decorate([
|
|
378
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
379
|
-
], ZdUserInfo.prototype, "minHeight", void 0);
|
|
380
|
-
__decorate([
|
|
381
|
-
vuetify.PropWatch({ type: [Number, String] })
|
|
382
|
-
], ZdUserInfo.prototype, "minWidth", void 0);
|
|
383
|
-
__decorate([
|
|
384
|
-
vuetify.PropWatch({ default: undefined })
|
|
385
|
-
], ZdUserInfo.prototype, "value", void 0);
|
|
386
|
-
__decorate([
|
|
387
|
-
vuetify.PropWatch({ type: [String, Object], default: () => ({}) })
|
|
388
|
-
], ZdUserInfo.prototype, "visibleItems", void 0);
|
|
389
|
-
ZdUserInfo = __decorate([
|
|
390
|
-
vuePropertyDecorator.Component
|
|
391
|
-
], ZdUserInfo);
|
|
392
|
-
var ZdUserInfo$1 = ZdUserInfo;
|
|
393
|
-
|
|
394
314
|
const packageContent = require('../package.json');
|
|
395
315
|
core.VersionService.addPackageVersion(packageContent.name, packageContent.version);
|
|
396
316
|
|
|
397
317
|
exports.ZdUserInfo = __vue_component__;
|
|
398
|
-
exports.ZdUserInfoClass =
|
|
318
|
+
exports.ZdUserInfoClass = script;
|
|
399
319
|
|
|
400
320
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
401
321
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-user-info-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.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",
|
|
@@ -22,5 +22,5 @@
|
|
|
22
22
|
"vue-class-component": "^7.2.6",
|
|
23
23
|
"vue-property-decorator": "^9.1.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "6ce6bffebec76b4170fab48b76d124944333fb88"
|
|
26
26
|
}
|