@sankhyalabs/ezui-docs 6.5.0-dev.1 → 6.5.0-dev.10
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 +4 -0
- package/components/ez-chip/readme.md +8 -0
- package/components/ez-form/readme.md +1 -0
- package/components/ez-form-view/readme.md +1 -0
- package/components/ez-grid/readme.md +28 -7
- package/components/ez-multi-selection-list/readme.md +1 -1
- package/components/ez-pagination/readme.md +57 -0
- package/components/ez-popup/readme.md +17 -12
- package/components/ez-rich-text/ez-link-builder/readme.md +2 -1
- package/components/ez-rich-text/ez-simple-image-uploader/readme.md +2 -1
- package/components/ez-rich-text/readme.md +2 -1
- package/components/ez-split-button/readme.md +31 -21
- package/components/ez-tag-input/readme.md +132 -0
- package/package.json +1 -1
|
@@ -57,6 +57,8 @@ Type: `Promise<void>`
|
|
|
57
57
|
- [ez-grid](../ez-grid)
|
|
58
58
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
59
59
|
- [ez-modal-container](../ez-modal-container)
|
|
60
|
+
- [ez-pagination](../ez-pagination)
|
|
61
|
+
- [ez-popup](../ez-popup)
|
|
60
62
|
- [ez-sidebar-navigator](../ez-sidebar-navigator)
|
|
61
63
|
- [ez-split-item](../ez-split-panel/structure/item)
|
|
62
64
|
- [ez-text-edit](../ez-text-edit)
|
|
@@ -78,6 +80,8 @@ graph TD;
|
|
|
78
80
|
ez-grid --> ez-button
|
|
79
81
|
ez-guide-navigator --> ez-button
|
|
80
82
|
ez-modal-container --> ez-button
|
|
83
|
+
ez-pagination --> ez-button
|
|
84
|
+
ez-popup --> ez-button
|
|
81
85
|
ez-sidebar-navigator --> ez-button
|
|
82
86
|
ez-split-item --> ez-button
|
|
83
87
|
ez-text-edit --> ez-button
|
|
@@ -17,8 +17,10 @@
|
|
|
17
17
|
| `maxWidth` | `max-width` | Define o tamanho máximo do chip. | `string` | `undefined` |
|
|
18
18
|
| `mode` | `mode` | Define o modo de uso do ez-chip. | `"action" \| "label"` | `undefined` |
|
|
19
19
|
| `removePosition` | `remove-position` | Determina o posicionamento do botão de remover (não disponível no modo `action`). Se não informado, não exibe o botão. | `"left" \| "right"` | `undefined` |
|
|
20
|
+
| `removeWithKeyboard` | `remove-with-keyboard` | Define se o chip deve ser removido ao pressionar a tecla Enter quando focado. | `boolean` | `false` |
|
|
20
21
|
| `showNativeTooltip` | `show-native-tooltip` | Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento. | `boolean` | `false` |
|
|
21
22
|
| `size` | `size` | Define o tamanho do chip. | `"default" \| "large" \| "medium"` | `'default'` |
|
|
23
|
+
| `tabIndex` | `tab-index` | Define o tabindex do chip. Por padrão é 0, permitindo que o chip seja focável. | `number` | `0` |
|
|
22
24
|
| `type` | `type` | Define o tipo de estilização do chip. | `"primary" \| "secondary"` | `'primary'` |
|
|
23
25
|
| `value` | `value` | Define o valor do ez-chip. | `boolean` | `false` |
|
|
24
26
|
|
|
@@ -58,6 +60,10 @@ Type: `Promise<void>`
|
|
|
58
60
|
|
|
59
61
|
## Dependencies
|
|
60
62
|
|
|
63
|
+
### Used by
|
|
64
|
+
|
|
65
|
+
- [ez-tag-input](../ez-tag-input)
|
|
66
|
+
|
|
61
67
|
### Depends on
|
|
62
68
|
|
|
63
69
|
- [ez-tooltip](../ez-tooltip)
|
|
@@ -68,6 +74,7 @@ Type: `Promise<void>`
|
|
|
68
74
|
graph TD;
|
|
69
75
|
ez-chip --> ez-tooltip
|
|
70
76
|
ez-chip --> ez-icon
|
|
77
|
+
ez-tag-input --> ez-chip
|
|
71
78
|
style ez-chip fill:#f9f,stroke:#333,stroke-width:4px
|
|
72
79
|
```
|
|
73
80
|
|
|
@@ -98,4 +105,5 @@ graph TD;
|
|
|
98
105
|
| --ez-label-chip\_\_label\_\_container--default--color--active | Define a cor do texto quando o cursor está sobre ele. |
|
|
99
106
|
| --ez-label-chip\_\_label\_\_container--text--disabled | Define a cor do texto e do ícone quando o chip está desabilitado. |
|
|
100
107
|
| --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda quando o componente está ativo. |
|
|
108
|
+
| --ez-label-chip\_\_label\_\_container--secondary--border-color--active | Define a cor da borda quando o componente está ativo e na variação secundária. |
|
|
101
109
|
| --ez-label-chip\_\_label\_\_container--default--margin-top | Define a margem superior. |
|
|
@@ -141,6 +141,7 @@ graph TD;
|
|
|
141
141
|
ez-link-builder --> ez-modal-container
|
|
142
142
|
ez-link-builder --> ez-text-input
|
|
143
143
|
ez-link-builder --> ez-check
|
|
144
|
+
ez-popup --> ez-button
|
|
144
145
|
ez-modal-container --> ez-icon
|
|
145
146
|
ez-modal-container --> ez-button
|
|
146
147
|
ez-simple-image-uploader --> ez-popup
|
|
@@ -144,6 +144,7 @@ graph TD;
|
|
|
144
144
|
ez-link-builder --> ez-modal-container
|
|
145
145
|
ez-link-builder --> ez-text-input
|
|
146
146
|
ez-link-builder --> ez-check
|
|
147
|
+
ez-popup --> ez-button
|
|
147
148
|
ez-modal-container --> ez-icon
|
|
148
149
|
ez-modal-container --> ez-button
|
|
149
150
|
ez-simple-image-uploader --> ez-popup
|
|
@@ -37,13 +37,14 @@
|
|
|
37
37
|
|
|
38
38
|
## Events
|
|
39
39
|
|
|
40
|
-
| Event
|
|
41
|
-
|
|
|
42
|
-
| `componentReady`
|
|
43
|
-
| `configChange`
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
40
|
+
| Event | Description | Type |
|
|
41
|
+
| ----------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------ |
|
|
42
|
+
| `componentReady` | Emitido quando o componente estiver completamente carregado. | `CustomEvent<void>` |
|
|
43
|
+
| `configChange` | Emitido quando acontece a alteração de configuração do grade. | `CustomEvent<IGridConfig>` |
|
|
44
|
+
| `ezColumnFilterChanged` | Emitido quando acontece a alteração de filtro de colunas. | `CustomEvent<Filter[]>` |
|
|
45
|
+
| `ezColumnStateChange` | Emitido quando acontece a alteração de estado das colunas do grid: Ordenação, largura, etc. | `CustomEvent<EzGridColumStateEvent>` |
|
|
46
|
+
| `ezDoubleClick` | Emitido com o duplo clique de uma linha | `CustomEvent<any>` |
|
|
47
|
+
| `ezSelectionChange` | Emitido quando acontece a alteração de seleção de linhas. | `CustomEvent<ISelection>` |
|
|
47
48
|
|
|
48
49
|
|
|
49
50
|
## Methods
|
|
@@ -108,6 +109,16 @@ Type: `Promise<EzGridColumn[]>`
|
|
|
108
109
|
|
|
109
110
|
---
|
|
110
111
|
|
|
112
|
+
### `getAppliedColumnFilters() => Promise<Array<Filter>>`
|
|
113
|
+
|
|
114
|
+
Retorna os filtros aplicados.
|
|
115
|
+
|
|
116
|
+
#### Returns
|
|
117
|
+
|
|
118
|
+
Type: `Promise<Filter[]>`
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
111
122
|
### `getColumns() => Promise<Array<EzGridColumn>>`
|
|
112
123
|
|
|
113
124
|
Obtém a lista de definição de colunas.
|
|
@@ -162,6 +173,16 @@ Type: `Promise<void>`
|
|
|
162
173
|
|
|
163
174
|
Aplica um filtro rápido.
|
|
164
175
|
|
|
176
|
+
#### Returns
|
|
177
|
+
|
|
178
|
+
Type: `Promise<void>`
|
|
179
|
+
|
|
180
|
+
---
|
|
181
|
+
|
|
182
|
+
### `refreshColumnFilterDataSource() => Promise<void>`
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
165
186
|
#### Returns
|
|
166
187
|
|
|
167
188
|
Type: `Promise<void>`
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
| -------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
|
|
12
12
|
| `columnName` | `column-name` | Nome da coluna onde serão aplicadas as opções selecionadas. | `string` | `undefined` |
|
|
13
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.
|
|
14
|
+
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto ou numérico. | `boolean` | `false` |
|
|
15
15
|
| `options` | -- | Opções de filtros a serem exibidas na listagem. | `IMultiSelectionOption[]` | `undefined` |
|
|
16
16
|
| `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
17
|
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# ez-pagination
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| --------------- | ----------------- | ---------------------------------------------------------------------- | ----------------------- | ----------- |
|
|
12
|
+
| `currentPage` | `current-page` | O número da página atual. | `number` | `1` |
|
|
13
|
+
| `hideInfoLabel` | `hide-info-label` | Esconde as o texto de informação da paginação no tipo default. | `boolean` | `false` |
|
|
14
|
+
| `pageLimit` | `page-limit` | O número de páginas a serem exibidas na paginação. | `number` | `10` |
|
|
15
|
+
| `pageSize` | `page-size` | O número de itens por página. | `number` | `10` |
|
|
16
|
+
| `totalItems` | `total-items` | O número total de itens. | `number` | `0` |
|
|
17
|
+
| `type` | `type` | O tipo de paginação a ser renderizada. Pode ser 'default' ou 'number'. | `"default" \| "number"` | `'default'` |
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
## Events
|
|
21
|
+
|
|
22
|
+
| Event | Description | Type |
|
|
23
|
+
| -------------- | ------------------------------------------ | --------------------- |
|
|
24
|
+
| `ezPageChange` | Evento emitido quando a página é alterada. | `CustomEvent<number>` |
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## Dependencies
|
|
28
|
+
|
|
29
|
+
### Depends on
|
|
30
|
+
|
|
31
|
+
- [ez-button](../ez-button)
|
|
32
|
+
|
|
33
|
+
### Graph
|
|
34
|
+
```mermaid
|
|
35
|
+
graph TD;
|
|
36
|
+
ez-pagination --> ez-button
|
|
37
|
+
ez-button --> ez-icon
|
|
38
|
+
style ez-pagination fill:#f9f,stroke:#333,stroke-width:4px
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
----------------------------------------------
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## CSS Variables
|
|
47
|
+
| Variable | Description |
|
|
48
|
+
|-|-|
|
|
49
|
+
| --ez-pagination\_\_info--color | Define a cor do label de informação dfa paginação. |
|
|
50
|
+
| --ez-pagination\_\_info--margin-right | Define o espaçamento entre o texto de informação e os botões de controle. |
|
|
51
|
+
| --ez-pagination\_\_info--text-weight | Define o peso da fonte do texto de informação . |
|
|
52
|
+
| --ez-pagination\_\_info--font-size | Define o tamanho da fonte do texto de informação . |
|
|
53
|
+
| --ez-pagination\_\_info-range--font-weight | Define o peso da fonte do texto de intervalo da informação . |
|
|
54
|
+
| --ez-pagination\_\_pages-option-padding | Define o espaçamento lateral entre as opções de páginas do modo numérico . |
|
|
55
|
+
| --ez-pagination\_\_pages-option-color | Define a cor de texto das opções de páginas do modo numérico . |
|
|
56
|
+
| --ez-pagination\_\_pages-option-weight | Define a o peso da fonte do texto das opções de páginas do modo numérico . |
|
|
57
|
+
| --ez-pagination\_\_pages-option-size | Define a o tamanho da fonte do texto das opções de páginas do modo numérico . |
|
|
@@ -7,14 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| --------------- | ---------------- |
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| --------------- | ---------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `autoClose` | `auto-close` | Define se o popup deve fechar automaticamente ao clicar fora dele. | `boolean` | `true` |
|
|
13
|
+
| `enabledScroll` | `enabled-scroll` | Possibilita scroll vertical no conteúdo interno do componente | `boolean` | `false` |
|
|
14
|
+
| `ezTitle` | `ez-title` | Texto a ser apresentado como título do componente. | `string` | `undefined` |
|
|
15
|
+
| `footerButtons` | -- | Botões do rodapé do popup. Aceita todas as propriedades do ez-button. Limitado a até 3 botões. | `Partial<EzButtonProps>[]` | `[]` |
|
|
16
|
+
| `heightMode` | `height-mode` | Define altura do componente. | `"auto" \| "full"` | `"full"` |
|
|
17
|
+
| `opened` | `opened` | Define se o ez-popover está aberto. | `boolean` | `false` |
|
|
18
|
+
| `size` | `size` | Define a largura do ez-popup. | `"auto" \| "large" \| "medium" \| "small" \| "x-large" \| "x-small"` | `"medium"` |
|
|
19
|
+
| `useHeader` | `use-header` | Define se o componente utilizará cabeçalho. | `boolean` | `true` |
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
## Events
|
|
@@ -32,9 +34,15 @@
|
|
|
32
34
|
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
33
35
|
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
34
36
|
|
|
37
|
+
### Depends on
|
|
38
|
+
|
|
39
|
+
- [ez-button](../ez-button)
|
|
40
|
+
|
|
35
41
|
### Graph
|
|
36
42
|
```mermaid
|
|
37
43
|
graph TD;
|
|
44
|
+
ez-popup --> ez-button
|
|
45
|
+
ez-button --> ez-icon
|
|
38
46
|
ez-link-builder --> ez-popup
|
|
39
47
|
ez-simple-image-uploader --> ez-popup
|
|
40
48
|
style ez-popup fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -51,10 +59,7 @@ graph TD;
|
|
|
51
59
|
| --ez-popup-z-index | Define a camada em que o componente será exibido. |
|
|
52
60
|
| --ez-popup\_\_container--color | Define a cor do texto do container do popup. |
|
|
53
61
|
| --ez-popup\_\_container--padding | Define o espaçamento do container do popup. |
|
|
54
|
-
| --ez-popup\_\_header--padding-bottom | Define o espaçamento inferior do cabeçalho do popup. |
|
|
55
62
|
| --ez-popup\_\_title--font-family | Define a família da fonte do título do popup. |
|
|
56
63
|
| --ez-popup\_\_title--font-size | Define o tamanho da fonte do título do popup. |
|
|
57
64
|
| --ez-popup\_\_title--color | Define a cor da fonte do título do popup. |
|
|
58
|
-
| --ez-popup\_\_title--font-weight | Define o peso da fonte do título do popup. |
|
|
59
|
-
| --ez-popup\_\_btn\_\_close--icon-color | Define a cor do ícone do botão de fechamento. |
|
|
60
|
-
| --ez-popup\_\_btn\_\_close--icon | Contém o ícone do botão de fechamento. |
|
|
65
|
+
| --ez-popup\_\_title--font-weight | Define o peso da fonte do título do popup. |
|
|
@@ -55,9 +55,10 @@ graph TD;
|
|
|
55
55
|
ez-link-builder --> ez-modal-container
|
|
56
56
|
ez-link-builder --> ez-text-input
|
|
57
57
|
ez-link-builder --> ez-check
|
|
58
|
+
ez-popup --> ez-button
|
|
59
|
+
ez-button --> ez-icon
|
|
58
60
|
ez-modal-container --> ez-icon
|
|
59
61
|
ez-modal-container --> ez-button
|
|
60
|
-
ez-button --> ez-icon
|
|
61
62
|
ez-text-input --> ez-tooltip
|
|
62
63
|
ez-text-input --> ez-icon
|
|
63
64
|
ez-rich-text --> ez-link-builder
|
|
@@ -64,9 +64,10 @@ graph TD;
|
|
|
64
64
|
ez-simple-image-uploader --> ez-tooltip
|
|
65
65
|
ez-simple-image-uploader --> ez-text-input
|
|
66
66
|
ez-simple-image-uploader --> ez-icon
|
|
67
|
+
ez-popup --> ez-button
|
|
68
|
+
ez-button --> ez-icon
|
|
67
69
|
ez-modal-container --> ez-icon
|
|
68
70
|
ez-modal-container --> ez-button
|
|
69
|
-
ez-button --> ez-icon
|
|
70
71
|
ez-text-input --> ez-tooltip
|
|
71
72
|
ez-text-input --> ez-icon
|
|
72
73
|
ez-rich-text --> ez-simple-image-uploader
|
|
@@ -95,9 +95,10 @@ graph TD;
|
|
|
95
95
|
ez-link-builder --> ez-modal-container
|
|
96
96
|
ez-link-builder --> ez-text-input
|
|
97
97
|
ez-link-builder --> ez-check
|
|
98
|
+
ez-popup --> ez-button
|
|
99
|
+
ez-button --> ez-icon
|
|
98
100
|
ez-modal-container --> ez-icon
|
|
99
101
|
ez-modal-container --> ez-button
|
|
100
|
-
ez-button --> ez-icon
|
|
101
102
|
ez-text-input --> ez-tooltip
|
|
102
103
|
ez-text-input --> ez-icon
|
|
103
104
|
ez-simple-image-uploader --> ez-popup
|
|
@@ -5,21 +5,30 @@
|
|
|
5
5
|
<!-- Auto Generated Below -->
|
|
6
6
|
|
|
7
7
|
|
|
8
|
+
## Overview
|
|
9
|
+
|
|
10
|
+
Split Button Component
|
|
11
|
+
|
|
8
12
|
## Properties
|
|
9
13
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `enabled`
|
|
13
|
-
| `iconName`
|
|
14
|
-
| `image`
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
14
|
+
| Property | Attribute | Description | Type | Default |
|
|
15
|
+
| ------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
|
|
16
|
+
| `enabled` | `enabled` | ⚠️ **[DEPRECATED]** Use `isDisabled` prop instead.Se false o usuário não pode interagir com o botão. | `boolean` | `true` |
|
|
17
|
+
| `iconName` | `icon-name` | ⚠️ **[DEPRECATED]** Use `leftIconName` prop instead.Define o ícone a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
18
|
+
| `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` |
|
|
19
|
+
| `isDisabled` | `is-disabled` | Se verdadeiro o clique no botão fica desabilitado mas a navegação continua funcional. Se full, o usuário não pode interagir com o botão. | `"" \| "full" \| boolean` | `false` |
|
|
20
|
+
| `itemBuilder` | -- | 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: IDropdownItem, level: number) => string \| HTMLElement` | `undefined` |
|
|
21
|
+
| `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined` |
|
|
22
|
+
| `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined` |
|
|
23
|
+
| `leftIconName` | `left-icon-name` | Define o ícone esquerdo a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
24
|
+
| `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined` |
|
|
25
|
+
| `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'` |
|
|
26
|
+
| `rightIconName` | `right-icon-name` | Define o ícone direito a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
27
|
+
| `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `undefined` |
|
|
28
|
+
| `show` | `show` | Se true, o dropdown do botão é exibido. | `boolean` | `false` |
|
|
29
|
+
| `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'` |
|
|
30
|
+
| `suppressAnimation` | `suppress-animation` | Se verdadeiro, desabilita a animação de ripple. | `boolean` | `false` |
|
|
31
|
+
| `variant` | `variant` | Define a variante do ez-split-button. | `"primary" \| "secondary" \| "tertiary"` | `undefined` |
|
|
23
32
|
|
|
24
33
|
|
|
25
34
|
## Events
|
|
@@ -111,25 +120,26 @@ graph TD;
|
|
|
111
120
|
|-|-|
|
|
112
121
|
| --ez-split-button--min-width | Define a largura mínima do componente. |
|
|
113
122
|
| --ez-split-button--width | Define a largura do componente. |
|
|
114
|
-
| --ez-split-button
|
|
123
|
+
| --ez-split-button--height | Define a altura do componente, quando size medium. |
|
|
115
124
|
| --ez-split-button\_\_medium-icon--width | Define a largura do slot que contém o ícone. |
|
|
116
|
-
| --ez-split-button\_\
|
|
125
|
+
| --ez-split-button\_\_large-icon--width | Define a largura do slot que contém o ícone. |
|
|
117
126
|
| --ez-split-button\_\_label--padding-top | Define o espaçamento superior ao label. |
|
|
118
127
|
| --ez-split-button\_\_label--padding-bottom | Define o espaçamento inferior ao label. |
|
|
119
128
|
| --ez-split-button\_\_right-button--padding-left | Define o espaçamento esquerdo ao ícone. |
|
|
129
|
+
| --ez-split-button\_\_right-button--padding-right | Define o espaçamento direito ao ícone. |
|
|
120
130
|
| --ez-split-button--color | Define a cor do label. |
|
|
131
|
+
| --ez-split-button\_\_left-icon--color | Define a cor do ícone esquerdo. |
|
|
132
|
+
| --ez-split-button\_\_right-icon--color | Define a cor do ícone direito. |
|
|
133
|
+
| --ez-split-button--background-color | Define a cor de fundo do botão. |
|
|
134
|
+
| --ez-split-button--border | Define o estilo da borda do botão. |
|
|
121
135
|
| --ez-split-button--font-size | Define o tamanho do label. |
|
|
136
|
+
| --ez-split-button--line-height | Define a altura da linha do label. |
|
|
122
137
|
| --ez-split-button--font-family | Define a família da fonte do label. |
|
|
123
138
|
| --ez-split-button--font-weight | Define o peso da fonte do label. |
|
|
124
|
-
| --ez-split-button--background-color | Define a cor de fundo do botão. |
|
|
125
139
|
| --ez-split-button--border-radius | Define o raio da borda do botão. |
|
|
126
|
-
| --ez-split-button--border | Define o estilo da borda do botão. |
|
|
127
|
-
| --ez-split-button--justify-content | Define o alinhamento horizontal do conteúdo do botão. |
|
|
128
140
|
| --ez-split-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
|
|
129
141
|
| --ez-split-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
|
|
130
142
|
| --ez-split-button--disabled-color | Define a cor do texto quando o botão está desabilitado. |
|
|
131
143
|
| --ez-split-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. |
|
|
132
144
|
| --ez-split-button--focus--border | Define o estido da borda quando o botão está selecionado. |
|
|
133
|
-
| --ez-split-button--focus--box-shadow | Define a sombra do botão quando selecionado. |
|
|
134
|
-
| --ez-split-button--active-color | Define a cor do texto e do ícone ao ativar o botão. |
|
|
135
|
-
| --ez-split-button--active--background-color | Define a cor do fundo ao ativar o botão. |
|
|
145
|
+
| --ez-split-button--focus--box-shadow | Define a sombra do botão quando selecionado. |
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# ez-tag-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- |
|
|
12
|
+
| `allowDuplicates` | `allow-duplicates` | Define se tags duplicadas são permitidas | `boolean` | `false` |
|
|
13
|
+
| `enabled` | `enabled` | Define se o input está habilitado | `boolean` | `true` |
|
|
14
|
+
| `helpText` | `help-text` | Texto de ajuda exibido abaixo do input | `string` | `undefined` |
|
|
15
|
+
| `label` | `label` | Texto do label exibido acima do input | `string` | `''` |
|
|
16
|
+
| `maxTagLength` | `max-tag-length` | Tamanho máximo de uma tag | `number` | `undefined` |
|
|
17
|
+
| `maxTags` | `max-tags` | Número máximo de tags permitidas | `number` | `undefined` |
|
|
18
|
+
| `name` | `name` | Nome do input | `string` | `undefined` |
|
|
19
|
+
| `placeholder` | `placeholder` | Placeholder do input | `string` | `''` |
|
|
20
|
+
| `readonly` | `readonly` | Define se o input é somente leitura | `boolean` | `false` |
|
|
21
|
+
| `state` | `state` | Estado visual do componente | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
22
|
+
| `suppressBackspaceToRemove` | `suppress-backspace-to-remove` | Define se a tecla Backspace deve remover a última tag quando o input está vazio | `boolean` | `false` |
|
|
23
|
+
| `suppressTagsKeyboardNavigation` | `suppress-tags-keyboard-navigation` | Define se a navegação por teclado pelas tags deve ser suprimida | `boolean` | `false` |
|
|
24
|
+
| `tags` | -- | Array de tags iniciais | `string[]` | `[]` |
|
|
25
|
+
| `validator` | -- | Função de validação customizada para tags | `(tag: string, existingTags: string[]) => string \| boolean` | `undefined` |
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Events
|
|
29
|
+
|
|
30
|
+
| Event | Description | Type |
|
|
31
|
+
| ------------------- | --------------------------------------------- | ----------------------------------------------- |
|
|
32
|
+
| `ezBlur` | Evento disparado quando o input perde foco | `CustomEvent<void>` |
|
|
33
|
+
| `ezChange` | Evento disparado quando as tags mudam | `CustomEvent<string[]>` |
|
|
34
|
+
| `ezFocus` | Evento disparado quando o input recebe foco | `CustomEvent<void>` |
|
|
35
|
+
| `ezTagAdded` | Evento disparado quando uma tag é adicionada | `CustomEvent<string>` |
|
|
36
|
+
| `ezTagRemoved` | Evento disparado quando uma tag é removida | `CustomEvent<string>` |
|
|
37
|
+
| `ezType` | Emitido quando é digitado no campo de entrada | `CustomEvent<string>` |
|
|
38
|
+
| `ezValidationError` | Evento disparado quando uma validação falha | `CustomEvent<{ tag: string; error?: string; }>` |
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
## Methods
|
|
42
|
+
|
|
43
|
+
### `addTag(tag: string) => Promise<boolean>`
|
|
44
|
+
|
|
45
|
+
Adiciona uma tag programaticamente
|
|
46
|
+
|
|
47
|
+
#### Returns
|
|
48
|
+
|
|
49
|
+
Type: `Promise<boolean>`
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
|
|
53
|
+
### `clearTags() => Promise<void>`
|
|
54
|
+
|
|
55
|
+
Limpa todas as tags
|
|
56
|
+
|
|
57
|
+
#### Returns
|
|
58
|
+
|
|
59
|
+
Type: `Promise<void>`
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### `removeTag(tag: string) => Promise<boolean>`
|
|
64
|
+
|
|
65
|
+
Remove uma tag programaticamente
|
|
66
|
+
|
|
67
|
+
#### Returns
|
|
68
|
+
|
|
69
|
+
Type: `Promise<boolean>`
|
|
70
|
+
|
|
71
|
+
---
|
|
72
|
+
|
|
73
|
+
### `setBlur() => Promise<void>`
|
|
74
|
+
|
|
75
|
+
Remove o foco do campo
|
|
76
|
+
|
|
77
|
+
#### Returns
|
|
78
|
+
|
|
79
|
+
Type: `Promise<void>`
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
### `setFocus(option?: OptionsSetFocus) => Promise<void>`
|
|
84
|
+
|
|
85
|
+
Aplica o foco no campo
|
|
86
|
+
|
|
87
|
+
#### Returns
|
|
88
|
+
|
|
89
|
+
Type: `Promise<void>`
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
## Dependencies
|
|
95
|
+
|
|
96
|
+
### Depends on
|
|
97
|
+
|
|
98
|
+
- [ez-chip](../ez-chip)
|
|
99
|
+
|
|
100
|
+
### Graph
|
|
101
|
+
```mermaid
|
|
102
|
+
graph TD;
|
|
103
|
+
ez-tag-input --> ez-chip
|
|
104
|
+
ez-chip --> ez-tooltip
|
|
105
|
+
ez-chip --> ez-icon
|
|
106
|
+
style ez-tag-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
----------------------------------------------
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
## CSS Variables
|
|
115
|
+
| Variable | Description |
|
|
116
|
+
|-|-|
|
|
117
|
+
| --ez-tag-input--background-color | Define a cor de fundo do container do input. |
|
|
118
|
+
| --ez-tag-input--border-color-default | Define a cor da borda no estado padrão. |
|
|
119
|
+
| --ez-tag-input--border-color-focused | Define a cor da borda no estado focado. |
|
|
120
|
+
| --ez-tag-input--border-color-error | Define a cor da borda no estado de erro. |
|
|
121
|
+
| --ez-tag-input--border-color-success | Define a cor da borda no estado de sucesso. |
|
|
122
|
+
| --ez-tag-input--border-color-warning | Define a cor da borda no estado de aviso. |
|
|
123
|
+
| --ez-tag-input--border-radius | Define o raio da borda do container. |
|
|
124
|
+
| --ez-tag-input--padding | Define o espaçamento interno do container. |
|
|
125
|
+
| --ez-tag-input--gap | Define o espaçamento entre tags e input. |
|
|
126
|
+
| --ez-tag-input--label-color | Define a cor do texto do label. |
|
|
127
|
+
| --ez-tag-input--label-font-weight | Define o peso da fonte do label. |
|
|
128
|
+
| --ez-tag-input--input-color | Define a cor do texto do input. |
|
|
129
|
+
| --ez-tag-input--input-font-size | Define o tamanho da fonte do input. |
|
|
130
|
+
| --ez-tag-input--placeholder-color | Define a cor do placeholder. |
|
|
131
|
+
| --ez-tag-input--background-color-disabled | Define a cor de fundo do input quando está desabilitado. |
|
|
132
|
+
| --ez-tag-input--helptext-color | Define a cor do texto de ajuda do input. |
|