@sankhyalabs/ezui-docs 7.2.0-rc.9 → 7.2.1-rc.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 +2 -0
- package/components/ez-form/readme.md +14 -0
- package/components/ez-form-view/readme.md +15 -0
- package/components/ez-grid/readme.md +2 -1
- package/components/ez-grid-pagination/readme.md +5 -2
- package/components/ez-grid-view/readme.md +2 -1
- package/components/ez-icon/readme.md +2 -0
- package/components/ez-multi-select-input/readme.md +148 -0
- package/components/ez-multi-selection-list/readme.md +20 -7
- package/components/ez-popover/readme.md +11 -0
- package/components/ez-popover-plus/readme.md +11 -10
- package/components/ez-popover-plus/subcomponent/readme.md +13 -10
- package/components/ez-tabselector/readme.md +5 -3
- package/components/ez-tooltip/readme.md +2 -0
- package/package.json +1 -1
|
@@ -56,6 +56,7 @@ Type: `Promise<void>`
|
|
|
56
56
|
- [ez-dialog](../ez-dialog)
|
|
57
57
|
- [ez-double-list](../ez-double-list)
|
|
58
58
|
- [ez-grid](../ez-grid)
|
|
59
|
+
- [ez-grid-pagination](../ez-grid-pagination)
|
|
59
60
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
60
61
|
- [ez-image-input](../ez-image-input)
|
|
61
62
|
- [ez-modal-container](../ez-modal-container)
|
|
@@ -84,6 +85,7 @@ graph TD;
|
|
|
84
85
|
ez-dialog --> ez-button
|
|
85
86
|
ez-double-list --> ez-button
|
|
86
87
|
ez-grid --> ez-button
|
|
88
|
+
ez-grid-pagination --> ez-button
|
|
87
89
|
ez-guide-navigator --> ez-button
|
|
88
90
|
ez-image-input --> ez-button
|
|
89
91
|
ez-modal-container --> ez-button
|
|
@@ -103,6 +103,7 @@ graph TD;
|
|
|
103
103
|
ez-form-view --> ez-search
|
|
104
104
|
ez-form-view --> ez-rich-text
|
|
105
105
|
ez-form-view --> ez-image-input
|
|
106
|
+
ez-form-view --> ez-multi-select-input
|
|
106
107
|
ez-collapsible-box --> ez-icon
|
|
107
108
|
ez-collapsible-box --> ez-text-edit
|
|
108
109
|
ez-text-edit --> ez-text-input
|
|
@@ -187,6 +188,19 @@ graph TD;
|
|
|
187
188
|
ez-image-input --> ez-button
|
|
188
189
|
ez-image-input --> ez-icon
|
|
189
190
|
ez-image-input --> ez-popup
|
|
191
|
+
ez-multi-select-input --> ez-icon
|
|
192
|
+
ez-multi-select-input --> ez-tooltip
|
|
193
|
+
ez-multi-select-input --> ez-popover-core
|
|
194
|
+
ez-multi-select-input --> ez-multi-selection-list
|
|
195
|
+
ez-multi-selection-list --> ez-check
|
|
196
|
+
ez-multi-selection-list --> ez-list
|
|
197
|
+
ez-multi-selection-list --> ez-icon
|
|
198
|
+
ez-multi-selection-list --> multi-selection-box-message
|
|
199
|
+
ez-multi-selection-list --> ez-filter-input
|
|
200
|
+
ez-multi-selection-list --> ez-search
|
|
201
|
+
ez-list --> ez-check
|
|
202
|
+
ez-filter-input --> ez-text-input
|
|
203
|
+
ez-filter-input --> ez-icon
|
|
190
204
|
style ez-form fill:#f9f,stroke:#333,stroke-width:4px
|
|
191
205
|
```
|
|
192
206
|
|
|
@@ -89,6 +89,7 @@ Type: `Promise<void>`
|
|
|
89
89
|
- [ez-search](../ez-search)
|
|
90
90
|
- [ez-rich-text](../ez-rich-text)
|
|
91
91
|
- [ez-image-input](../ez-image-input)
|
|
92
|
+
- [ez-multi-select-input](../ez-multi-select-input)
|
|
92
93
|
|
|
93
94
|
### Graph
|
|
94
95
|
```mermaid
|
|
@@ -117,6 +118,7 @@ graph TD;
|
|
|
117
118
|
ez-form-view --> ez-search
|
|
118
119
|
ez-form-view --> ez-rich-text
|
|
119
120
|
ez-form-view --> ez-image-input
|
|
121
|
+
ez-form-view --> ez-multi-select-input
|
|
120
122
|
ez-collapsible-box --> ez-icon
|
|
121
123
|
ez-collapsible-box --> ez-text-edit
|
|
122
124
|
ez-text-edit --> ez-text-input
|
|
@@ -201,6 +203,19 @@ graph TD;
|
|
|
201
203
|
ez-image-input --> ez-button
|
|
202
204
|
ez-image-input --> ez-icon
|
|
203
205
|
ez-image-input --> ez-popup
|
|
206
|
+
ez-multi-select-input --> ez-icon
|
|
207
|
+
ez-multi-select-input --> ez-tooltip
|
|
208
|
+
ez-multi-select-input --> ez-popover-core
|
|
209
|
+
ez-multi-select-input --> ez-multi-selection-list
|
|
210
|
+
ez-multi-selection-list --> ez-check
|
|
211
|
+
ez-multi-selection-list --> ez-list
|
|
212
|
+
ez-multi-selection-list --> ez-icon
|
|
213
|
+
ez-multi-selection-list --> multi-selection-box-message
|
|
214
|
+
ez-multi-selection-list --> ez-filter-input
|
|
215
|
+
ez-multi-selection-list --> ez-search
|
|
216
|
+
ez-list --> ez-check
|
|
217
|
+
ez-filter-input --> ez-text-input
|
|
218
|
+
ez-filter-input --> ez-icon
|
|
204
219
|
ez-form --> ez-form-view
|
|
205
220
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
206
221
|
```
|
|
@@ -318,8 +318,9 @@ graph TD;
|
|
|
318
318
|
ez-search --> ez-popover-plus
|
|
319
319
|
ez-search --> search-list
|
|
320
320
|
search-list --> ez-card-item
|
|
321
|
-
ez-grid-pagination --> ez-popover
|
|
322
321
|
ez-grid-pagination --> ez-icon
|
|
322
|
+
ez-grid-pagination --> ez-button
|
|
323
|
+
ez-grid-pagination --> ez-popover
|
|
323
324
|
ez-grid-pagination --> ez-tooltip
|
|
324
325
|
ez-grid-view --> ez-grid
|
|
325
326
|
style ez-grid fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -73,16 +73,19 @@ Type: `Promise<void>`
|
|
|
73
73
|
|
|
74
74
|
### Depends on
|
|
75
75
|
|
|
76
|
-
- [ez-popover](../ez-popover)
|
|
77
76
|
- [ez-icon](../ez-icon)
|
|
77
|
+
- [ez-button](../ez-button)
|
|
78
|
+
- [ez-popover](../ez-popover)
|
|
78
79
|
- [ez-tooltip](../ez-tooltip)
|
|
79
80
|
|
|
80
81
|
### Graph
|
|
81
82
|
```mermaid
|
|
82
83
|
graph TD;
|
|
83
|
-
ez-grid-pagination --> ez-popover
|
|
84
84
|
ez-grid-pagination --> ez-icon
|
|
85
|
+
ez-grid-pagination --> ez-button
|
|
86
|
+
ez-grid-pagination --> ez-popover
|
|
85
87
|
ez-grid-pagination --> ez-tooltip
|
|
88
|
+
ez-button --> ez-icon
|
|
86
89
|
ez-grid --> ez-grid-pagination
|
|
87
90
|
style ez-grid-pagination fill:#f9f,stroke:#333,stroke-width:4px
|
|
88
91
|
```
|
|
@@ -177,8 +177,9 @@ graph TD;
|
|
|
177
177
|
ez-search --> ez-popover-plus
|
|
178
178
|
ez-search --> search-list
|
|
179
179
|
search-list --> ez-card-item
|
|
180
|
-
ez-grid-pagination --> ez-popover
|
|
181
180
|
ez-grid-pagination --> ez-icon
|
|
181
|
+
ez-grid-pagination --> ez-button
|
|
182
|
+
ez-grid-pagination --> ez-popover
|
|
182
183
|
ez-grid-pagination --> ez-tooltip
|
|
183
184
|
style ez-grid-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
184
185
|
```
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
- [ez-image-input](../ez-image-input)
|
|
40
40
|
- [ez-list-item](../ez-list-item)
|
|
41
41
|
- [ez-modal-container](../ez-modal-container)
|
|
42
|
+
- [ez-multi-select-input](../ez-multi-select-input)
|
|
42
43
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
43
44
|
- [ez-rich-toolbar-item](../ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item)
|
|
44
45
|
- [ez-scroller](../ez-scroller)
|
|
@@ -78,6 +79,7 @@ graph TD;
|
|
|
78
79
|
ez-image-input --> ez-icon
|
|
79
80
|
ez-list-item --> ez-icon
|
|
80
81
|
ez-modal-container --> ez-icon
|
|
82
|
+
ez-multi-select-input --> ez-icon
|
|
81
83
|
ez-multi-selection-list --> ez-icon
|
|
82
84
|
ez-rich-toolbar-item --> ez-icon
|
|
83
85
|
ez-scroller --> ez-icon
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# ez-multi-select-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Campo de formulário de múltipla seleção. Possui o mesmo layout visual do
|
|
11
|
+
`ez-text-input` (label flutuante, estados de foco/erro/desabilitado) e, ao ser
|
|
12
|
+
acionado, abre um `ez-popover-plus` ancorado ao campo contendo um
|
|
13
|
+
`ez-multi-selection-list`. O campo exibe o texto "N selecionado(s)" com a
|
|
14
|
+
contagem de itens marcados.
|
|
15
|
+
|
|
16
|
+
Suporta tanto lista estática (`options`) quanto carregamento dinâmico via
|
|
17
|
+
`dataSource`/`columnName`. O valor selecionado é exposto pela prop `value` e
|
|
18
|
+
pelo evento `ezChange` (ambos no formato `IMultiSelectionOption[]`), o que
|
|
19
|
+
permite a vinculação automática a formulários através do `DataBinder` quando o
|
|
20
|
+
metadata informa `userInterface: "MULTISELECTOR"`.
|
|
21
|
+
|
|
22
|
+
## Properties
|
|
23
|
+
|
|
24
|
+
| Property | Attribute | Description | Type | Default |
|
|
25
|
+
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
|
|
26
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
27
|
+
| `columnName` | `column-name` | Nome da coluna para o datasource. | `string` | `undefined` |
|
|
28
|
+
| `dataSource` | -- | Datasource dinâmico passado para o ez-multi-selection-list. | `IMultiSelectionListDataSource` | `undefined` |
|
|
29
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
30
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
31
|
+
| `hasInvalid` | `has-invalid` | Define se o campo está em estado inválido (bordas vermelhas). | `boolean` | `false` |
|
|
32
|
+
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto ou numérico. | `boolean` | `false` |
|
|
33
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
34
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `'regular'` |
|
|
35
|
+
| `noBorder` | `no-border` | Se true o campo não terá bordas. | `boolean` | `false` |
|
|
36
|
+
| `options` | -- | Opções estáticas passadas para o ez-multi-selection-list. | `IMultiSelectionOption[]` | `undefined` |
|
|
37
|
+
| `orderSelectedFirst` | `order-selected-first` | Define se as opções marcadas devem ser reordenadas para o topo da lista. Quando `false` (padrão), a ordem original das opções é preservada — os itens não "pulam" para o topo ao serem selecionados. Defina `true` para manter os selecionados no topo (ordenados). | `boolean` | `false` |
|
|
38
|
+
| `useOptions` | `use-options` | Alterna entre lista estática (true) e datasource (false). | `boolean` | `false` |
|
|
39
|
+
| `value` | -- | Valor do campo: as opções com o estado de check atual (mesmo formato do payload de `ezChange`). Usado para a vinculação com formulários (read-back do DataBinder). Não reflete como atributo pois arrays não serializam bem em HTML. | `IMultiSelectionOption[]` | `undefined` |
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## Events
|
|
43
|
+
|
|
44
|
+
| Event | Description | Type |
|
|
45
|
+
| ---------- | ----------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
|
|
46
|
+
| `ezChange` | Emitido quando a seleção de itens na lista é alterada. O payload é o array completo das opções com seu estado de check. | `CustomEvent<IMultiSelectionOption[]>` |
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
## Methods
|
|
50
|
+
|
|
51
|
+
### `clearSelection() => Promise<void>`
|
|
52
|
+
|
|
53
|
+
Limpa todas as seleções. Delega ao ez-multi-selection-list.
|
|
54
|
+
|
|
55
|
+
#### Returns
|
|
56
|
+
|
|
57
|
+
Type: `Promise<void>`
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
### `getSelectedOptions() => Promise<IMultiSelectionOption[]>`
|
|
62
|
+
|
|
63
|
+
Retorna as opções com o estado de check atual.
|
|
64
|
+
|
|
65
|
+
#### Returns
|
|
66
|
+
|
|
67
|
+
Type: `Promise<IMultiSelectionOption[]>`
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
## Dependencies
|
|
73
|
+
|
|
74
|
+
### Used by
|
|
75
|
+
|
|
76
|
+
- [ez-form-view](../ez-form-view)
|
|
77
|
+
|
|
78
|
+
### Depends on
|
|
79
|
+
|
|
80
|
+
- [ez-icon](../ez-icon)
|
|
81
|
+
- [ez-tooltip](../ez-tooltip)
|
|
82
|
+
- [ez-popover-core](../ez-popover-plus/subcomponent)
|
|
83
|
+
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
84
|
+
|
|
85
|
+
### Graph
|
|
86
|
+
```mermaid
|
|
87
|
+
graph TD;
|
|
88
|
+
ez-multi-select-input --> ez-icon
|
|
89
|
+
ez-multi-select-input --> ez-tooltip
|
|
90
|
+
ez-multi-select-input --> ez-popover-core
|
|
91
|
+
ez-multi-select-input --> ez-multi-selection-list
|
|
92
|
+
ez-multi-selection-list --> ez-check
|
|
93
|
+
ez-multi-selection-list --> ez-list
|
|
94
|
+
ez-multi-selection-list --> ez-icon
|
|
95
|
+
ez-multi-selection-list --> multi-selection-box-message
|
|
96
|
+
ez-multi-selection-list --> ez-filter-input
|
|
97
|
+
ez-multi-selection-list --> ez-search
|
|
98
|
+
ez-list --> ez-check
|
|
99
|
+
ez-filter-input --> ez-text-input
|
|
100
|
+
ez-filter-input --> ez-icon
|
|
101
|
+
ez-text-input --> ez-tooltip
|
|
102
|
+
ez-text-input --> ez-icon
|
|
103
|
+
ez-search --> ez-button
|
|
104
|
+
ez-search --> ez-text-input
|
|
105
|
+
ez-search --> ez-icon
|
|
106
|
+
ez-search --> ez-popover-plus
|
|
107
|
+
ez-search --> search-list
|
|
108
|
+
ez-button --> ez-icon
|
|
109
|
+
ez-popover-plus --> ez-popover-core
|
|
110
|
+
search-list --> ez-card-item
|
|
111
|
+
ez-form-view --> ez-multi-select-input
|
|
112
|
+
style ez-multi-select-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
----------------------------------------------
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
## CSS Variables
|
|
121
|
+
| Variable | Description |
|
|
122
|
+
|-|-|
|
|
123
|
+
| --ez-multi-select-input--height | Define a altura do componente. |
|
|
124
|
+
| --ez-multi-select-input--height--slim | Define a altura do componente em modo "slim". |
|
|
125
|
+
| --ez-multi-select-input--width | Define a largura do componente. |
|
|
126
|
+
| --ez-multi-select-input\_\_min-width | Define a largura mínima do componente. |
|
|
127
|
+
| --ez-multi-select-input\_\_max-width | Define a largura máxima do componente. |
|
|
128
|
+
| --ez-multi-select-input\_\_icon--width | Define a largura reservada para o ícone à direita. |
|
|
129
|
+
| --ez-multi-select-input--font-size | Define o tamanho da fonte do componente. |
|
|
130
|
+
| --ez-multi-select-input--font-family | Define a família da fonte do componente. |
|
|
131
|
+
| --ez-multi-select-input--font-weight | Define o peso da fonte do componente. |
|
|
132
|
+
| --ez-multi-select-input--color | Define a cor da fonte do componente. |
|
|
133
|
+
| --ez-multi-select-input--border-radius | Define o raio da borda do componente. |
|
|
134
|
+
| --ez-multi-select-input\_\_input--border | Define o estilo da borda. |
|
|
135
|
+
| --ez-multi-select-input\_\_input--border-color | Define a cor da borda. |
|
|
136
|
+
| --ez-multi-select-input\_\_input--focus--border-color | Define a cor da borda quando focado. |
|
|
137
|
+
| --ez-multi-select-input\_\_input--error--border-color | Define a cor da borda quando com erro. |
|
|
138
|
+
| --ez-multi-select-input\_\_input--background-color | Define a cor de fundo do campo. |
|
|
139
|
+
| --ez-multi-select-input\_\_input--disabled--background-color | Define a cor de fundo quando desabilitado. |
|
|
140
|
+
| --ez-multi-select-input\_\_input--disabled--color | Define a cor do texto quando desabilitado. |
|
|
141
|
+
| --ez-multi-select-input\_\_label--floating--top | Define o posicionamento do label flutuante. |
|
|
142
|
+
| --ez-multi-select-input\_\_label--padding-top | Define o espaçamento superior do label. |
|
|
143
|
+
| --ez-multi-select-input\_\_label--padding-left | Define o espaçamento esquerdo do label. |
|
|
144
|
+
| --ez-multi-select-input\_\_placeholder--color | Define a cor do placeholder. |
|
|
145
|
+
| --ez-multi-select-input\_\_tooltip\_icon--error--color | Define a cor do ícone de erro. |
|
|
146
|
+
| --ez-multi-select-input\_\_tooltip-icon---width | Define a largura do ícone de erro. |
|
|
147
|
+
| --ez-multi-select-input\_\_tooltip-icon---horizontal-margin | Define a margem horizontal do ícone de erro. |
|
|
148
|
+
| --ez-multi-select-input\_\_tooltip-icon---vertical-margin | Define a margem vertical do ícone de erro. |
|
|
@@ -7,13 +7,14 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `columnName`
|
|
13
|
-
| `dataSource`
|
|
14
|
-
| `isTextSearch`
|
|
15
|
-
| `options`
|
|
16
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
|
|
12
|
+
| `columnName` | `column-name` | Nome da coluna onde serão aplicadas as opções selecionadas. | `string` | `undefined` |
|
|
13
|
+
| `dataSource` | -- | Classe que implementa o método fetchData, responsável por realizar a pesquisa dos dados, com base no termo informado pelo usuário. | `IMultiSelectionListDataSource` | `undefined` |
|
|
14
|
+
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto ou numérico. | `boolean` | `false` |
|
|
15
|
+
| `options` | -- | Opções de filtros a serem exibidas na listagem. | `IMultiSelectionOption[]` | `undefined` |
|
|
16
|
+
| `orderSelectedFirst` | `order-selected-first` | Define se as opções marcadas devem ser reordenadas para o topo da lista (e ordenadas alfabeticamente/pelo datasource). Quando `false`, a ordem original das opções é preservada — inclusive ao marcar/desmarcar itens. Padrão: `true` (mantém o comportamento histórico). | `boolean` | `true` |
|
|
17
|
+
| `useOptions` | `use-options` | Indica se deve ser exibida lista de opções do atributo options (true), ou se deve utilizar o datasource (false) | `boolean` | `false` |
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
## Events
|
|
@@ -29,6 +30,16 @@
|
|
|
29
30
|
|
|
30
31
|
|
|
31
32
|
|
|
33
|
+
#### Returns
|
|
34
|
+
|
|
35
|
+
Type: `Promise<void>`
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
### `clearSelection() => Promise<void>`
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
32
43
|
#### Returns
|
|
33
44
|
|
|
34
45
|
Type: `Promise<void>`
|
|
@@ -40,6 +51,7 @@ Type: `Promise<void>`
|
|
|
40
51
|
|
|
41
52
|
### Used by
|
|
42
53
|
|
|
54
|
+
- [ez-multi-select-input](../ez-multi-select-input)
|
|
43
55
|
- [filter-column](../ez-grid/subcomponents)
|
|
44
56
|
|
|
45
57
|
### Depends on
|
|
@@ -73,6 +85,7 @@ graph TD;
|
|
|
73
85
|
ez-button --> ez-icon
|
|
74
86
|
ez-popover-plus --> ez-popover-core
|
|
75
87
|
search-list --> ez-card-item
|
|
88
|
+
ez-multi-select-input --> ez-multi-selection-list
|
|
76
89
|
filter-column --> ez-multi-selection-list
|
|
77
90
|
style ez-multi-selection-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
78
91
|
```
|
|
@@ -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.
|
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| --------------- | ----------------- |
|
|
12
|
-
| `anchorElement` | `anchor-element` | Define o elemento de ancoragem.
|
|
13
|
-
| `autoClose` | `auto-close` | Define que será fechado automaticamente quando o usuário clicar fora do conteúdo.
|
|
14
|
-
| `boxWidth` | `box-width` | Ajusta o comportamento da largura do popover.
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
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
|
+
| `fitInViewport` | `fit-in-viewport` | Define se o popover deve se ajustar ao espaço visível disponível para não ser cortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro, o conteúdo passa a rolar internamente em vez de ficar com parte oculta. Padrão: true. | `boolean` | `true` |
|
|
16
|
+
| `minWidth` | `min-width` | Define a largura mínima do elemento (apenas será considerada caso a propriedade useAnchorSize seja verdadeira). | `number` | `150` |
|
|
17
|
+
| `opened` | `opened` | Define se o ez-popover está aberto. | `boolean` | `false` |
|
|
18
|
+
| `options` | -- | Define as opções do elemento. | `IEzPopoverAnchorOptions` | `{ horizontalGap: 0, verticalGap: 0, fromRight: false }` |
|
|
19
|
+
| `overlayType` | `overlay-type` | Define o tipo de overlay do popover. | `"light" \| "medium" \| "none"` | `"light"` |
|
|
20
|
+
| `useAnchorSize` | `use-anchor-size` | Define se o elemento manterá o mesmo tamanho do componente de ancora. | `boolean` | `false` |
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
## Events
|
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| --------------- | ----------------- |
|
|
12
|
-
| `anchorElement` | `anchor-element` | Define o elemento de ancoragem.
|
|
13
|
-
| `autoClose` | `auto-close` | Define se será fechado automaticamente quando o usuário clicar fora do conteúdo.
|
|
14
|
-
| `boxWidth` | `box-width` | Ajusta o comportamento da largura do popover.
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
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 se 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
|
+
| `fitInViewport` | `fit-in-viewport` | Define se o popover deve se ajustar ao espaço visível disponível para não ser cortado pelas bordas da tela (ou por containers com rolagem). Quando verdadeiro, a largura/altura máximas do popover passam a ser limitadas ao espaço disponível e o conteúdo rola internamente, em vez de ficar com parte oculta. O elemento permanece no shadow DOM, preservando o estilo e o conteúdo do slot. Padrão: true. | `boolean` | `true` |
|
|
16
|
+
| `minWidth` | `min-width` | Define a largura mínima do elemento (apenas será considerada caso a propriedade useAnchorSize seja verdadeira). | `number` | `150` |
|
|
17
|
+
| `opened` | `opened` | Define se o ez-popover está aberto. | `boolean` | `false` |
|
|
18
|
+
| `options` | -- | Define as opções do elemento. | `IEzPopoverAnchorOptions` | `{ horizontalGap: 0, verticalGap: 0, fromRight: false }` |
|
|
19
|
+
| `overlayType` | `overlay-type` | Define o tipo de overlay do popover. | `"light" \| "medium" \| "none"` | `"light"` |
|
|
20
|
+
| `useAnchorSize` | `use-anchor-size` | Define se o elemento manterá o mesmo tamanho do componente de ancora. | `boolean` | `false` |
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
## Events
|
|
@@ -94,12 +95,14 @@ Type: `Promise<void>`
|
|
|
94
95
|
### Used by
|
|
95
96
|
|
|
96
97
|
- [ez-classic-combo-box](../../ez-classic-combo-box)
|
|
98
|
+
- [ez-multi-select-input](../../ez-multi-select-input)
|
|
97
99
|
- [ez-popover-plus](..)
|
|
98
100
|
|
|
99
101
|
### Graph
|
|
100
102
|
```mermaid
|
|
101
103
|
graph TD;
|
|
102
104
|
ez-classic-combo-box --> ez-popover-core
|
|
105
|
+
ez-multi-select-input --> ez-popover-core
|
|
103
106
|
ez-popover-plus --> ez-popover-core
|
|
104
107
|
style ez-popover-core fill:#f9f,stroke:#333,stroke-width:4px
|
|
105
108
|
```
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| --------------- | ---------------- | ------------------------------------------------------------------------------------------------------------- | ----------------- | ----------- |
|
|
12
|
+
| `reorderable` | `reorderable` | Define se as abas podem ser reordenadas via drag-and-drop. Desabilitado por padrão. | `boolean` | `false` |
|
|
12
13
|
| `selectedIndex` | `selected-index` | Define o index da aba selecionada. | `number` | `undefined` |
|
|
13
14
|
| `selectedTab` | `selected-tab` | Define a aba selecionada. | `string` | `undefined` |
|
|
14
15
|
| `tabs` | `tabs` | Define o nome das abas do componente. Podendo serem separadas por vírgula "," ou em um Array de configuração. | `Tab[] \| string` | `undefined` |
|
|
@@ -16,9 +17,10 @@
|
|
|
16
17
|
|
|
17
18
|
## Events
|
|
18
19
|
|
|
19
|
-
| Event
|
|
20
|
-
|
|
|
21
|
-
| `ezChange`
|
|
20
|
+
| Event | Description | Type |
|
|
21
|
+
| ----------- | ----------------------------------------------------------------------------------------------- | -------------------- |
|
|
22
|
+
| `ezChange` | Emitido quando acontece a alteração de valor do componente. | `CustomEvent<Tab>` |
|
|
23
|
+
| `ezReorder` | Emitido quando as abas são reordenadas via drag-and-drop. Recebe o array de abas na nova ordem. | `CustomEvent<Tab[]>` |
|
|
22
24
|
|
|
23
25
|
|
|
24
26
|
## Methods
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
|
|
28
28
|
- [ez-chip](../ez-chip)
|
|
29
29
|
- [ez-grid-pagination](../ez-grid-pagination)
|
|
30
|
+
- [ez-multi-select-input](../ez-multi-select-input)
|
|
30
31
|
- [ez-record-navigation](../ez-record-navigation)
|
|
31
32
|
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
32
33
|
- [ez-split-button](../ez-split-button)
|
|
@@ -38,6 +39,7 @@
|
|
|
38
39
|
graph TD;
|
|
39
40
|
ez-chip --> ez-tooltip
|
|
40
41
|
ez-grid-pagination --> ez-tooltip
|
|
42
|
+
ez-multi-select-input --> ez-tooltip
|
|
41
43
|
ez-record-navigation --> ez-tooltip
|
|
42
44
|
ez-simple-image-uploader --> ez-tooltip
|
|
43
45
|
ez-split-button --> ez-tooltip
|