@zeedhi/zd-avatar-vue 1.6.3 → 3.0.1
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 +94 -104
- package/dist/avatar-vue.es.js +104335 -0
- package/dist/types/components/Avatar.d.ts +373 -0
- package/dist/types/components/Avatar.vue.d.ts +2 -0
- package/dist/types/index.d.ts +5 -0
- package/package.json +36 -15
- package/dist/avatar-vue.esm.js +0 -313
- package/dist/avatar-vue.umd.js +0 -319
- package/types/Avatar.d.ts +0 -18
- package/types/index.d.ts +0 -3
package/README.md
CHANGED
|
@@ -1,121 +1,111 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Componente Field Group para Zeedhi
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Utilize o comando abaixo para instalar ambos automaticamente:
|
|
9
|
-
|
|
10
|
-
```sh
|
|
11
|
-
npm install @zeedhi/zd-avatar
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
Ou instale os pacotes separadamente:
|
|
15
|
-
|
|
16
|
-
```sh
|
|
17
|
-
npm install @zeedhi/zd-avatar-vue @zeedhi/zd-avatar-common
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
### Registro do Componente
|
|
21
|
-
|
|
22
|
-
Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo `zeedhi.ts`)
|
|
23
|
-
|
|
24
|
-
```ts
|
|
25
|
-
import Vue from 'vue';
|
|
26
|
-
import { ZdAvatar } from '@zeedhi/zd-avatar';
|
|
27
|
-
// import { ZdAvatar } from '@zeedhi/zd-avatar-vue'; caso tenha instalado os pacotes separadamente
|
|
28
|
-
|
|
29
|
-
Vue.component('ZdAvatar', ZdAvatar);
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
### Uso Básico
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="#instalação">Instalação</a> |
|
|
5
|
+
<a href="#uso-básico">Uso Básico</a> |
|
|
6
|
+
<a href="#propriedades">Propriedades</a> |
|
|
7
|
+
</p>
|
|
33
8
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
```json
|
|
37
|
-
{
|
|
38
|
-
"name": "card",
|
|
39
|
-
"component": "ZdCard",
|
|
40
|
-
"cssClass": "zd-display-flex zd-justify-space-around zd-align-center",
|
|
41
|
-
"children": [
|
|
42
|
-
{
|
|
43
|
-
"name": "avatar-1",
|
|
44
|
-
"component": "ZdAvatar",
|
|
45
|
-
"color": "orange",
|
|
46
|
-
"size": 36,
|
|
47
|
-
"avatarSlot": [
|
|
48
|
-
{
|
|
49
|
-
"name": "icon-slot",
|
|
50
|
-
"component": "ZdIcon",
|
|
51
|
-
"color": "white",
|
|
52
|
-
"iconName": "mdi-pencil"
|
|
53
|
-
}
|
|
54
|
-
]
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
"name": "avatar-2",
|
|
58
|
-
"component": "ZdAvatar",
|
|
59
|
-
"color": "primary",
|
|
60
|
-
"avatarSlot": [
|
|
61
|
-
{
|
|
62
|
-
"name": "text-slot",
|
|
63
|
-
"component": "ZdText",
|
|
64
|
-
"cssClass": "white--text",
|
|
65
|
-
"text": "ZD"
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"name": "avatar-3",
|
|
71
|
-
"component": "ZdAvatar",
|
|
72
|
-
"size": 62,
|
|
73
|
-
"avatarSlot": [
|
|
74
|
-
{
|
|
75
|
-
"name": "img-slot",
|
|
76
|
-
"component": "ZdImage",
|
|
77
|
-
"height": "100px",
|
|
78
|
-
"src": "https://picsum.photos/id/1005/200/200.jpg"
|
|
79
|
-
}
|
|
80
|
-
]
|
|
81
|
-
}
|
|
82
|
-
]
|
|
83
|
-
}
|
|
84
|
-
```
|
|
9
|
+
O component zd-avatar é um card capas de agrupar campos
|
|
85
10
|
|
|
86
11
|
<p align="center">
|
|
87
|
-
<img src="./img/
|
|
12
|
+
<img alt="zd-avatar" src="./img/avatar.png" width="100%">
|
|
88
13
|
</p>
|
|
89
14
|
|
|
15
|
+
## Instalação
|
|
90
16
|
|
|
91
|
-
|
|
17
|
+
Para instalar o pacote basta rodar o seguinte comando:\
|
|
18
|
+
`npm i @zeedhi/zd-avatar`\
|
|
19
|
+
Com isso, dois pacotes serão instalados: o @zeedhi/zd-avatar-common e o @zeedhi/zd-avatar-vue.\
|
|
20
|
+
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-avatar-vue dentro de seu arquivo de configuração `zeedhi.ts`
|
|
92
21
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
| avatarSlot | IComponentRender\[\] | \[\] | Componentes que serão renderizados dentro do Avatar |
|
|
96
|
-
| color | string | "primary" | Aplica a cor especificada ao componente\. Pode ser a cor por extenso no padrão do material design ou em hexadecimal |
|
|
97
|
-
| rounded | boolean \| string | false | Aplica uma borda arredondada no Avatar |
|
|
98
|
-
| size | number \| string | 48 | Largura e altura do Avatar |
|
|
99
|
-
| tile | boolean | false | Remove o border\-radius do componente |
|
|
100
|
-
| height | number \| string \| undefined | undefined | Altura do componente |
|
|
101
|
-
| maxHeight | number \| string \| undefined | undefined | Altura máxima do componente |
|
|
102
|
-
| maxWidth | number \| string \| undefined | undefined | Largura máxima do componente |
|
|
103
|
-
| minHeight | number \| string \| undefined | undefined | Altura mínima do componente |
|
|
104
|
-
| minWidth | number \| string \| undefined | undefined | Largura mínima do componente |
|
|
105
|
-
| width | number \| string \| undefined | undefined | Largura do componente |
|
|
22
|
+
```shell
|
|
23
|
+
import { ZdFieldGroup } from '@zeedhi/zd-avatar-vue';
|
|
106
24
|
|
|
25
|
+
Vue.component('ZdFieldGroup', ZdFieldGroup);
|
|
26
|
+
```
|
|
107
27
|
|
|
28
|
+
Já o pacote @zeedhi/zd-avatar-common deve ser importado no arquivo controller do componente.
|
|
108
29
|
|
|
109
|
-
|
|
30
|
+
## Uso Básico
|
|
110
31
|
|
|
111
|
-
|
|
32
|
+
Para usar, defina a propriedade component como 'ZdFieldGroup'.
|
|
112
33
|
|
|
113
34
|
```json
|
|
114
35
|
{
|
|
115
|
-
"name": "
|
|
116
|
-
"component": "
|
|
117
|
-
"events": {
|
|
118
|
-
"click": "{{Controller.clickEvent}}"
|
|
119
|
-
}
|
|
36
|
+
"name": "avatar-example",
|
|
37
|
+
"component": "ZdFieldGroup"
|
|
120
38
|
}
|
|
121
39
|
```
|
|
40
|
+
|
|
41
|
+
## Propriedades
|
|
42
|
+
|
|
43
|
+
<table>
|
|
44
|
+
<thead>
|
|
45
|
+
<tr>
|
|
46
|
+
<th>Nome</th>
|
|
47
|
+
<th>Tipo</th>
|
|
48
|
+
<th>Default</th>
|
|
49
|
+
<th>Descrição</th>
|
|
50
|
+
</tr>
|
|
51
|
+
</thead>
|
|
52
|
+
<tbody>
|
|
53
|
+
<tr>
|
|
54
|
+
<td>disableActionRotate</td>
|
|
55
|
+
<td>boolean | string</td>
|
|
56
|
+
<td>true</td>
|
|
57
|
+
<td>Desativa a animação de rotação de ação ao expandir ou recolher o cartão recolhido</td>
|
|
58
|
+
</tr>
|
|
59
|
+
<tr>
|
|
60
|
+
<td>expandButton</td>
|
|
61
|
+
<td>IButton</td>
|
|
62
|
+
<td>undefined</td>
|
|
63
|
+
<td>Se definido, substitui o ícone de expansão pelo botão definido</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>expanded</td>
|
|
67
|
+
<td>boolean | string</td>
|
|
68
|
+
<td>false</td>
|
|
69
|
+
<td>Define se o componente está aberto ou fecahdo</td>
|
|
70
|
+
</tr>
|
|
71
|
+
<tr>
|
|
72
|
+
<td>header</td>
|
|
73
|
+
<td>IComponent[]</td>
|
|
74
|
+
<td>[]</td>
|
|
75
|
+
<td>Componentes a serem exibidos no cabeçalho</td>
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
78
|
+
<td>hideAction</td>
|
|
79
|
+
<td>boolean | string</td>
|
|
80
|
+
<td>false</td>
|
|
81
|
+
<td>Oculta o ícone de expansão</td>
|
|
82
|
+
</tr>
|
|
83
|
+
<tr>
|
|
84
|
+
<td>iconColor</td>
|
|
85
|
+
<td>string</td>
|
|
86
|
+
<td>var(--v-primary-base)</td>
|
|
87
|
+
<td>Define a cor do icone de expansão</td>
|
|
88
|
+
</tr>
|
|
89
|
+
<tr>
|
|
90
|
+
<td>iconName</td>
|
|
91
|
+
<td>string</td>
|
|
92
|
+
<td>expand</td>
|
|
93
|
+
<td>Define o icone de expansão</p>
|
|
94
|
+
</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td>lazyLoad</td>
|
|
98
|
+
<td>boolean</td>
|
|
99
|
+
<td>boolean | string</td>
|
|
100
|
+
<td>O conteúdo será carregado somente quando o cartão recolhido for aberto</td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td>readonly</td>
|
|
104
|
+
<td>boolean | string</td>
|
|
105
|
+
<td>false</td>
|
|
106
|
+
<td>Torna o cartão recolhido somente leitura. Faz a mesma coisa que o suporte desativado, mas não altera os estilos</td>
|
|
107
|
+
</tr>
|
|
108
|
+
</tbody>
|
|
109
|
+
</table>
|
|
110
|
+
|
|
111
|
+
<hr>
|