@sankhyalabs/ezui-docs 7.1.0-dev.20 → 7.1.0-dev.22
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-calendar/readme.md +4 -0
- package/components/ez-card-item/readme.md +4 -0
- package/components/ez-classic-combo-box/readme.md +11 -3
- package/components/ez-classic-date-input/readme.md +111 -0
- package/components/ez-classic-date-time-input/readme.md +111 -0
- package/components/ez-classic-input/readme.md +22 -1
- package/components/ez-classic-number-input/readme.md +107 -0
- package/components/ez-classic-search/readme.md +162 -0
- package/components/ez-classic-search/subcomponent/classic-search-list/readme.md +72 -0
- package/components/ez-classic-search-plus/readme.md +168 -0
- package/components/ez-classic-search-plus/subcomponent/ez-search-result-list/readme.md +90 -0
- package/components/ez-classic-text-area/readme.md +5 -0
- package/components/ez-classic-time-input/readme.md +88 -0
- package/components/ez-form/readme.md +46 -9
- package/components/ez-form-view/readme.md +54 -6
- package/components/ez-icon/readme.md +2 -0
- package/components/ez-image-input/readme.md +77 -0
- package/components/ez-popover-plus/readme.md +8 -0
- package/components/ez-popup/readme.md +2 -0
- package/components/ez-rich-text/readme.md +1 -1
- package/components/ez-skeleton/readme.md +4 -0
- package/package.json +1 -1
|
@@ -52,10 +52,12 @@ Type: `Promise<void>`
|
|
|
52
52
|
|
|
53
53
|
- [ez-actions-button](../ez-actions-button)
|
|
54
54
|
- [ez-alert-list](../ez-alert-list)
|
|
55
|
+
- [ez-classic-search](../ez-classic-search)
|
|
55
56
|
- [ez-dialog](../ez-dialog)
|
|
56
57
|
- [ez-double-list](../ez-double-list)
|
|
57
58
|
- [ez-grid](../ez-grid)
|
|
58
59
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
60
|
+
- [ez-image-input](../ez-image-input)
|
|
59
61
|
- [ez-modal-container](../ez-modal-container)
|
|
60
62
|
- [ez-pagination](../ez-pagination)
|
|
61
63
|
- [ez-popup](../ez-popup)
|
|
@@ -76,10 +78,12 @@ graph TD;
|
|
|
76
78
|
ez-button --> ez-icon
|
|
77
79
|
ez-actions-button --> ez-button
|
|
78
80
|
ez-alert-list --> ez-button
|
|
81
|
+
ez-classic-search --> ez-button
|
|
79
82
|
ez-dialog --> ez-button
|
|
80
83
|
ez-double-list --> ez-button
|
|
81
84
|
ez-grid --> ez-button
|
|
82
85
|
ez-guide-navigator --> ez-button
|
|
86
|
+
ez-image-input --> ez-button
|
|
83
87
|
ez-modal-container --> ez-button
|
|
84
88
|
ez-pagination --> ez-button
|
|
85
89
|
ez-popup --> ez-button
|
|
@@ -70,12 +70,16 @@ Type: `Promise<void>`
|
|
|
70
70
|
|
|
71
71
|
### Used by
|
|
72
72
|
|
|
73
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
74
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
73
75
|
- [ez-date-input](../ez-date-input)
|
|
74
76
|
- [ez-date-time-input](../ez-date-time-input)
|
|
75
77
|
|
|
76
78
|
### Graph
|
|
77
79
|
```mermaid
|
|
78
80
|
graph TD;
|
|
81
|
+
ez-classic-date-input --> ez-calendar
|
|
82
|
+
ez-classic-date-time-input --> ez-calendar
|
|
79
83
|
ez-date-input --> ez-calendar
|
|
80
84
|
ez-date-time-input --> ez-calendar
|
|
81
85
|
style ez-calendar fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -25,12 +25,16 @@
|
|
|
25
25
|
|
|
26
26
|
### Used by
|
|
27
27
|
|
|
28
|
+
- [classic-search-list](../ez-classic-search/subcomponent/classic-search-list)
|
|
29
|
+
- [ez-classic-search-result-list](../ez-classic-search-plus/subcomponent/ez-search-result-list)
|
|
28
30
|
- [ez-search-result-list](../ez-search-plus/subcomponent/ez-search-result-list)
|
|
29
31
|
- [search-list](../ez-search/subcomponent/search-list)
|
|
30
32
|
|
|
31
33
|
### Graph
|
|
32
34
|
```mermaid
|
|
33
35
|
graph TD;
|
|
36
|
+
classic-search-list --> ez-card-item
|
|
37
|
+
ez-classic-search-result-list --> ez-card-item
|
|
34
38
|
ez-search-result-list --> ez-card-item
|
|
35
39
|
search-list --> ez-card-item
|
|
36
40
|
style ez-card-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -18,12 +18,14 @@
|
|
|
18
18
|
| `options` | -- | Array com as opções do ez-classic-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IOption[]` | `undefined` |
|
|
19
19
|
| `placeholder` | `placeholder` | Placeholder do combo box | `string` | `undefined` |
|
|
20
20
|
| `readonly` | `readonly` | Define se o combo box é somente leitura. | `boolean` | `false` |
|
|
21
|
+
| `required` | `required` | Define se o input é obrigatório (visualmente) | `boolean` | `false` |
|
|
22
|
+
| `size` | `size` | Tamanho do input | `"default" \| "small" \| "xsmall"` | `"default"` |
|
|
21
23
|
| `state` | `state` | Estado visual do combo box: default, error, success ou warning. | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
22
24
|
| `suppressEmptyOption` | `suppress-empty-option` | Se true remove a opção vazia da lista. | `boolean` | `false` |
|
|
23
25
|
| `suppressSearch` | `suppress-search` | Se true desabilita a digitação dentro do componente. | `boolean` | `false` |
|
|
24
26
|
| `textEmptyOption` | `text-empty-option` | Texto a ser apresentado na opção de valor nulo. | `string` | `undefined` |
|
|
25
27
|
| `titleIcon` | `title-icon` | Título do ícone (tooltip). | `string` | `undefined` |
|
|
26
|
-
| `value` |
|
|
28
|
+
| `value` | `value` | Valor do combo box. | `IOption \| string` | `null` |
|
|
27
29
|
|
|
28
30
|
|
|
29
31
|
## Events
|
|
@@ -69,7 +71,7 @@ Type: `Promise<void>`
|
|
|
69
71
|
|
|
70
72
|
---
|
|
71
73
|
|
|
72
|
-
### `setValue(option: IOption) => Promise<void>`
|
|
74
|
+
### `setValue(option: IOption | string) => Promise<void>`
|
|
73
75
|
|
|
74
76
|
|
|
75
77
|
|
|
@@ -92,6 +94,10 @@ Type: `Promise<void>`
|
|
|
92
94
|
|
|
93
95
|
## Dependencies
|
|
94
96
|
|
|
97
|
+
### Used by
|
|
98
|
+
|
|
99
|
+
- [ez-form-view](../ez-form-view)
|
|
100
|
+
|
|
95
101
|
### Depends on
|
|
96
102
|
|
|
97
103
|
- [ez-classic-input](../ez-classic-input)
|
|
@@ -103,6 +109,7 @@ graph TD;
|
|
|
103
109
|
ez-classic-combo-box --> ez-classic-input
|
|
104
110
|
ez-classic-combo-box --> ez-popover-core
|
|
105
111
|
ez-classic-input --> ez-icon
|
|
112
|
+
ez-form-view --> ez-classic-combo-box
|
|
106
113
|
style ez-classic-combo-box fill:#f9f,stroke:#333,stroke-width:4px
|
|
107
114
|
```
|
|
108
115
|
|
|
@@ -128,4 +135,5 @@ graph TD;
|
|
|
128
135
|
| --ez-classic-combo-box-scrollbar-color | Define a cor da scrollbar. |
|
|
129
136
|
| --ez-classic-combo-box-no-results-margin | Define a margem do texto "sem resultados". |
|
|
130
137
|
| --ez-classic-combo-box-item-text-color | Define a cor do texto dos itens. |
|
|
131
|
-
| --ez-classic-combo-box-item-min-height | Define a altura mínima dos itens da lista. |
|
|
138
|
+
| --ez-classic-combo-box-item-min-height | Define a altura mínima dos itens da lista. |
|
|
139
|
+
| --ez-classic-combo-box-width | Define a largura do componente. |
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# ez-classic-date-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | --------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo ser apresentado como título do campo. | `string` | `undefined` |
|
|
13
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
14
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
15
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
16
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
17
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
18
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
19
|
+
| `required` | `required` | Define se o campo é obrigatório | `boolean` | `false` |
|
|
20
|
+
| `size` | `size` | Tamanho do input | `"default" \| "small" \| "xsmall"` | `"default"` |
|
|
21
|
+
| `value` | -- | Define o valor do campo. | `Date` | `undefined` |
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Events
|
|
25
|
+
|
|
26
|
+
| Event | Description | Type |
|
|
27
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------- |
|
|
28
|
+
| `ezCancelWaitingChange` | Emitido quando não foi possível completar a alteração entre o evento ezStartChange e ezChange. | `CustomEvent<void>` |
|
|
29
|
+
| `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent<Date>` |
|
|
30
|
+
| `ezInput` | Emitido quando o usuário digita uma data válida no campo. | `CustomEvent<Date>` |
|
|
31
|
+
| `ezStartChange` | Emitido ao iniciar a alteração (digitação incompleta). | `CustomEvent<WaitingChange>` |
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Methods
|
|
35
|
+
|
|
36
|
+
### `getValueAsync() => Promise<Date>`
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
#### Returns
|
|
41
|
+
|
|
42
|
+
Type: `Promise<Date>`
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
### `isInvalid() => Promise<boolean>`
|
|
47
|
+
|
|
48
|
+
Retorna se o conteúdo é inválido.
|
|
49
|
+
|
|
50
|
+
#### Returns
|
|
51
|
+
|
|
52
|
+
Type: `Promise<boolean>`
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
### `setBlur() => Promise<void>`
|
|
57
|
+
|
|
58
|
+
Remove o foco do campo.
|
|
59
|
+
|
|
60
|
+
#### Returns
|
|
61
|
+
|
|
62
|
+
Type: `Promise<void>`
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### `setFocus(options?: TFocusOptions) => Promise<void>`
|
|
67
|
+
|
|
68
|
+
Aplica o foco no campo.
|
|
69
|
+
|
|
70
|
+
#### Returns
|
|
71
|
+
|
|
72
|
+
Type: `Promise<void>`
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
## Dependencies
|
|
78
|
+
|
|
79
|
+
### Used by
|
|
80
|
+
|
|
81
|
+
- [ez-form-view](../ez-form-view)
|
|
82
|
+
|
|
83
|
+
### Depends on
|
|
84
|
+
|
|
85
|
+
- [ez-classic-input](../ez-classic-input)
|
|
86
|
+
- [ez-popover-plus](../ez-popover-plus)
|
|
87
|
+
- [ez-calendar](../ez-calendar)
|
|
88
|
+
|
|
89
|
+
### Graph
|
|
90
|
+
```mermaid
|
|
91
|
+
graph TD;
|
|
92
|
+
ez-classic-date-input --> ez-classic-input
|
|
93
|
+
ez-classic-date-input --> ez-popover-plus
|
|
94
|
+
ez-classic-date-input --> ez-calendar
|
|
95
|
+
ez-classic-input --> ez-icon
|
|
96
|
+
ez-popover-plus --> ez-popover-core
|
|
97
|
+
ez-form-view --> ez-classic-date-input
|
|
98
|
+
style ez-classic-date-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
----------------------------------------------
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## CSS Variables
|
|
107
|
+
| Variable | Description |
|
|
108
|
+
|-|-|
|
|
109
|
+
| --ez-classic-date-input\_\_input--background-color | Define a cor de fundo do input. |
|
|
110
|
+
| --ez-classic-date-input\_\_input--border-color | Define a cor da borda do input. |
|
|
111
|
+
| --ez-classic-date-input\_\_calendar-image | Contém a imagem do calendário. |
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
# ez-classic-date-time-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | --------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo ser apresentado como título do campo. | `string` | `undefined` |
|
|
13
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
14
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
15
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
16
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
17
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
18
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
19
|
+
| `required` | `required` | Define se o campo é obrigatório | `boolean` | `false` |
|
|
20
|
+
| `showSeconds` | `show-seconds` | Se true considera segundos. | `boolean` | `false` |
|
|
21
|
+
| `size` | `size` | Tamanho do input | `"default" \| "small" \| "xsmall"` | `"default"` |
|
|
22
|
+
| `value` | -- | Define o valor do campo. | `Date` | `undefined` |
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Events
|
|
26
|
+
|
|
27
|
+
| Event | Description | Type |
|
|
28
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------- |
|
|
29
|
+
| `ezCancelWaitingChange` | Emitido quando não foi possível completar a alteração entre o evento ezStartChange e ezChange. | `CustomEvent<void>` |
|
|
30
|
+
| `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent<Date>` |
|
|
31
|
+
| `ezStartChange` | Emitido ao iniciar a alteração (digitação incompleta). | `CustomEvent<WaitingChange>` |
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Methods
|
|
35
|
+
|
|
36
|
+
### `getValueAsync() => Promise<Date>`
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
#### Returns
|
|
41
|
+
|
|
42
|
+
Type: `Promise<Date>`
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
### `isInvalid() => Promise<boolean>`
|
|
47
|
+
|
|
48
|
+
Retorna se o conteúdo é inválido.
|
|
49
|
+
|
|
50
|
+
#### Returns
|
|
51
|
+
|
|
52
|
+
Type: `Promise<boolean>`
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
### `setBlur() => Promise<void>`
|
|
57
|
+
|
|
58
|
+
Remove o foco do campo.
|
|
59
|
+
|
|
60
|
+
#### Returns
|
|
61
|
+
|
|
62
|
+
Type: `Promise<void>`
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
### `setFocus(options?: OptionsSetFocus) => Promise<void>`
|
|
67
|
+
|
|
68
|
+
Aplica o foco no campo.
|
|
69
|
+
|
|
70
|
+
#### Returns
|
|
71
|
+
|
|
72
|
+
Type: `Promise<void>`
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
## Dependencies
|
|
78
|
+
|
|
79
|
+
### Used by
|
|
80
|
+
|
|
81
|
+
- [ez-form-view](../ez-form-view)
|
|
82
|
+
|
|
83
|
+
### Depends on
|
|
84
|
+
|
|
85
|
+
- [ez-classic-input](../ez-classic-input)
|
|
86
|
+
- [ez-popover-plus](../ez-popover-plus)
|
|
87
|
+
- [ez-calendar](../ez-calendar)
|
|
88
|
+
|
|
89
|
+
### Graph
|
|
90
|
+
```mermaid
|
|
91
|
+
graph TD;
|
|
92
|
+
ez-classic-date-time-input --> ez-classic-input
|
|
93
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
94
|
+
ez-classic-date-time-input --> ez-calendar
|
|
95
|
+
ez-classic-input --> ez-icon
|
|
96
|
+
ez-popover-plus --> ez-popover-core
|
|
97
|
+
ez-form-view --> ez-classic-date-time-input
|
|
98
|
+
style ez-classic-date-time-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
----------------------------------------------
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
## CSS Variables
|
|
107
|
+
| Variable | Description |
|
|
108
|
+
|-|-|
|
|
109
|
+
| --ez-classic-date-input\_\_input--background-color | Define a cor de fundo do input. |
|
|
110
|
+
| --ez-classic-date-input\_\_input--border-color | Define a cor da borda do input. |
|
|
111
|
+
| --ez-classic-date-input\_\_calendar-image | Contém a imagem do calendário. |
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
|
|
12
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
13
|
| `enabled` | `enabled` | Define se o input está habilitado | `boolean` | `true` |
|
|
14
|
+
| `errorMessage` | `error-message` | Texto de erro exibido abaixo do input | `string` | `undefined` |
|
|
14
15
|
| `helpText` | `help-text` | Texto de ajuda exibido abaixo do input | `string` | `undefined` |
|
|
15
16
|
| `label` | `label` | Texto do label exibido acima do input | `string` | `undefined` |
|
|
16
17
|
| `leftIconClickable` | `left-icon-clickable` | Define se o ícone da esquerda é clicável | `boolean` | `false` |
|
|
@@ -22,9 +23,11 @@
|
|
|
22
23
|
| `name` | `name` | Nome do input | `string` | `undefined` |
|
|
23
24
|
| `placeholder` | `placeholder` | Placeholder do input | `string` | `undefined` |
|
|
24
25
|
| `readonly` | `readonly` | Define se o input é somente leitura | `boolean` | `false` |
|
|
26
|
+
| `required` | `required` | Define se o input é obrigatório (visualmente) | `boolean` | `false` |
|
|
25
27
|
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável | `boolean` | `false` |
|
|
26
28
|
| `rightIconName` | `right-icon-name` | Nome do ícone à direita | `string` | `undefined` |
|
|
27
29
|
| `rightIconTooltip` | `right-icon-tooltip` | Título do ícone à direita (tooltip) | `string` | `undefined` |
|
|
30
|
+
| `size` | `size` | Tamanho do input | `"default" \| "small" \| "xsmall"` | `"default"` |
|
|
28
31
|
| `state` | `state` | Estado visual do input: default, error, success ou warning | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
29
32
|
| `type` | `type` | Tipo do input (ex: text, password, email, etc) | `string` | `'text'` |
|
|
30
33
|
| `value` | `value` | Valor do input | `string` | `undefined` |
|
|
@@ -68,6 +71,13 @@ Type: `Promise<void>`
|
|
|
68
71
|
### Used by
|
|
69
72
|
|
|
70
73
|
- [ez-classic-combo-box](../ez-classic-combo-box)
|
|
74
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
75
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
76
|
+
- [ez-classic-number-input](../ez-classic-number-input)
|
|
77
|
+
- [ez-classic-search](../ez-classic-search)
|
|
78
|
+
- [ez-classic-search-plus](../ez-classic-search-plus)
|
|
79
|
+
- [ez-classic-time-input](../ez-classic-time-input)
|
|
80
|
+
- [ez-form-view](../ez-form-view)
|
|
71
81
|
|
|
72
82
|
### Depends on
|
|
73
83
|
|
|
@@ -78,6 +88,13 @@ Type: `Promise<void>`
|
|
|
78
88
|
graph TD;
|
|
79
89
|
ez-classic-input --> ez-icon
|
|
80
90
|
ez-classic-combo-box --> ez-classic-input
|
|
91
|
+
ez-classic-date-input --> ez-classic-input
|
|
92
|
+
ez-classic-date-time-input --> ez-classic-input
|
|
93
|
+
ez-classic-number-input --> ez-classic-input
|
|
94
|
+
ez-classic-search --> ez-classic-input
|
|
95
|
+
ez-classic-search-plus --> ez-classic-input
|
|
96
|
+
ez-classic-time-input --> ez-classic-input
|
|
97
|
+
ez-form-view --> ez-classic-input
|
|
81
98
|
style ez-classic-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
82
99
|
```
|
|
83
100
|
|
|
@@ -101,4 +118,8 @@ graph TD;
|
|
|
101
118
|
| --ez-classic-input--placeholder-color | Define a cor do texto do placeholder do input. |
|
|
102
119
|
| --ez-classic-input--icon-color | Define a cor do ícone do input. |
|
|
103
120
|
| --ez-classic-input--helptext-color | Define a cor do texto de ajuda do input. |
|
|
104
|
-
| --ez-classic-input--height | Define a altura do input. |
|
|
121
|
+
| --ez-classic-input--height | Define a altura do input. |
|
|
122
|
+
| --ez-classic-input--height-small | Define a altura do input. |
|
|
123
|
+
| --ez-classic-input--height-xsmall | Define a altura do input. |
|
|
124
|
+
| --ez-classic-input--gap | Define o gap entre elementos internos do input. |
|
|
125
|
+
| --ez-classic-input--padding-inline | Define o padding horizontal do input. |
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# ez-classic-number-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
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
|
+
| `required` | `required` | Define se o input é obrigatório (visualmente) | `boolean` | `false` |
|
|
23
|
+
| `size` | `size` | Tamanho do input | `"default" \| "small" \| "xsmall"` | `"default"` |
|
|
24
|
+
| `value` | `value` | Define o valor do campo. | `number` | `undefined` |
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## Events
|
|
28
|
+
|
|
29
|
+
| Event | Description | Type |
|
|
30
|
+
| ----------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------- |
|
|
31
|
+
| `ezCancelWaitingChange` | Emitido quando não foi possível completar a alteração entre o evento ezStartChange e ezChange. | `CustomEvent<void>` |
|
|
32
|
+
| `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent<number>` |
|
|
33
|
+
| `ezStartChange` | Emitido ao iniciar a alteração (digitação incompleta). | `CustomEvent<WaitingChange>` |
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
## Methods
|
|
37
|
+
|
|
38
|
+
### `getValueAsync() => Promise<number>`
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
#### Returns
|
|
43
|
+
|
|
44
|
+
Type: `Promise<number>`
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
### `isInvalid() => Promise<boolean>`
|
|
49
|
+
|
|
50
|
+
Retorna se o conteúdo é inválido.
|
|
51
|
+
|
|
52
|
+
#### Returns
|
|
53
|
+
|
|
54
|
+
Type: `Promise<boolean>`
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
### `setBlur() => Promise<void>`
|
|
59
|
+
|
|
60
|
+
Remove o foco do campo.
|
|
61
|
+
|
|
62
|
+
#### Returns
|
|
63
|
+
|
|
64
|
+
Type: `Promise<void>`
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
### `setFocus(options?: OptionsSetFocus) => Promise<void>`
|
|
69
|
+
|
|
70
|
+
Aplica o foco no campo.
|
|
71
|
+
|
|
72
|
+
#### Returns
|
|
73
|
+
|
|
74
|
+
Type: `Promise<void>`
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## Dependencies
|
|
80
|
+
|
|
81
|
+
### Used by
|
|
82
|
+
|
|
83
|
+
- [ez-form-view](../ez-form-view)
|
|
84
|
+
|
|
85
|
+
### Depends on
|
|
86
|
+
|
|
87
|
+
- [ez-classic-input](../ez-classic-input)
|
|
88
|
+
|
|
89
|
+
### Graph
|
|
90
|
+
```mermaid
|
|
91
|
+
graph TD;
|
|
92
|
+
ez-classic-number-input --> ez-classic-input
|
|
93
|
+
ez-classic-input --> ez-icon
|
|
94
|
+
ez-form-view --> ez-classic-number-input
|
|
95
|
+
style ez-classic-number-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
----------------------------------------------
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
## CSS Variables
|
|
104
|
+
| Variable | Description |
|
|
105
|
+
|-|-|
|
|
106
|
+
| --ez-classic-number-input\_\_min-width | Define a largura maxima do componente. |
|
|
107
|
+
| --ez-classic-number-input\_\_max-width | Define a largura minima do componente. |
|