@sankhyalabs/ezui-docs 5.22.0-dev.12 → 5.22.0-dev.121
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-badge/readme.md +8 -7
- package/components/ez-breadcrumb/readme.md +1 -0
- package/components/ez-button/readme.md +3 -1
- package/components/ez-card-item/readme.md +5 -2
- package/components/ez-chart/readme.md +2 -2
- package/components/ez-check/readme.md +9 -8
- package/components/ez-collapsible-box/readme.md +2 -0
- package/components/ez-combo-box/ez-combo-box-list/readme.md +71 -0
- package/components/ez-combo-box/readme.md +29 -19
- package/components/ez-date-input/readme.md +16 -9
- package/components/ez-date-time-input/readme.md +17 -10
- package/components/ez-double-list/readme.md +70 -0
- package/components/ez-dropdown/readme.md +3 -0
- package/components/ez-filter-input/readme.md +6 -1
- package/components/ez-form/readme.md +18 -2
- package/components/ez-form-view/readme.md +25 -7
- package/components/ez-grid/readme.md +53 -17
- package/components/ez-grid/subcomponents/readme.md +8 -3
- package/components/ez-guide-navigator/readme.md +2 -0
- package/components/ez-icon/readme.md +4 -0
- package/components/ez-list/readme.md +21 -17
- package/components/ez-modal/readme.md +10 -10
- package/components/ez-multi-selection-list/readme.md +6 -1
- package/components/ez-number-input/readme.md +15 -10
- package/components/ez-popover/readme.md +2 -2
- package/components/ez-popover-plus/readme.md +122 -0
- package/components/ez-popover-plus/subcomponent/readme.md +107 -0
- package/components/ez-popup/readme.md +8 -7
- package/components/ez-scroller/readme.md +2 -0
- package/components/ez-search/readme.md +33 -22
- package/components/ez-search/subcomponent/search-list/readme.md +72 -0
- package/components/ez-search-plus/readme.md +130 -0
- package/components/ez-search-plus/subcomponent/ez-search-result-list/readme.md +90 -0
- package/components/ez-skeleton/readme.md +15 -0
- package/components/ez-split-button/readme.md +2 -1
- package/components/ez-split-panel/readme.md +12 -4
- package/components/ez-split-panel/structure/item/readme.md +6 -5
- package/components/ez-text-area/readme.md +13 -10
- package/components/ez-text-edit/readme.md +2 -0
- package/components/ez-text-input/readme.md +25 -12
- package/components/ez-time-input/readme.md +13 -9
- package/components/ez-tooltip/readme.md +38 -0
- package/components/ez-tree/readme.md +5 -4
- package/package.json +1 -1
|
@@ -7,10 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute
|
|
11
|
-
| ---------------- |
|
|
12
|
-
| `fields` | --
|
|
13
|
-
| `selectedRecord` | --
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------- | --------------- | ------------------------------------------------------------------------- | ------------------ | ----------- |
|
|
12
|
+
| `fields` | -- | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
|
|
13
|
+
| `selectedRecord` | -- | Define os registros da linha selecionada. | `Record` | `undefined` |
|
|
14
|
+
| `singleColumn` | `single-column` | Define se o formulario deve possuir apenas 1 coluna. | `boolean` | `true` |
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
## Events
|
|
@@ -71,9 +72,10 @@ Type: `Promise<void>`
|
|
|
71
72
|
- [ez-date-time-input](../ez-date-time-input)
|
|
72
73
|
- [ez-upload](../ez-upload)
|
|
73
74
|
- [ez-number-input](../ez-number-input)
|
|
74
|
-
- [ez-search](../ez-search)
|
|
75
75
|
- [ez-text-area](../ez-text-area)
|
|
76
76
|
- [ez-text-input](../ez-text-input)
|
|
77
|
+
- [ez-search-plus](../ez-search-plus)
|
|
78
|
+
- [ez-search](../ez-search)
|
|
77
79
|
|
|
78
80
|
### Graph
|
|
79
81
|
```mermaid
|
|
@@ -87,26 +89,42 @@ graph TD;
|
|
|
87
89
|
ez-form-view --> ez-date-time-input
|
|
88
90
|
ez-form-view --> ez-upload
|
|
89
91
|
ez-form-view --> ez-number-input
|
|
90
|
-
ez-form-view --> ez-search
|
|
91
92
|
ez-form-view --> ez-text-area
|
|
92
93
|
ez-form-view --> ez-text-input
|
|
94
|
+
ez-form-view --> ez-search-plus
|
|
95
|
+
ez-form-view --> ez-search
|
|
93
96
|
ez-collapsible-box --> ez-icon
|
|
94
97
|
ez-collapsible-box --> ez-text-edit
|
|
95
98
|
ez-text-edit --> ez-text-input
|
|
96
99
|
ez-text-edit --> ez-button
|
|
100
|
+
ez-text-input --> ez-tooltip
|
|
101
|
+
ez-text-input --> ez-icon
|
|
97
102
|
ez-button --> ez-icon
|
|
98
103
|
ez-combo-box --> ez-text-input
|
|
99
104
|
ez-combo-box --> ez-icon
|
|
105
|
+
ez-combo-box --> ez-popover-plus
|
|
106
|
+
ez-combo-box --> ez-combo-box-list
|
|
107
|
+
ez-popover-plus --> ez-popover-core
|
|
100
108
|
ez-date-input --> ez-text-input
|
|
109
|
+
ez-date-input --> ez-popover-plus
|
|
101
110
|
ez-date-input --> ez-calendar
|
|
102
111
|
ez-time-input --> ez-text-input
|
|
103
112
|
ez-time-input --> ez-icon
|
|
104
113
|
ez-date-time-input --> ez-text-input
|
|
114
|
+
ez-date-time-input --> ez-popover-plus
|
|
105
115
|
ez-date-time-input --> ez-calendar
|
|
106
116
|
ez-number-input --> ez-text-input
|
|
107
|
-
ez-search --> ez-
|
|
117
|
+
ez-search-plus --> ez-icon
|
|
118
|
+
ez-search-plus --> ez-text-input
|
|
119
|
+
ez-search-plus --> ez-popover-plus
|
|
120
|
+
ez-search-plus --> ez-search-result-list
|
|
121
|
+
ez-search-result-list --> ez-card-item
|
|
122
|
+
ez-search-result-list --> ez-skeleton
|
|
108
123
|
ez-search --> ez-text-input
|
|
109
124
|
ez-search --> ez-icon
|
|
125
|
+
ez-search --> ez-popover-plus
|
|
126
|
+
ez-search --> search-list
|
|
127
|
+
search-list --> ez-card-item
|
|
110
128
|
ez-form --> ez-form-view
|
|
111
129
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
112
130
|
```
|
|
@@ -7,19 +7,28 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `autoFocus`
|
|
13
|
-
| `canEdit`
|
|
14
|
-
| `columnfilterDataSource`
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ----------- |
|
|
12
|
+
| `autoFocus` | `auto-focus` | Define se a grid será focada ao ser carregada. | `boolean` | `true` |
|
|
13
|
+
| `canEdit` | `can-edit` | Define se a edição está habilitada na grid. | `boolean` | `true` |
|
|
14
|
+
| `columnfilterDataSource` | -- | Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas. | `IMultiSelectionListDataSource` | `undefined` |
|
|
15
|
+
| `compact` | `compact` | Define se a grade deve ser exibida em modo compacto | `boolean` | `false` |
|
|
16
|
+
| `config` | -- | Configuração de exibição da grade. | `IGridConfig` | `undefined` |
|
|
17
|
+
| `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined` |
|
|
18
|
+
| `enableContinuousInsert` | `enable-continuous-insert` | Ativa/desativa a inserção continua na grade Só funciona quando a prop enableGridInsert está ativa | `boolean` | `true` |
|
|
19
|
+
| `enableGridInsert` | `enable-grid-insert` | Ativa inserção de registros no modo grade. | `boolean` | `false` |
|
|
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
|
+
| `enableLockManagerTaskbarClick` | `enable-lock-manager-taskbar-click` | Ativa inserção de registros no modo grade pela Taskbar. | `boolean` | `true` |
|
|
22
|
+
| `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true` |
|
|
23
|
+
| `multipleSelection` | `multiple-selection` | Habilita a seleção de várias linhas. | `boolean` | `undefined` |
|
|
24
|
+
| `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` |
|
|
25
|
+
| `paginationCounterMode` | `pagination-counter-mode` | Define se a grid será focada ao ser carregada. | `"auto" \| "hidden" \| "show"` | `'show'` |
|
|
26
|
+
| `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` |
|
|
27
|
+
| `selectionToastConfig` | -- | Configuração da seleção de grade no toast. | `ISelectionToastConfig` | `undefined` |
|
|
28
|
+
| `serverUrl` | `server-url` | Endereço do servidor para obtenção dos dados. | `string` | `undefined` |
|
|
29
|
+
| `statusResolver` | -- | Define um `IStatusResolver` responsável pelo estado da coluna de status. | `((data: object) => string) \| IStatusResolver` | `undefined` |
|
|
30
|
+
| `suppressCheckboxColumn` | `suppress-checkbox-column` | Informa se a coluna de chechbox deve ser suprimida | `boolean` | `false` |
|
|
31
|
+
| `useEnterLikeTab` | `use-enter-like-tab` | Quando verdadeiro, o ENTER fará a navegação como se fosse a tecla TAB na grade. | `boolean` | `false` |
|
|
23
32
|
|
|
24
33
|
|
|
25
34
|
## Events
|
|
@@ -75,6 +84,16 @@ Type: `Promise<void>`
|
|
|
75
84
|
|
|
76
85
|
|
|
77
86
|
|
|
87
|
+
### `checkStopEditOutsideClick(event: MouseEvent) => Promise<void>`
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
#### Returns
|
|
92
|
+
|
|
93
|
+
Type: `Promise<void>`
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
78
97
|
### `filterColumns(search: string) => Promise<Array<EzGridColumn>>`
|
|
79
98
|
|
|
80
99
|
Usa um argumento para filtrar as colunas po label
|
|
@@ -205,25 +224,38 @@ Type: `Promise<void>`
|
|
|
205
224
|
|
|
206
225
|
|
|
207
226
|
|
|
227
|
+
### `stopEdit() => Promise<void>`
|
|
228
|
+
|
|
229
|
+
Para a edição da grade.
|
|
230
|
+
|
|
231
|
+
#### Returns
|
|
232
|
+
|
|
233
|
+
Type: `Promise<void>`
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
208
237
|
|
|
209
238
|
## Dependencies
|
|
210
239
|
|
|
211
240
|
### Depends on
|
|
212
241
|
|
|
242
|
+
- [ez-popover](../ez-popover)
|
|
243
|
+
- [ez-icon](../ez-icon)
|
|
213
244
|
- [ez-button](../ez-button)
|
|
214
245
|
- [filter-column](subcomponents)
|
|
215
|
-
- [ez-icon](../ez-icon)
|
|
216
246
|
|
|
217
247
|
### Graph
|
|
218
248
|
```mermaid
|
|
219
249
|
graph TD;
|
|
250
|
+
ez-grid --> ez-popover
|
|
251
|
+
ez-grid --> ez-icon
|
|
220
252
|
ez-grid --> ez-button
|
|
221
253
|
ez-grid --> filter-column
|
|
222
|
-
ez-grid --> ez-icon
|
|
223
254
|
ez-button --> ez-icon
|
|
224
|
-
filter-column --> ez-popover
|
|
255
|
+
filter-column --> ez-popover-plus
|
|
225
256
|
filter-column --> ez-button
|
|
226
257
|
filter-column --> ez-multi-selection-list
|
|
258
|
+
ez-popover-plus --> ez-popover-core
|
|
227
259
|
ez-multi-selection-list --> ez-check
|
|
228
260
|
ez-multi-selection-list --> ez-list
|
|
229
261
|
ez-multi-selection-list --> ez-icon
|
|
@@ -233,9 +265,13 @@ graph TD;
|
|
|
233
265
|
ez-list --> ez-check
|
|
234
266
|
ez-filter-input --> ez-text-input
|
|
235
267
|
ez-filter-input --> ez-icon
|
|
236
|
-
ez-
|
|
268
|
+
ez-text-input --> ez-tooltip
|
|
269
|
+
ez-text-input --> ez-icon
|
|
237
270
|
ez-search --> ez-text-input
|
|
238
271
|
ez-search --> ez-icon
|
|
272
|
+
ez-search --> ez-popover-plus
|
|
273
|
+
ez-search --> search-list
|
|
274
|
+
search-list --> ez-card-item
|
|
239
275
|
style ez-grid fill:#f9f,stroke:#333,stroke-width:4px
|
|
240
276
|
```
|
|
241
277
|
|
|
@@ -57,16 +57,17 @@ Type: `Promise<void>`
|
|
|
57
57
|
|
|
58
58
|
### Depends on
|
|
59
59
|
|
|
60
|
-
- [ez-popover](../../ez-popover)
|
|
60
|
+
- [ez-popover-plus](../../ez-popover-plus)
|
|
61
61
|
- [ez-button](../../ez-button)
|
|
62
62
|
- [ez-multi-selection-list](../../ez-multi-selection-list)
|
|
63
63
|
|
|
64
64
|
### Graph
|
|
65
65
|
```mermaid
|
|
66
66
|
graph TD;
|
|
67
|
-
filter-column --> ez-popover
|
|
67
|
+
filter-column --> ez-popover-plus
|
|
68
68
|
filter-column --> ez-button
|
|
69
69
|
filter-column --> ez-multi-selection-list
|
|
70
|
+
ez-popover-plus --> ez-popover-core
|
|
70
71
|
ez-button --> ez-icon
|
|
71
72
|
ez-multi-selection-list --> ez-check
|
|
72
73
|
ez-multi-selection-list --> ez-list
|
|
@@ -77,9 +78,13 @@ graph TD;
|
|
|
77
78
|
ez-list --> ez-check
|
|
78
79
|
ez-filter-input --> ez-text-input
|
|
79
80
|
ez-filter-input --> ez-icon
|
|
80
|
-
ez-
|
|
81
|
+
ez-text-input --> ez-tooltip
|
|
82
|
+
ez-text-input --> ez-icon
|
|
81
83
|
ez-search --> ez-text-input
|
|
82
84
|
ez-search --> ez-icon
|
|
85
|
+
ez-search --> ez-popover-plus
|
|
86
|
+
ez-search --> search-list
|
|
87
|
+
search-list --> ez-card-item
|
|
83
88
|
ez-grid --> filter-column
|
|
84
89
|
style filter-column fill:#f9f,stroke:#333,stroke-width:4px
|
|
85
90
|
```
|
|
@@ -126,6 +126,8 @@ graph TD;
|
|
|
126
126
|
ez-sidebar-button --> ez-icon
|
|
127
127
|
ez-filter-input --> ez-text-input
|
|
128
128
|
ez-filter-input --> ez-icon
|
|
129
|
+
ez-text-input --> ez-tooltip
|
|
130
|
+
ez-text-input --> ez-icon
|
|
129
131
|
ez-button --> ez-icon
|
|
130
132
|
ez-tree --> ez-icon
|
|
131
133
|
style ez-guide-navigator fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -34,9 +34,11 @@
|
|
|
34
34
|
- [ez-modal-container](../ez-modal-container)
|
|
35
35
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
36
36
|
- [ez-search](../ez-search)
|
|
37
|
+
- [ez-search-plus](../ez-search-plus)
|
|
37
38
|
- [ez-sidebar-button](../ez-sidebar-button)
|
|
38
39
|
- [ez-split-button](../ez-split-button)
|
|
39
40
|
- [ez-tabselector](../ez-tabselector)
|
|
41
|
+
- [ez-text-input](../ez-text-input)
|
|
40
42
|
- [ez-time-input](../ez-time-input)
|
|
41
43
|
- [ez-tree](../ez-tree)
|
|
42
44
|
|
|
@@ -59,9 +61,11 @@ graph TD;
|
|
|
59
61
|
ez-modal-container --> ez-icon
|
|
60
62
|
ez-multi-selection-list --> ez-icon
|
|
61
63
|
ez-search --> ez-icon
|
|
64
|
+
ez-search-plus --> ez-icon
|
|
62
65
|
ez-sidebar-button --> ez-icon
|
|
63
66
|
ez-split-button --> ez-icon
|
|
64
67
|
ez-tabselector --> ez-icon
|
|
68
|
+
ez-text-input --> ez-icon
|
|
65
69
|
ez-time-input --> ez-icon
|
|
66
70
|
ez-tree --> ez-icon
|
|
67
71
|
style ez-icon fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -7,26 +7,28 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `dataSource`
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `dataSource` | -- | Define a lista inicial do componente. | `(ListItem \| ListGroup)[]` | `[]` |
|
|
13
|
+
| `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos items. | `boolean` | `false` |
|
|
14
|
+
| `ezDraggable` | `ez-draggable` | Se true habilita `drag and drop` para os itens. | `boolean` | `false` |
|
|
15
|
+
| `ezSelectable` | `ez-selectable` | Se true os itens serão selecionáveis. | `boolean` | `false` |
|
|
16
|
+
| `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar houver nos itens da lista. | `boolean` | `false` |
|
|
17
|
+
| `itemLeftSlotBuilder` | -- | Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
18
|
+
| `itemSlotBuilder` | -- | Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
19
|
+
| `listMode` | `list-mode` | Define o modo de apresentação da lista. | `"check" \| "regular"` | `'regular'` |
|
|
20
|
+
| `useGroups` | `use-groups` | Se true os grupos serão exibidos. | `boolean` | `false` |
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
## Events
|
|
23
24
|
|
|
24
|
-
| Event
|
|
25
|
-
|
|
|
26
|
-
| `ezChange`
|
|
27
|
-
| `ezCheckChange`
|
|
28
|
-
| `ezDoubleClick`
|
|
29
|
-
| `ezSelectItem`
|
|
25
|
+
| Event | Description | Type |
|
|
26
|
+
| ----------------------- | -------------------------------------------------------------- | ---------------------------------------- |
|
|
27
|
+
| `ezChange` | Emitido quando acontece a alteração de estado da lista. | `CustomEvent<(ListItem \| ListGroup)[]>` |
|
|
28
|
+
| `ezCheckChange` | Emitido quando acontece a alteração de um item do checkbox. | `CustomEvent<ListItem>` |
|
|
29
|
+
| `ezDoubleClick` | Emitido quando ocorre um duplo clique em um item da lista. | `CustomEvent<ListItem>` |
|
|
30
|
+
| `ezSelectItem` | Emitido sempre que um item da lista for selecionado. | `CustomEvent<ListItem>` |
|
|
31
|
+
| `ezSelectMultipleItems` | Emitido sempre que um ou vários item da lista for selecionado. | `CustomEvent<ListItem[]>` |
|
|
30
32
|
|
|
31
33
|
|
|
32
34
|
## Methods
|
|
@@ -81,7 +83,7 @@ Type: `Promise<void>`
|
|
|
81
83
|
|
|
82
84
|
|
|
83
85
|
|
|
84
|
-
### `setSelection(selectedItem: ListItem, scrollToOption?: boolean) => Promise<void>`
|
|
86
|
+
### `setSelection(selectedItem: ListItem, scrollToOption?: boolean, shitkey?: boolean, ctrlKey?: boolean) => Promise<void>`
|
|
85
87
|
|
|
86
88
|
Aplica seleção nas linhas da lista.
|
|
87
89
|
|
|
@@ -97,6 +99,7 @@ Type: `Promise<void>`
|
|
|
97
99
|
### Used by
|
|
98
100
|
|
|
99
101
|
- [ez-alert-list](../ez-alert-list)
|
|
102
|
+
- [ez-double-list](../ez-double-list)
|
|
100
103
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
101
104
|
|
|
102
105
|
### Depends on
|
|
@@ -108,6 +111,7 @@ Type: `Promise<void>`
|
|
|
108
111
|
graph TD;
|
|
109
112
|
ez-list --> ez-check
|
|
110
113
|
ez-alert-list --> ez-list
|
|
114
|
+
ez-double-list --> ez-list
|
|
111
115
|
ez-multi-selection-list --> ez-list
|
|
112
116
|
style ez-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
113
117
|
```
|
|
@@ -7,16 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type
|
|
11
|
-
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
|
|
12
|
-
| `align` | `align` | Define o alinhamento do ez-modal. | `"left" \| "right"`
|
|
13
|
-
| `closeEsc` | `close-esc` | Define se o ez-modal será fechado ao clicar `ESC`. | `boolean`
|
|
14
|
-
| `closeOutsideClick` | `close-outside-click` | Define se o modal será fechado ao clicar fora do conteúdo. | `boolean`
|
|
15
|
-
| `closeOutsideLeave` | `close-outside-leave` | Define se o modal será fechado se o mouse sair para fora do conteúdo. | `boolean`
|
|
16
|
-
| `heightMode` | `height-mode` | Ativa o modo Full, permitindo que o Modal expanda-se verticalmente e ocupe todo o espaço disponível. | `"full" \| "regular"`
|
|
17
|
-
| `modalSize` | `modal-size` | Define o tamanho do ez-modal. Devem ser definidas seguindo grid-layout. Exemplo: `col-sd-3`. | `string`
|
|
18
|
-
| `opened` | `opened` | Define se o ez-modal está aberto. | `boolean`
|
|
19
|
-
| `scrim` | `scrim` | Define o tipo de scrim a ser aplicado no overlay do modal | `"light" \| "medium"` | `"medium"` |
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
|
|
12
|
+
| `align` | `align` | Define o alinhamento do ez-modal. | `"left" \| "right"` | `undefined` |
|
|
13
|
+
| `closeEsc` | `close-esc` | Define se o ez-modal será fechado ao clicar `ESC`. | `boolean` | `false` |
|
|
14
|
+
| `closeOutsideClick` | `close-outside-click` | Define se o modal será fechado ao clicar fora do conteúdo. | `boolean` | `false` |
|
|
15
|
+
| `closeOutsideLeave` | `close-outside-leave` | Define se o modal será fechado se o mouse sair para fora do conteúdo. | `boolean` | `false` |
|
|
16
|
+
| `heightMode` | `height-mode` | Ativa o modo Full, permitindo que o Modal expanda-se verticalmente e ocupe todo o espaço disponível. | `"full" \| "regular"` | `"regular"` |
|
|
17
|
+
| `modalSize` | `modal-size` | Define o tamanho do ez-modal. Devem ser definidas seguindo grid-layout. Exemplo: `col-sd-3`. | `string` | `undefined` |
|
|
18
|
+
| `opened` | `opened` | Define se o ez-modal está aberto. | `boolean` | `true` |
|
|
19
|
+
| `scrim` | `scrim` | Define o tipo de scrim a ser aplicado no overlay do modal | `"light" \| "medium" \| "none"` | `"medium"` |
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
## Events
|
|
@@ -63,9 +63,14 @@ graph TD;
|
|
|
63
63
|
ez-list --> ez-check
|
|
64
64
|
ez-filter-input --> ez-text-input
|
|
65
65
|
ez-filter-input --> ez-icon
|
|
66
|
-
ez-
|
|
66
|
+
ez-text-input --> ez-tooltip
|
|
67
|
+
ez-text-input --> ez-icon
|
|
67
68
|
ez-search --> ez-text-input
|
|
68
69
|
ez-search --> ez-icon
|
|
70
|
+
ez-search --> ez-popover-plus
|
|
71
|
+
ez-search --> search-list
|
|
72
|
+
ez-popover-plus --> ez-popover-core
|
|
73
|
+
search-list --> ez-card-item
|
|
69
74
|
filter-column --> ez-multi-selection-list
|
|
70
75
|
style ez-multi-selection-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
71
76
|
```
|
|
@@ -7,16 +7,19 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
|
+
| `allowNegative` | `allow-negative` | Se false, o input não aceitará números negativos. | `boolean` | `true` |
|
|
13
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined` |
|
|
14
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
15
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
16
|
+
| `enabled` | `enabled` | Se false, o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
17
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
18
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
19
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
20
|
+
| `precision` | `precision` | Define quantas casas decimais serão exibidas. Caso haja mais casas haverá arredondamento. | `number` | `undefined` |
|
|
21
|
+
| `prettyPrecision` | `pretty-precision` | Define qual é o mínimo de casas depois da vírgula. Exemplo: 1,1 será exibido como 1,1000 quando `prettyPrecision = 4`. | `number` | `undefined` |
|
|
22
|
+
| `value` | `value` | Define o valor do campo. | `number` | `undefined` |
|
|
20
23
|
|
|
21
24
|
|
|
22
25
|
## Events
|
|
@@ -85,6 +88,8 @@ Type: `Promise<void>`
|
|
|
85
88
|
```mermaid
|
|
86
89
|
graph TD;
|
|
87
90
|
ez-number-input --> ez-text-input
|
|
91
|
+
ez-text-input --> ez-tooltip
|
|
92
|
+
ez-text-input --> ez-icon
|
|
88
93
|
ez-form-view --> ez-number-input
|
|
89
94
|
style ez-number-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
90
95
|
```
|
|
@@ -70,12 +70,12 @@ Type: `Promise<void>`
|
|
|
70
70
|
|
|
71
71
|
### Used by
|
|
72
72
|
|
|
73
|
-
- [
|
|
73
|
+
- [ez-grid](../ez-grid)
|
|
74
74
|
|
|
75
75
|
### Graph
|
|
76
76
|
```mermaid
|
|
77
77
|
graph TD;
|
|
78
|
-
|
|
78
|
+
ez-grid --> ez-popover
|
|
79
79
|
style ez-popover fill:#f9f,stroke:#333,stroke-width:4px
|
|
80
80
|
```
|
|
81
81
|
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# ez-popover-plus
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| --------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | -------------------------------------------------------- |
|
|
12
|
+
| `anchorElement` | `anchor-element` | Define o elemento de ancoragem. | `(string \| HTMLElement)[] \| HTMLElement \| string` | `undefined` |
|
|
13
|
+
| `autoClose` | `auto-close` | Define que será fechado automaticamente quando o usuário clicar fora do conteúdo. | `boolean` | `true` |
|
|
14
|
+
| `boxWidth` | `box-width` | Ajusta o comportamento da largura do popover. | `"fit-content" \| "full-width"` | `"fit-content"` |
|
|
15
|
+
| `minWidth` | `min-width` | Define a largura mínima do elemento (apenas será considerada caso a propriedade useAnchorSize seja verdadeira). | `number` | `150` |
|
|
16
|
+
| `opened` | `opened` | Define se o ez-popover está aberto. | `boolean` | `false` |
|
|
17
|
+
| `options` | -- | Define as opções do elemento. | `IEzPopoverAnchorOptions` | `{ horizontalGap: 0, verticalGap: 0, fromRight: false }` |
|
|
18
|
+
| `overlayType` | `overlay-type` | Define o tipo de overlay do popover. | `"light" \| "medium" \| "none"` | `"light"` |
|
|
19
|
+
| `useAnchorSize` | `use-anchor-size` | Define se o elemento manterá o mesmo tamanho do componente de ancora. | `boolean` | `false` |
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Events
|
|
23
|
+
|
|
24
|
+
| Event | Description | Type |
|
|
25
|
+
| -------------------- | ------------------------------------------------------------ | ---------------------- |
|
|
26
|
+
| `ezVisibilityChange` | Emitido quando acontece a alteração de estado do componente. | `CustomEvent<boolean>` |
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Methods
|
|
30
|
+
|
|
31
|
+
### `hide() => Promise<void>`
|
|
32
|
+
|
|
33
|
+
Oculta o ez-popover.
|
|
34
|
+
|
|
35
|
+
#### Returns
|
|
36
|
+
|
|
37
|
+
Type: `Promise<void>`
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### `setAnchorElement(anchor: HTMLElement | string) => Promise<void>`
|
|
42
|
+
|
|
43
|
+
Altera o elemento de ancoragem.
|
|
44
|
+
|
|
45
|
+
#### Returns
|
|
46
|
+
|
|
47
|
+
Type: `Promise<void>`
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
### `setOptions(options: IEzPopoverAnchorOptions) => Promise<void>`
|
|
52
|
+
|
|
53
|
+
Altera as opções.
|
|
54
|
+
|
|
55
|
+
#### Returns
|
|
56
|
+
|
|
57
|
+
Type: `Promise<void>`
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
### `show(top?: string | number, left?: string | number) => Promise<void>`
|
|
62
|
+
|
|
63
|
+
Exibe o ez-popover.
|
|
64
|
+
|
|
65
|
+
#### Returns
|
|
66
|
+
|
|
67
|
+
Type: `Promise<void>`
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
### `showUnder(element: HTMLElement | string, options?: IEzPopoverAnchorOptions) => Promise<void>`
|
|
72
|
+
|
|
73
|
+
Ancora a exibição do popOver a um elemento HTML.
|
|
74
|
+
|
|
75
|
+
#### Returns
|
|
76
|
+
|
|
77
|
+
Type: `Promise<void>`
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
### `updatePosition(top?: string, left?: string) => Promise<void>`
|
|
82
|
+
|
|
83
|
+
Atualiza a posição do popover.
|
|
84
|
+
|
|
85
|
+
#### Returns
|
|
86
|
+
|
|
87
|
+
Type: `Promise<void>`
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## Dependencies
|
|
93
|
+
|
|
94
|
+
### Used by
|
|
95
|
+
|
|
96
|
+
- [ez-combo-box](../ez-combo-box)
|
|
97
|
+
- [ez-date-input](../ez-date-input)
|
|
98
|
+
- [ez-date-time-input](../ez-date-time-input)
|
|
99
|
+
- [ez-search](../ez-search)
|
|
100
|
+
- [ez-search-plus](../ez-search-plus)
|
|
101
|
+
- [filter-column](../ez-grid/subcomponents)
|
|
102
|
+
|
|
103
|
+
### Depends on
|
|
104
|
+
|
|
105
|
+
- [ez-popover-core](subcomponent)
|
|
106
|
+
|
|
107
|
+
### Graph
|
|
108
|
+
```mermaid
|
|
109
|
+
graph TD;
|
|
110
|
+
ez-popover-plus --> ez-popover-core
|
|
111
|
+
ez-combo-box --> ez-popover-plus
|
|
112
|
+
ez-date-input --> ez-popover-plus
|
|
113
|
+
ez-date-time-input --> ez-popover-plus
|
|
114
|
+
ez-search --> ez-popover-plus
|
|
115
|
+
ez-search-plus --> ez-popover-plus
|
|
116
|
+
filter-column --> ez-popover-plus
|
|
117
|
+
style ez-popover-plus fill:#f9f,stroke:#333,stroke-width:4px
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
----------------------------------------------
|
|
121
|
+
|
|
122
|
+
|