@sankhyalabs/ezui-docs 7.3.4 → 7.3.5-dev.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/components/ez-button/readme.md +14 -0
- package/components/ez-calendar/readme.md +4 -0
- package/components/ez-card-item/readme.md +4 -0
- package/components/ez-classic-combo-box/readme.md +12 -3
- package/components/ez-classic-date-input/readme.md +111 -0
- package/components/ez-classic-date-time-input/readme.md +111 -0
- package/components/ez-classic-input/readme.md +22 -1
- package/components/ez-classic-number-input/readme.md +107 -0
- package/components/ez-classic-search/readme.md +162 -0
- package/components/ez-classic-search/subcomponent/classic-search-list/readme.md +72 -0
- package/components/ez-classic-search-plus/readme.md +169 -0
- package/components/ez-classic-search-plus/subcomponent/ez-search-result-list/readme.md +90 -0
- package/components/ez-classic-text-area/readme.md +25 -19
- package/components/ez-classic-time-input/readme.md +88 -0
- package/components/ez-empty-card/readme.md +2 -2
- package/components/ez-filter/readme.md +401 -0
- package/components/ez-form/readme.md +47 -9
- package/components/ez-form-view/readme.md +59 -6
- package/components/ez-grid/readme.md +24 -6
- package/components/ez-grid/subcomponents/readme.md +1 -0
- package/components/ez-grid-pagination/readme.md +95 -0
- package/components/ez-grid-view/readme.md +9 -3
- package/components/ez-guide-navigator/readme.md +2 -0
- package/components/ez-icon/readme.md +6 -0
- package/components/ez-image-input/readme.md +77 -0
- package/components/ez-modal/readme.md +2 -1
- package/components/ez-multi-select-input/readme.md +2 -0
- package/components/ez-multi-selection-list/readme.md +2 -0
- package/components/ez-popover/readme.md +13 -0
- package/components/ez-popover-plus/readme.md +8 -0
- package/components/ez-popup/readme.md +2 -0
- package/components/ez-record-navigation/readme.md +59 -0
- package/components/ez-scroller/readme.md +20 -6
- package/components/ez-search/readme.md +7 -1
- package/components/ez-sidebar-navigator/readme.md +2 -0
- package/components/ez-skeleton/readme.md +4 -0
- package/components/ez-split-button/readme.md +2 -0
- package/components/ez-split-panel/readme.md +1 -0
- package/components/ez-split-panel/structure/item/readme.md +1 -0
- package/components/ez-tabselector/readme.md +5 -3
- package/components/ez-tooltip/readme.md +6 -0
- package/package.json +1 -1
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------ | --------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `customUiBuilders` | -- | Define construtores customizados para tipos de campos específicos | `Map<UserInterface, (field: IFormViewField, context?: IFieldBuilderContext) => HTMLElement>` | `new Map()` |
|
|
13
|
+
| `fields` | -- | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
|
|
14
|
+
| `formLayout` | `form-layout` | Define o layout do formulário. | `FormLayout.CASCADE \| FormLayout.CLASSIC_CASCADE \| FormLayout.CLASSIC_SIDE_BY_SIDE \| FormLayout.SIDE_BY_SIDE` | `undefined` |
|
|
15
|
+
| `selectedRecord` | -- | Define os registros da linha selecionada. | `Record` | `undefined` |
|
|
16
|
+
| `singleColumn` | `single-column` | Define se o formulario deve possuir apenas 1 coluna. | `boolean` | `false` |
|
|
15
17
|
|
|
16
18
|
|
|
17
19
|
## Events
|
|
@@ -59,6 +61,7 @@ Type: `Promise<void>`
|
|
|
59
61
|
|
|
60
62
|
### Used by
|
|
61
63
|
|
|
64
|
+
- [ez-filter](../ez-filter)
|
|
62
65
|
- [ez-form](../ez-form)
|
|
63
66
|
|
|
64
67
|
### Depends on
|
|
@@ -66,17 +69,27 @@ Type: `Promise<void>`
|
|
|
66
69
|
- [ez-custom-form-input](custom-input)
|
|
67
70
|
- [ez-collapsible-box](../ez-collapsible-box)
|
|
68
71
|
- [ez-check](../ez-check)
|
|
72
|
+
- [ez-classic-combo-box](../ez-classic-combo-box)
|
|
69
73
|
- [ez-combo-box](../ez-combo-box)
|
|
74
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
70
75
|
- [ez-date-input](../ez-date-input)
|
|
76
|
+
- [ez-classic-time-input](../ez-classic-time-input)
|
|
71
77
|
- [ez-time-input](../ez-time-input)
|
|
78
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
72
79
|
- [ez-date-time-input](../ez-date-time-input)
|
|
73
80
|
- [ez-upload](../ez-upload)
|
|
81
|
+
- [ez-classic-number-input](../ez-classic-number-input)
|
|
74
82
|
- [ez-number-input](../ez-number-input)
|
|
83
|
+
- [ez-classic-text-area](../ez-classic-text-area)
|
|
75
84
|
- [ez-text-area](../ez-text-area)
|
|
85
|
+
- [ez-classic-input](../ez-classic-input)
|
|
76
86
|
- [ez-text-input](../ez-text-input)
|
|
87
|
+
- [ez-classic-search-plus](../ez-classic-search-plus)
|
|
77
88
|
- [ez-search-plus](../ez-search-plus)
|
|
89
|
+
- [ez-classic-search](../ez-classic-search)
|
|
78
90
|
- [ez-search](../ez-search)
|
|
79
91
|
- [ez-rich-text](../ez-rich-text)
|
|
92
|
+
- [ez-image-input](../ez-image-input)
|
|
80
93
|
- [ez-multi-select-input](../ez-multi-select-input)
|
|
81
94
|
|
|
82
95
|
### Graph
|
|
@@ -85,17 +98,27 @@ graph TD;
|
|
|
85
98
|
ez-form-view --> ez-custom-form-input
|
|
86
99
|
ez-form-view --> ez-collapsible-box
|
|
87
100
|
ez-form-view --> ez-check
|
|
101
|
+
ez-form-view --> ez-classic-combo-box
|
|
88
102
|
ez-form-view --> ez-combo-box
|
|
103
|
+
ez-form-view --> ez-classic-date-input
|
|
89
104
|
ez-form-view --> ez-date-input
|
|
105
|
+
ez-form-view --> ez-classic-time-input
|
|
90
106
|
ez-form-view --> ez-time-input
|
|
107
|
+
ez-form-view --> ez-classic-date-time-input
|
|
91
108
|
ez-form-view --> ez-date-time-input
|
|
92
109
|
ez-form-view --> ez-upload
|
|
110
|
+
ez-form-view --> ez-classic-number-input
|
|
93
111
|
ez-form-view --> ez-number-input
|
|
112
|
+
ez-form-view --> ez-classic-text-area
|
|
94
113
|
ez-form-view --> ez-text-area
|
|
114
|
+
ez-form-view --> ez-classic-input
|
|
95
115
|
ez-form-view --> ez-text-input
|
|
116
|
+
ez-form-view --> ez-classic-search-plus
|
|
96
117
|
ez-form-view --> ez-search-plus
|
|
118
|
+
ez-form-view --> ez-classic-search
|
|
97
119
|
ez-form-view --> ez-search
|
|
98
120
|
ez-form-view --> ez-rich-text
|
|
121
|
+
ez-form-view --> ez-image-input
|
|
99
122
|
ez-form-view --> ez-multi-select-input
|
|
100
123
|
ez-collapsible-box --> ez-icon
|
|
101
124
|
ez-collapsible-box --> ez-text-edit
|
|
@@ -104,28 +127,51 @@ graph TD;
|
|
|
104
127
|
ez-text-input --> ez-tooltip
|
|
105
128
|
ez-text-input --> ez-icon
|
|
106
129
|
ez-button --> ez-icon
|
|
130
|
+
ez-classic-combo-box --> ez-classic-input
|
|
131
|
+
ez-classic-combo-box --> ez-popover-core
|
|
132
|
+
ez-classic-input --> ez-icon
|
|
107
133
|
ez-combo-box --> ez-text-input
|
|
108
134
|
ez-combo-box --> ez-icon
|
|
109
135
|
ez-combo-box --> ez-popover-plus
|
|
110
136
|
ez-combo-box --> ez-combo-box-list
|
|
111
137
|
ez-popover-plus --> ez-popover-core
|
|
138
|
+
ez-classic-date-input --> ez-classic-input
|
|
139
|
+
ez-classic-date-input --> ez-popover-plus
|
|
140
|
+
ez-classic-date-input --> ez-calendar
|
|
112
141
|
ez-date-input --> ez-text-input
|
|
113
142
|
ez-date-input --> ez-popover-plus
|
|
114
143
|
ez-date-input --> ez-calendar
|
|
144
|
+
ez-classic-time-input --> ez-classic-input
|
|
115
145
|
ez-time-input --> ez-text-input
|
|
116
146
|
ez-time-input --> ez-icon
|
|
147
|
+
ez-classic-date-time-input --> ez-classic-input
|
|
148
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
149
|
+
ez-classic-date-time-input --> ez-calendar
|
|
117
150
|
ez-date-time-input --> ez-text-input
|
|
118
151
|
ez-date-time-input --> ez-popover-plus
|
|
119
152
|
ez-date-time-input --> ez-calendar
|
|
153
|
+
ez-classic-number-input --> ez-classic-input
|
|
120
154
|
ez-number-input --> ez-text-input
|
|
155
|
+
ez-classic-text-area --> ez-icon
|
|
121
156
|
ez-text-area --> ez-tooltip
|
|
122
157
|
ez-text-area --> ez-icon
|
|
158
|
+
ez-classic-search-plus --> ez-classic-input
|
|
159
|
+
ez-classic-search-plus --> ez-popover-plus
|
|
160
|
+
ez-classic-search-plus --> ez-classic-search-result-list
|
|
161
|
+
ez-classic-search-result-list --> ez-card-item
|
|
162
|
+
ez-classic-search-result-list --> ez-skeleton
|
|
123
163
|
ez-search-plus --> ez-icon
|
|
124
164
|
ez-search-plus --> ez-text-input
|
|
125
165
|
ez-search-plus --> ez-popover-plus
|
|
126
166
|
ez-search-plus --> ez-search-result-list
|
|
127
167
|
ez-search-result-list --> ez-card-item
|
|
128
168
|
ez-search-result-list --> ez-skeleton
|
|
169
|
+
ez-classic-search --> ez-button
|
|
170
|
+
ez-classic-search --> ez-classic-input
|
|
171
|
+
ez-classic-search --> ez-popover-plus
|
|
172
|
+
ez-classic-search --> classic-search-list
|
|
173
|
+
classic-search-list --> ez-card-item
|
|
174
|
+
ez-search --> ez-button
|
|
129
175
|
ez-search --> ez-text-input
|
|
130
176
|
ez-search --> ez-icon
|
|
131
177
|
ez-search --> ez-popover-plus
|
|
@@ -154,6 +200,10 @@ graph TD;
|
|
|
154
200
|
ez-simple-image-uploader --> ez-tooltip
|
|
155
201
|
ez-simple-image-uploader --> ez-text-input
|
|
156
202
|
ez-simple-image-uploader --> ez-icon
|
|
203
|
+
ez-image-input --> ez-skeleton
|
|
204
|
+
ez-image-input --> ez-button
|
|
205
|
+
ez-image-input --> ez-icon
|
|
206
|
+
ez-image-input --> ez-popup
|
|
157
207
|
ez-multi-select-input --> ez-icon
|
|
158
208
|
ez-multi-select-input --> ez-tooltip
|
|
159
209
|
ez-multi-select-input --> ez-popover-core
|
|
@@ -167,6 +217,7 @@ graph TD;
|
|
|
167
217
|
ez-list --> ez-check
|
|
168
218
|
ez-filter-input --> ez-text-input
|
|
169
219
|
ez-filter-input --> ez-icon
|
|
220
|
+
ez-filter --> ez-form-view
|
|
170
221
|
ez-form --> ez-form-view
|
|
171
222
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
172
223
|
```
|
|
@@ -180,6 +231,8 @@ graph TD;
|
|
|
180
231
|
| Variable | Description |
|
|
181
232
|
|-|-|
|
|
182
233
|
| --ez-form-view\_\_item--min-width | Define o tamanho mínimo dos itens do formulário. |
|
|
234
|
+
| --ez-form-view\_\_long-item--min-width | Define o tamanho mínimo dos itens do formulário. |
|
|
183
235
|
| --ez-form-view\_\_item--max-width | Define o tamanho máximo dos itens do formulário. |
|
|
184
|
-
| --ez-form-view\_\
|
|
236
|
+
| --ez-form-view\_\_long-item--max-width | Define o tamanho máximo dos itens longos do formulário. |
|
|
237
|
+
| --ez-form-view\_\_item--gap | Define o colunas entre itens do formulário. |
|
|
185
238
|
| --ez-form-view\_\_item--padding | Define o padding do formulário. |
|
|
@@ -20,10 +20,11 @@
|
|
|
20
20
|
| `enableLockManagerLoadingComp` | `enable-lock-manager-loading-comp` | Define se o componente deve usar o LockManager para controle de carregamento da aplicação | `boolean` | `false` |
|
|
21
21
|
| `enableLockManagerTaskbarClick` | `enable-lock-manager-taskbar-click` | Ativa inserção de registros no modo grade pela Taskbar. | `boolean` | `true` |
|
|
22
22
|
| `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true` |
|
|
23
|
+
| `hidePagination` | `hide-pagination` | Esconder paginação. | `boolean` | `false` |
|
|
23
24
|
| `mode` | `mode` | Define o modo de uso da grade | `"complete" \| "simple"` | `"complete"` |
|
|
24
25
|
| `multipleSelection` | `multiple-selection` | Habilita a seleção de várias linhas. | `boolean` | `undefined` |
|
|
25
26
|
| `outlineMode` | `outline-mode` | Altera visualmente as sombras e bordas do componente Quando false, aplica o padrão de sombras ao componente (Utilizar quando for o elemento principal do layout) Quando true, aplica o padrão de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up) | `boolean` | `false` |
|
|
26
|
-
| `paginationCounterMode` | `pagination-counter-mode` | Define
|
|
27
|
+
| `paginationCounterMode` | `pagination-counter-mode` | Define a forma como a paginação irá se comportar. | `"auto" \| "hidden" \| "show"` | `'auto'` |
|
|
27
28
|
| `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` |
|
|
28
29
|
| `selectionToastConfig` | -- | Configuração da seleção de grade no toast. | `ISelectionToastConfig` | `undefined` |
|
|
29
30
|
| `serverUrl` | `server-url` | Endereço do servidor para obtenção dos dados. | `string` | `undefined` |
|
|
@@ -160,6 +161,16 @@ Type: `Promise<any[]>`
|
|
|
160
161
|
|
|
161
162
|
---
|
|
162
163
|
|
|
164
|
+
### `handlePageChange() => Promise<void>`
|
|
165
|
+
|
|
166
|
+
Manipula a mudança de página da grid.
|
|
167
|
+
|
|
168
|
+
#### Returns
|
|
169
|
+
|
|
170
|
+
Type: `Promise<void>`
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
163
174
|
### `locateColumn(columnName: string) => Promise<void>`
|
|
164
175
|
|
|
165
176
|
Localiza determinada coluna tornando-a visível.
|
|
@@ -269,25 +280,27 @@ Type: `Promise<void>`
|
|
|
269
280
|
|
|
270
281
|
### Depends on
|
|
271
282
|
|
|
283
|
+
- [filter-column](subcomponents)
|
|
272
284
|
- [ez-popover](../ez-popover)
|
|
273
|
-
- [ez-
|
|
285
|
+
- [ez-grid-pagination](../ez-grid-pagination)
|
|
274
286
|
- [ez-button](../ez-button)
|
|
275
|
-
- [
|
|
287
|
+
- [ez-icon](../ez-icon)
|
|
276
288
|
- [ez-search](../ez-search)
|
|
277
289
|
|
|
278
290
|
### Graph
|
|
279
291
|
```mermaid
|
|
280
292
|
graph TD;
|
|
293
|
+
ez-grid --> filter-column
|
|
281
294
|
ez-grid --> ez-popover
|
|
282
|
-
ez-grid --> ez-
|
|
295
|
+
ez-grid --> ez-grid-pagination
|
|
283
296
|
ez-grid --> ez-button
|
|
284
|
-
ez-grid -->
|
|
297
|
+
ez-grid --> ez-icon
|
|
285
298
|
ez-grid --> ez-search
|
|
286
|
-
ez-button --> ez-icon
|
|
287
299
|
filter-column --> ez-popover-plus
|
|
288
300
|
filter-column --> ez-button
|
|
289
301
|
filter-column --> ez-multi-selection-list
|
|
290
302
|
ez-popover-plus --> ez-popover-core
|
|
303
|
+
ez-button --> ez-icon
|
|
291
304
|
ez-multi-selection-list --> ez-check
|
|
292
305
|
ez-multi-selection-list --> ez-list
|
|
293
306
|
ez-multi-selection-list --> ez-icon
|
|
@@ -299,11 +312,16 @@ graph TD;
|
|
|
299
312
|
ez-filter-input --> ez-icon
|
|
300
313
|
ez-text-input --> ez-tooltip
|
|
301
314
|
ez-text-input --> ez-icon
|
|
315
|
+
ez-search --> ez-button
|
|
302
316
|
ez-search --> ez-text-input
|
|
303
317
|
ez-search --> ez-icon
|
|
304
318
|
ez-search --> ez-popover-plus
|
|
305
319
|
ez-search --> search-list
|
|
306
320
|
search-list --> ez-card-item
|
|
321
|
+
ez-grid-pagination --> ez-icon
|
|
322
|
+
ez-grid-pagination --> ez-button
|
|
323
|
+
ez-grid-pagination --> ez-popover
|
|
324
|
+
ez-grid-pagination --> ez-tooltip
|
|
307
325
|
ez-grid-view --> ez-grid
|
|
308
326
|
style ez-grid fill:#f9f,stroke:#333,stroke-width:4px
|
|
309
327
|
```
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
# ez-grid-pagination
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------- |
|
|
12
|
+
| `buttonsSize` | `buttons-size` | Define o modo de visualização atual da grid. | `"large" \| "medium" \| "small" \| "x-small"` | `'large'` |
|
|
13
|
+
| `dataUnit` | -- | DataUnit associada à grid. | `DataUnit` | `undefined` |
|
|
14
|
+
| `paginationCounterMode` | `pagination-counter-mode` | Define a visibilidade do contador de paginação. - `show`: Sempre exibe o contador (ex: "1-10 de 100") - `hidden`: Oculta o contador (exibe apenas os botões) - `auto`: Exibe/oculta baseado no espaço disponível (responsivo) | `"auto" \| "hidden" \| "show"` | `'auto'` |
|
|
15
|
+
| `paginationTextPosition` | `pagination-text-position` | Define o texto da paginação à esquerda ou à direita. | `"left" \| "right"` | `'left'` |
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## Events
|
|
19
|
+
|
|
20
|
+
| Event | Description | Type |
|
|
21
|
+
| ------------ | -------------------------------------------- | ----------------------------------- |
|
|
22
|
+
| `pageChange` | Evento disparado quando a página é alterada. | `CustomEvent<"next" \| "previous">` |
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Methods
|
|
26
|
+
|
|
27
|
+
### `firstPage() => Promise<void>`
|
|
28
|
+
|
|
29
|
+
Navega para a primeira página.
|
|
30
|
+
|
|
31
|
+
#### Returns
|
|
32
|
+
|
|
33
|
+
Type: `Promise<void>`
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
### `lastPage() => Promise<void>`
|
|
38
|
+
|
|
39
|
+
Navega para a primeira página.
|
|
40
|
+
|
|
41
|
+
#### Returns
|
|
42
|
+
|
|
43
|
+
Type: `Promise<void>`
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
### `nextPage() => Promise<void>`
|
|
48
|
+
|
|
49
|
+
Navega para a próxima página.
|
|
50
|
+
|
|
51
|
+
#### Returns
|
|
52
|
+
|
|
53
|
+
Type: `Promise<void>`
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
### `previousPage() => Promise<void>`
|
|
58
|
+
|
|
59
|
+
Navega para a página anterior.
|
|
60
|
+
|
|
61
|
+
#### Returns
|
|
62
|
+
|
|
63
|
+
Type: `Promise<void>`
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
## Dependencies
|
|
69
|
+
|
|
70
|
+
### Used by
|
|
71
|
+
|
|
72
|
+
- [ez-grid](../ez-grid)
|
|
73
|
+
|
|
74
|
+
### Depends on
|
|
75
|
+
|
|
76
|
+
- [ez-icon](../ez-icon)
|
|
77
|
+
- [ez-button](../ez-button)
|
|
78
|
+
- [ez-popover](../ez-popover)
|
|
79
|
+
- [ez-tooltip](../ez-tooltip)
|
|
80
|
+
|
|
81
|
+
### Graph
|
|
82
|
+
```mermaid
|
|
83
|
+
graph TD;
|
|
84
|
+
ez-grid-pagination --> ez-icon
|
|
85
|
+
ez-grid-pagination --> ez-button
|
|
86
|
+
ez-grid-pagination --> ez-popover
|
|
87
|
+
ez-grid-pagination --> ez-tooltip
|
|
88
|
+
ez-button --> ez-icon
|
|
89
|
+
ez-grid --> ez-grid-pagination
|
|
90
|
+
style ez-grid-pagination fill:#f9f,stroke:#333,stroke-width:4px
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
----------------------------------------------
|
|
94
|
+
|
|
95
|
+
|
|
@@ -149,16 +149,17 @@ Type: `Promise<void>`
|
|
|
149
149
|
```mermaid
|
|
150
150
|
graph TD;
|
|
151
151
|
ez-grid-view --> ez-grid
|
|
152
|
+
ez-grid --> filter-column
|
|
152
153
|
ez-grid --> ez-popover
|
|
153
|
-
ez-grid --> ez-
|
|
154
|
+
ez-grid --> ez-grid-pagination
|
|
154
155
|
ez-grid --> ez-button
|
|
155
|
-
ez-grid -->
|
|
156
|
+
ez-grid --> ez-icon
|
|
156
157
|
ez-grid --> ez-search
|
|
157
|
-
ez-button --> ez-icon
|
|
158
158
|
filter-column --> ez-popover-plus
|
|
159
159
|
filter-column --> ez-button
|
|
160
160
|
filter-column --> ez-multi-selection-list
|
|
161
161
|
ez-popover-plus --> ez-popover-core
|
|
162
|
+
ez-button --> ez-icon
|
|
162
163
|
ez-multi-selection-list --> ez-check
|
|
163
164
|
ez-multi-selection-list --> ez-list
|
|
164
165
|
ez-multi-selection-list --> ez-icon
|
|
@@ -170,11 +171,16 @@ graph TD;
|
|
|
170
171
|
ez-filter-input --> ez-icon
|
|
171
172
|
ez-text-input --> ez-tooltip
|
|
172
173
|
ez-text-input --> ez-icon
|
|
174
|
+
ez-search --> ez-button
|
|
173
175
|
ez-search --> ez-text-input
|
|
174
176
|
ez-search --> ez-icon
|
|
175
177
|
ez-search --> ez-popover-plus
|
|
176
178
|
ez-search --> search-list
|
|
177
179
|
search-list --> ez-card-item
|
|
180
|
+
ez-grid-pagination --> ez-icon
|
|
181
|
+
ez-grid-pagination --> ez-button
|
|
182
|
+
ez-grid-pagination --> ez-popover
|
|
183
|
+
ez-grid-pagination --> ez-tooltip
|
|
178
184
|
style ez-grid-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
179
185
|
```
|
|
180
186
|
|
|
@@ -131,6 +131,8 @@ graph TD;
|
|
|
131
131
|
ez-text-input --> ez-tooltip
|
|
132
132
|
ez-text-input --> ez-icon
|
|
133
133
|
ez-button --> ez-icon
|
|
134
|
+
ez-scroller --> ez-button
|
|
135
|
+
ez-scroller --> ez-icon
|
|
134
136
|
ez-tree --> ez-icon
|
|
135
137
|
style ez-guide-navigator fill:#f9f,stroke:#333,stroke-width:4px
|
|
136
138
|
```
|
|
@@ -35,11 +35,14 @@
|
|
|
35
35
|
- [ez-file-item](../ez-file-item)
|
|
36
36
|
- [ez-filter-input](../ez-filter-input)
|
|
37
37
|
- [ez-grid](../ez-grid)
|
|
38
|
+
- [ez-grid-pagination](../ez-grid-pagination)
|
|
39
|
+
- [ez-image-input](../ez-image-input)
|
|
38
40
|
- [ez-list-item](../ez-list-item)
|
|
39
41
|
- [ez-modal-container](../ez-modal-container)
|
|
40
42
|
- [ez-multi-select-input](../ez-multi-select-input)
|
|
41
43
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
42
44
|
- [ez-rich-toolbar-item](../ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item)
|
|
45
|
+
- [ez-scroller](../ez-scroller)
|
|
43
46
|
- [ez-search](../ez-search)
|
|
44
47
|
- [ez-search-plus](../ez-search-plus)
|
|
45
48
|
- [ez-sidebar-button](../ez-sidebar-button)
|
|
@@ -72,11 +75,14 @@ graph TD;
|
|
|
72
75
|
ez-file-item --> ez-icon
|
|
73
76
|
ez-filter-input --> ez-icon
|
|
74
77
|
ez-grid --> ez-icon
|
|
78
|
+
ez-grid-pagination --> ez-icon
|
|
79
|
+
ez-image-input --> ez-icon
|
|
75
80
|
ez-list-item --> ez-icon
|
|
76
81
|
ez-modal-container --> ez-icon
|
|
77
82
|
ez-multi-select-input --> ez-icon
|
|
78
83
|
ez-multi-selection-list --> ez-icon
|
|
79
84
|
ez-rich-toolbar-item --> ez-icon
|
|
85
|
+
ez-scroller --> ez-icon
|
|
80
86
|
ez-search --> ez-icon
|
|
81
87
|
ez-search-plus --> ez-icon
|
|
82
88
|
ez-sidebar-button --> ez-icon
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# ez-image-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------- | --------------- | ---------------------------------------------------------- | --------- | ------------------ |
|
|
12
|
+
| `accept` | `accept` | Tipos de arquivo aceitos | `string` | `'image/*'` |
|
|
13
|
+
| `enabled` | `enabled` | Define se o componente está habilitado | `boolean` | `true` |
|
|
14
|
+
| `label` | `label` | Label exibido na área de upload | `string` | `undefined` |
|
|
15
|
+
| `loading` | `loading` | Define se o componente está em estado de carregamento | `boolean` | `false` |
|
|
16
|
+
| `maxFileSize` | `max-file-size` | Define o tamanho máximo do arquivo em bytes (padrão: 20MB) | `number` | `20 * 1024 * 1024` |
|
|
17
|
+
| `name` | `name` | Nome do componente | `string` | `undefined` |
|
|
18
|
+
| `value` | `value` | Valor da imagem em base64 | `string` | `undefined` |
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Events
|
|
22
|
+
|
|
23
|
+
| Event | Description | Type |
|
|
24
|
+
| ---------- | ------------------------------------------------ | --------------------- |
|
|
25
|
+
| `ezChange` | Evento disparado quando uma imagem é selecionada | `CustomEvent<string>` |
|
|
26
|
+
| `ezError` | Evento disparado quando ocorre um erro | `CustomEvent<string>` |
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Dependencies
|
|
30
|
+
|
|
31
|
+
### Used by
|
|
32
|
+
|
|
33
|
+
- [ez-form-view](../ez-form-view)
|
|
34
|
+
|
|
35
|
+
### Depends on
|
|
36
|
+
|
|
37
|
+
- [ez-skeleton](../ez-skeleton)
|
|
38
|
+
- [ez-button](../ez-button)
|
|
39
|
+
- [ez-icon](../ez-icon)
|
|
40
|
+
- [ez-popup](../ez-popup)
|
|
41
|
+
|
|
42
|
+
### Graph
|
|
43
|
+
```mermaid
|
|
44
|
+
graph TD;
|
|
45
|
+
ez-image-input --> ez-skeleton
|
|
46
|
+
ez-image-input --> ez-button
|
|
47
|
+
ez-image-input --> ez-icon
|
|
48
|
+
ez-image-input --> ez-popup
|
|
49
|
+
ez-button --> ez-icon
|
|
50
|
+
ez-popup --> ez-button
|
|
51
|
+
ez-form-view --> ez-image-input
|
|
52
|
+
style ez-image-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
----------------------------------------------
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
## CSS Variables
|
|
61
|
+
| Variable | Description |
|
|
62
|
+
|-|-|
|
|
63
|
+
| --ez-image-input--container-height | Define a altura do container de imagem. |
|
|
64
|
+
| --ez-image-input--container-width | Define a largura do container de imagem. |
|
|
65
|
+
| --ez-image-input--background-color | Define a cor de fundo do container. |
|
|
66
|
+
| --ez-image-input--border-color | Define a cor da borda do container. |
|
|
67
|
+
| --ez-image-input--border-color-hover | Define a cor da borda no estado de hover. |
|
|
68
|
+
| --ez-image-input--border-color-dragging | Define a cor da borda quando está sendo arrastado. |
|
|
69
|
+
| --ez-image-input--border-color-disabled | Define a cor da borda quando está desabilitado. |
|
|
70
|
+
| --ez-image-input--label-color | Define a cor do texto do label. |
|
|
71
|
+
| --ez-image-input--icon-color | Define a cor do ícone. |
|
|
72
|
+
| --ez-image-input--border-radius | Define o raio da borda do container. |
|
|
73
|
+
| --ez-image-input--border-width | Define a largura da borda. |
|
|
74
|
+
| --ez-image-input--remove-button-bg | Define a cor de fundo do botão de remover. |
|
|
75
|
+
| --ez-image-input--remove-button-bg-hover | Define a cor de fundo do botão de remover no hover. |
|
|
76
|
+
| --ez-image-input--remove-button-color | Define a cor do ícone do botão de remover. |
|
|
77
|
+
| --ez-image-input--remove-button-border | Define a borda do botão de remover. |
|
|
@@ -38,4 +38,5 @@
|
|
|
38
38
|
|-|-|
|
|
39
39
|
| --ez-modal-z-index | Define a camada em que o componente será exibido. |
|
|
40
40
|
| --ez-modal-vertical-padding | Define o espaçamento vertical do conteúdo do modal. |
|
|
41
|
-
| --ez-modal-content-padding | Define o padding entre o conteúdo e o modal |
|
|
41
|
+
| --ez-modal-content-padding | Define o padding entre o conteúdo e o modal |
|
|
42
|
+
| --ez-modal-content-min-width | Define a largura mínima do conteúdo do modal |
|
|
@@ -100,10 +100,12 @@ graph TD;
|
|
|
100
100
|
ez-filter-input --> ez-icon
|
|
101
101
|
ez-text-input --> ez-tooltip
|
|
102
102
|
ez-text-input --> ez-icon
|
|
103
|
+
ez-search --> ez-button
|
|
103
104
|
ez-search --> ez-text-input
|
|
104
105
|
ez-search --> ez-icon
|
|
105
106
|
ez-search --> ez-popover-plus
|
|
106
107
|
ez-search --> search-list
|
|
108
|
+
ez-button --> ez-icon
|
|
107
109
|
ez-popover-plus --> ez-popover-core
|
|
108
110
|
search-list --> ez-card-item
|
|
109
111
|
ez-form-view --> ez-multi-select-input
|
|
@@ -77,10 +77,12 @@ graph TD;
|
|
|
77
77
|
ez-filter-input --> ez-icon
|
|
78
78
|
ez-text-input --> ez-tooltip
|
|
79
79
|
ez-text-input --> ez-icon
|
|
80
|
+
ez-search --> ez-button
|
|
80
81
|
ez-search --> ez-text-input
|
|
81
82
|
ez-search --> ez-icon
|
|
82
83
|
ez-search --> ez-popover-plus
|
|
83
84
|
ez-search --> search-list
|
|
85
|
+
ez-button --> ez-icon
|
|
84
86
|
ez-popover-plus --> ez-popover-core
|
|
85
87
|
search-list --> ez-card-item
|
|
86
88
|
ez-multi-select-input --> ez-multi-selection-list
|
|
@@ -45,6 +45,17 @@ Type: `Promise<void>`
|
|
|
45
45
|
|
|
46
46
|
---
|
|
47
47
|
|
|
48
|
+
### `showAbove(offsets?: { bottom?: string; left?: string; right?: string; }) => Promise<void>`
|
|
49
|
+
|
|
50
|
+
Exibe o ez-popover ancorado acima da posição de origem (usa `bottom` em vez de `top`).
|
|
51
|
+
Aceita opcionalmente `left` ou `right` para alinhamento horizontal.
|
|
52
|
+
|
|
53
|
+
#### Returns
|
|
54
|
+
|
|
55
|
+
Type: `Promise<void>`
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
48
59
|
### `showUnder(element: HTMLElement, options?: IEzPopoverAnchorOptions) => Promise<void>`
|
|
49
60
|
|
|
50
61
|
Ancora a exibição do popOver a um elemento HTML.
|
|
@@ -72,12 +83,14 @@ Type: `Promise<void>`
|
|
|
72
83
|
|
|
73
84
|
- [ez-form](../ez-form)
|
|
74
85
|
- [ez-grid](../ez-grid)
|
|
86
|
+
- [ez-grid-pagination](../ez-grid-pagination)
|
|
75
87
|
|
|
76
88
|
### Graph
|
|
77
89
|
```mermaid
|
|
78
90
|
graph TD;
|
|
79
91
|
ez-form --> ez-popover
|
|
80
92
|
ez-grid --> ez-popover
|
|
93
|
+
ez-grid-pagination --> ez-popover
|
|
81
94
|
style ez-popover fill:#f9f,stroke:#333,stroke-width:4px
|
|
82
95
|
```
|
|
83
96
|
|
|
@@ -94,6 +94,10 @@ Type: `Promise<void>`
|
|
|
94
94
|
|
|
95
95
|
### Used by
|
|
96
96
|
|
|
97
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
98
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
99
|
+
- [ez-classic-search](../ez-classic-search)
|
|
100
|
+
- [ez-classic-search-plus](../ez-classic-search-plus)
|
|
97
101
|
- [ez-combo-box](../ez-combo-box)
|
|
98
102
|
- [ez-date-input](../ez-date-input)
|
|
99
103
|
- [ez-date-time-input](../ez-date-time-input)
|
|
@@ -109,6 +113,10 @@ Type: `Promise<void>`
|
|
|
109
113
|
```mermaid
|
|
110
114
|
graph TD;
|
|
111
115
|
ez-popover-plus --> ez-popover-core
|
|
116
|
+
ez-classic-date-input --> ez-popover-plus
|
|
117
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
118
|
+
ez-classic-search --> ez-popover-plus
|
|
119
|
+
ez-classic-search-plus --> ez-popover-plus
|
|
112
120
|
ez-combo-box --> ez-popover-plus
|
|
113
121
|
ez-date-input --> ez-popover-plus
|
|
114
122
|
ez-date-time-input --> ez-popover-plus
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
### Used by
|
|
33
33
|
|
|
34
|
+
- [ez-image-input](../ez-image-input)
|
|
34
35
|
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
35
36
|
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
36
37
|
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
graph TD;
|
|
44
45
|
ez-popup --> ez-button
|
|
45
46
|
ez-button --> ez-icon
|
|
47
|
+
ez-image-input --> ez-popup
|
|
46
48
|
ez-link-builder --> ez-popup
|
|
47
49
|
ez-simple-image-uploader --> ez-popup
|
|
48
50
|
style ez-popup fill:#f9f,stroke:#333,stroke-width:4px
|