@sankhyalabs/ezui-docs 6.2.0-dev.3 → 6.2.0-dev.5
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.
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# ez-classic-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
|
|
12
|
+
| `emitMaskedValue` | `emit-masked-value` | Define se o valor emitido pelo evento ezChange deve conter a máscara aplicada (padrão: false) | `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` | `undefined` |
|
|
16
|
+
| `leftIconClickable` | `left-icon-clickable` | Define se o ícone da esquerda é clicável | `boolean` | `false` |
|
|
17
|
+
| `leftIconName` | `left-icon-name` | Nome do ícone à esquerda | `string` | `undefined` |
|
|
18
|
+
| `leftIconTooltip` | `left-icon-tooltip` | Título do ícone à esquerda (tooltip) | `string` | `undefined` |
|
|
19
|
+
| `mask` | `mask` | Aplica uma máscara no conteúdo conforme o padrão estabelecido. Para mais informações acesse: https://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/ | `string` | `undefined` |
|
|
20
|
+
| `maxlength` | `maxlength` | Tamanho máximo do valor | `number` | `undefined` |
|
|
21
|
+
| `minlength` | `minlength` | Tamanho mínimo do valor | `number` | `undefined` |
|
|
22
|
+
| `name` | `name` | Nome do input | `string` | `undefined` |
|
|
23
|
+
| `placeholder` | `placeholder` | Placeholder do input | `string` | `undefined` |
|
|
24
|
+
| `readonly` | `readonly` | Define se o input é somente leitura | `boolean` | `false` |
|
|
25
|
+
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável | `boolean` | `false` |
|
|
26
|
+
| `rightIconName` | `right-icon-name` | Nome do ícone à direita | `string` | `undefined` |
|
|
27
|
+
| `rightIconTooltip` | `right-icon-tooltip` | Título do ícone à direita (tooltip) | `string` | `undefined` |
|
|
28
|
+
| `state` | `state` | Estado visual do input: default, error, success ou warning | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
29
|
+
| `type` | `type` | Tipo do input (ex: text, password, email, etc) | `string` | `'text'` |
|
|
30
|
+
| `value` | `value` | Valor do input | `string` | `undefined` |
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| Event | Description | Type |
|
|
36
|
+
| ----------- | -------------------------------------------------------------------------------- | ------------------------------------------- |
|
|
37
|
+
| `ezBlur` | Evento disparado quando o input perde o foco. | `CustomEvent<string>` |
|
|
38
|
+
| `ezChange` | Evento disparado quando o valor do input muda. | `CustomEvent<string>` |
|
|
39
|
+
| `iconClick` | Evento disparado quando um ícone é clicado. Payload: { icon: "left" \| "right" } | `CustomEvent<{ icon: "left" \| "right"; }>` |
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## Methods
|
|
43
|
+
|
|
44
|
+
### `setBlur() => Promise<void>`
|
|
45
|
+
|
|
46
|
+
Remove o foco do campo.
|
|
47
|
+
|
|
48
|
+
#### Returns
|
|
49
|
+
|
|
50
|
+
Type: `Promise<void>`
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### `setFocus(option?: OptionsSetFocus) => Promise<void>`
|
|
55
|
+
|
|
56
|
+
Aplica o foco no campo.
|
|
57
|
+
|
|
58
|
+
#### Returns
|
|
59
|
+
|
|
60
|
+
Type: `Promise<void>`
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
## Dependencies
|
|
66
|
+
|
|
67
|
+
### Depends on
|
|
68
|
+
|
|
69
|
+
- [ez-icon](../ez-icon)
|
|
70
|
+
|
|
71
|
+
### Graph
|
|
72
|
+
```mermaid
|
|
73
|
+
graph TD;
|
|
74
|
+
ez-classic-input --> ez-icon
|
|
75
|
+
style ez-classic-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
----------------------------------------------
|
|
79
|
+
|
|
80
|
+
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# ez-classic-text-area
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------- | ---------------------- | -------------------------------------------------------------- | ------------------------------------------------ | ---------------------------- |
|
|
12
|
+
| `enabled` | `enabled` | Define se a textarea está habilitada | `boolean` | `true` |
|
|
13
|
+
| `helpText` | `help-text` | Texto de ajuda exibido abaixo da textarea | `string` | `undefined` |
|
|
14
|
+
| `label` | `label` | Texto do rótulo exibido acima da área de texto | `string` | `''` |
|
|
15
|
+
| `leftIconClickable` | `left-icon-clickable` | Define se o ícone da esquerda é clicável | `boolean` | `false` |
|
|
16
|
+
| `leftIconName` | `left-icon-name` | Nome do ícone à esquerda | `string` | `undefined` |
|
|
17
|
+
| `leftIconTooltip` | `left-icon-tooltip` | Título do ícone à esquerda (tooltip) | `string` | `undefined` |
|
|
18
|
+
| `maxlength` | `maxlength` | Número máximo de caracteres permitidos | `number` | `undefined` |
|
|
19
|
+
| `name` | `name` | Nome da textarea | `string` | `StringUtils.generateUUID()` |
|
|
20
|
+
| `placeholder` | `placeholder` | Texto de placeholder exibido quando a área de texto está vazia | `string` | `''` |
|
|
21
|
+
| `readonly` | `readonly` | Se a área de texto é somente leitura | `boolean` | `false` |
|
|
22
|
+
| `resize` | `resize` | Comportamento de redimensionamento da área de texto | `"both" \| "horizontal" \| "none" \| "vertical"` | `'vertical'` |
|
|
23
|
+
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável | `boolean` | `false` |
|
|
24
|
+
| `rightIconName` | `right-icon-name` | Nome do ícone à direita | `string` | `undefined` |
|
|
25
|
+
| `rightIconTooltip` | `right-icon-tooltip` | Título do ícone à direita (tooltip) | `string` | `undefined` |
|
|
26
|
+
| `rows` | `rows` | Define o número de linhas da área de texto | `number` | `5` |
|
|
27
|
+
| `state` | `state` | Estado visual da textarea: default, error, success ou warning | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
28
|
+
| `value` | `value` | Valor atual da área de texto | `string` | `''` |
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## Events
|
|
32
|
+
|
|
33
|
+
| Event | Description | Type |
|
|
34
|
+
| ----------- | -------------------------------------------------------------------------------- | ------------------------------------------- |
|
|
35
|
+
| `ezBlur` | Evento emitido quando a área de texto perde foco | `CustomEvent<string>` |
|
|
36
|
+
| `ezChange` | Evento emitido quando o valor da área de texto muda | `CustomEvent<string>` |
|
|
37
|
+
| `iconClick` | Evento disparado quando um ícone é clicado. Payload: { icon: "left" \| "right" } | `CustomEvent<{ icon: "left" \| "right"; }>` |
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## Methods
|
|
41
|
+
|
|
42
|
+
### `setBlur() => Promise<void>`
|
|
43
|
+
|
|
44
|
+
Remove o foco do campo.
|
|
45
|
+
|
|
46
|
+
#### Returns
|
|
47
|
+
|
|
48
|
+
Type: `Promise<void>`
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### `setFocus(option?: OptionsSetFocus) => Promise<void>`
|
|
53
|
+
|
|
54
|
+
Aplica o foco no campo.
|
|
55
|
+
|
|
56
|
+
#### Returns
|
|
57
|
+
|
|
58
|
+
Type: `Promise<void>`
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
## Dependencies
|
|
64
|
+
|
|
65
|
+
### Depends on
|
|
66
|
+
|
|
67
|
+
- [ez-icon](../ez-icon)
|
|
68
|
+
|
|
69
|
+
### Graph
|
|
70
|
+
```mermaid
|
|
71
|
+
graph TD;
|
|
72
|
+
ez-classic-text-area --> ez-icon
|
|
73
|
+
style ez-classic-text-area fill:#f9f,stroke:#333,stroke-width:4px
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
----------------------------------------------
|
|
77
|
+
|
|
78
|
+
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
- [ez-breadcrumb](../ez-breadcrumb)
|
|
27
27
|
- [ez-button](../ez-button)
|
|
28
28
|
- [ez-chip](../ez-chip)
|
|
29
|
+
- [ez-classic-input](../ez-classic-input)
|
|
30
|
+
- [ez-classic-text-area](../ez-classic-text-area)
|
|
29
31
|
- [ez-collapsible-box](../ez-collapsible-box)
|
|
30
32
|
- [ez-combo-box](../ez-combo-box)
|
|
31
33
|
- [ez-dialog](../ez-dialog)
|
|
@@ -33,6 +35,7 @@
|
|
|
33
35
|
- [ez-file-item](../ez-file-item)
|
|
34
36
|
- [ez-filter-input](../ez-filter-input)
|
|
35
37
|
- [ez-grid](../ez-grid)
|
|
38
|
+
- [ez-list-item](../ez-list-item)
|
|
36
39
|
- [ez-modal-container](../ez-modal-container)
|
|
37
40
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
38
41
|
- [ez-rich-toolbar-item](../ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item)
|
|
@@ -59,6 +62,8 @@ graph TD;
|
|
|
59
62
|
ez-breadcrumb --> ez-icon
|
|
60
63
|
ez-button --> ez-icon
|
|
61
64
|
ez-chip --> ez-icon
|
|
65
|
+
ez-classic-input --> ez-icon
|
|
66
|
+
ez-classic-text-area --> ez-icon
|
|
62
67
|
ez-collapsible-box --> ez-icon
|
|
63
68
|
ez-combo-box --> ez-icon
|
|
64
69
|
ez-dialog --> ez-icon
|
|
@@ -66,6 +71,7 @@ graph TD;
|
|
|
66
71
|
ez-file-item --> ez-icon
|
|
67
72
|
ez-filter-input --> ez-icon
|
|
68
73
|
ez-grid --> ez-icon
|
|
74
|
+
ez-list-item --> ez-icon
|
|
69
75
|
ez-modal-container --> ez-icon
|
|
70
76
|
ez-multi-selection-list --> ez-icon
|
|
71
77
|
ez-rich-toolbar-item --> ez-icon
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# ez-list-item
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ----------- | ------------ | ------------------------------------------- | -------- | ----------- |
|
|
12
|
+
| `iconName` | `icon-name` | Nome do ícone que deve ser exibido no item. | `string` | `undefined` |
|
|
13
|
+
| `text` | `text` | Texto do item da lista. | `string` | `undefined` |
|
|
14
|
+
| `titleText` | `title-text` | Título do item da lista. | `string` | `undefined` |
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Dependencies
|
|
18
|
+
|
|
19
|
+
### Depends on
|
|
20
|
+
|
|
21
|
+
- [ez-icon](../ez-icon)
|
|
22
|
+
|
|
23
|
+
### Graph
|
|
24
|
+
```mermaid
|
|
25
|
+
graph TD;
|
|
26
|
+
ez-list-item --> ez-icon
|
|
27
|
+
style ez-list-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
----------------------------------------------
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## CSS Variables
|
|
36
|
+
| Variable | Description |
|
|
37
|
+
|-|-|
|
|
38
|
+
| --ez-list-item\_\_title--color | Define a cor do título do item da lista. |
|
|
39
|
+
| --ez-list-item\_\_text--color | Define a cor do texto do item da lista. |
|
|
40
|
+
| --ez-list-item\_\_icon--color | Define a cor do ícone do item da lista. |
|
|
41
|
+
| --ez-list-item\_\_background--color | Define a cor do background do item da lista. |
|
|
42
|
+
| --ez-list-item\_\_border--color-hover | Define a cor da borda do item da lista com hover. |
|
|
43
|
+
| --ez-list-item\_\_min-width | Define a largura mínima do componente. |
|