@sankhyalabs/ezui-docs 7.1.2 → 7.2.0-dev.2
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 +6 -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 +12 -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 +25 -19
- package/components/ez-classic-time-input/readme.md +88 -0
- package/components/ez-form/readme.md +47 -9
- package/components/ez-form-view/readme.md +57 -6
- package/components/ez-grid/readme.md +1 -0
- package/components/ez-grid/subcomponents/readme.md +1 -0
- package/components/ez-grid-view/readme.md +1 -0
- package/components/ez-icon/readme.md +2 -0
- package/components/ez-image-input/readme.md +77 -0
- package/components/ez-modal/readme.md +2 -1
- package/components/ez-multi-selection-list/readme.md +2 -0
- package/components/ez-popover-plus/readme.md +8 -0
- package/components/ez-popup/readme.md +2 -0
- package/components/ez-search/readme.md +6 -1
- package/components/ez-skeleton/readme.md +4 -0
- package/package.json +1 -1
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# ez-classic-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` | `value` | Define o valor do campo. | `number` | `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<number>` |
|
|
31
|
+
| `ezStartChange` | Emitido ao iniciar a alteração (digitação incompleta). | `CustomEvent<WaitingChange>` |
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## Methods
|
|
35
|
+
|
|
36
|
+
### `isInvalid() => Promise<boolean>`
|
|
37
|
+
|
|
38
|
+
Retorna se o conteúdo é inválido.
|
|
39
|
+
|
|
40
|
+
#### Returns
|
|
41
|
+
|
|
42
|
+
Type: `Promise<boolean>`
|
|
43
|
+
|
|
44
|
+
---
|
|
45
|
+
|
|
46
|
+
### `setBlur() => Promise<void>`
|
|
47
|
+
|
|
48
|
+
Remove o foco do campo.
|
|
49
|
+
|
|
50
|
+
#### Returns
|
|
51
|
+
|
|
52
|
+
Type: `Promise<void>`
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
### `setFocus({ selectText }: TFocusOptions) => Promise<void>`
|
|
57
|
+
|
|
58
|
+
Aplica o foco no campo.
|
|
59
|
+
|
|
60
|
+
#### Returns
|
|
61
|
+
|
|
62
|
+
Type: `Promise<void>`
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
## Dependencies
|
|
68
|
+
|
|
69
|
+
### Used by
|
|
70
|
+
|
|
71
|
+
- [ez-form-view](../ez-form-view)
|
|
72
|
+
|
|
73
|
+
### Depends on
|
|
74
|
+
|
|
75
|
+
- [ez-classic-input](../ez-classic-input)
|
|
76
|
+
|
|
77
|
+
### Graph
|
|
78
|
+
```mermaid
|
|
79
|
+
graph TD;
|
|
80
|
+
ez-classic-time-input --> ez-classic-input
|
|
81
|
+
ez-classic-input --> ez-icon
|
|
82
|
+
ez-form-view --> ez-classic-time-input
|
|
83
|
+
style ez-classic-time-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
----------------------------------------------
|
|
87
|
+
|
|
88
|
+
|
|
@@ -7,15 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type
|
|
11
|
-
| ------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
-
| `config` | -- | Configuração do formulário. | `IFormConfig`
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `config` | -- | Configuração do formulário. | `IFormConfig` | `undefined` |
|
|
13
|
+
| `customUiBuilders` | -- | Define construtores customizados para tipos de campos específicos | `Map<UserInterface, (field: IFormViewField, context?: IFieldBuilderContext) => HTMLElement>` | `new Map()` |
|
|
14
|
+
| `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined` |
|
|
15
|
+
| `elementFocusSearchField` | -- | Define uma ancoragem | `HTMLElement` | `undefined` |
|
|
16
|
+
| `fieldToFocus` | `field-to-focus` | Determina o campo que deve ficar em evidência. | `string` | `undefined` |
|
|
17
|
+
| `onlyStaticFields` | `only-static-fields` | Define se os campos que serão apresentados são todos estáticos. Quando verdadeira, ocorrerá no DataBinder o bind dos campos com o DataUnit. | `boolean` | `false` |
|
|
18
|
+
| `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` |
|
|
19
|
+
| `useSearchField` | `use-search-field` | Define se o formulario deve exibir um buscador de coluna com uso do Ctrl+F | `boolean` | `true` |
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
## Events
|
|
@@ -81,17 +82,27 @@ graph TD;
|
|
|
81
82
|
ez-form-view --> ez-custom-form-input
|
|
82
83
|
ez-form-view --> ez-collapsible-box
|
|
83
84
|
ez-form-view --> ez-check
|
|
85
|
+
ez-form-view --> ez-classic-combo-box
|
|
84
86
|
ez-form-view --> ez-combo-box
|
|
87
|
+
ez-form-view --> ez-classic-date-input
|
|
85
88
|
ez-form-view --> ez-date-input
|
|
89
|
+
ez-form-view --> ez-classic-time-input
|
|
86
90
|
ez-form-view --> ez-time-input
|
|
91
|
+
ez-form-view --> ez-classic-date-time-input
|
|
87
92
|
ez-form-view --> ez-date-time-input
|
|
88
93
|
ez-form-view --> ez-upload
|
|
94
|
+
ez-form-view --> ez-classic-number-input
|
|
89
95
|
ez-form-view --> ez-number-input
|
|
96
|
+
ez-form-view --> ez-classic-text-area
|
|
90
97
|
ez-form-view --> ez-text-area
|
|
98
|
+
ez-form-view --> ez-classic-input
|
|
91
99
|
ez-form-view --> ez-text-input
|
|
100
|
+
ez-form-view --> ez-classic-search-plus
|
|
92
101
|
ez-form-view --> ez-search-plus
|
|
102
|
+
ez-form-view --> ez-classic-search
|
|
93
103
|
ez-form-view --> ez-search
|
|
94
104
|
ez-form-view --> ez-rich-text
|
|
105
|
+
ez-form-view --> ez-image-input
|
|
95
106
|
ez-collapsible-box --> ez-icon
|
|
96
107
|
ez-collapsible-box --> ez-text-edit
|
|
97
108
|
ez-text-edit --> ez-text-input
|
|
@@ -99,28 +110,51 @@ graph TD;
|
|
|
99
110
|
ez-text-input --> ez-tooltip
|
|
100
111
|
ez-text-input --> ez-icon
|
|
101
112
|
ez-button --> ez-icon
|
|
113
|
+
ez-classic-combo-box --> ez-classic-input
|
|
114
|
+
ez-classic-combo-box --> ez-popover-core
|
|
115
|
+
ez-classic-input --> ez-icon
|
|
102
116
|
ez-combo-box --> ez-text-input
|
|
103
117
|
ez-combo-box --> ez-icon
|
|
104
118
|
ez-combo-box --> ez-popover-plus
|
|
105
119
|
ez-combo-box --> ez-combo-box-list
|
|
106
120
|
ez-popover-plus --> ez-popover-core
|
|
121
|
+
ez-classic-date-input --> ez-classic-input
|
|
122
|
+
ez-classic-date-input --> ez-popover-plus
|
|
123
|
+
ez-classic-date-input --> ez-calendar
|
|
107
124
|
ez-date-input --> ez-text-input
|
|
108
125
|
ez-date-input --> ez-popover-plus
|
|
109
126
|
ez-date-input --> ez-calendar
|
|
127
|
+
ez-classic-time-input --> ez-classic-input
|
|
110
128
|
ez-time-input --> ez-text-input
|
|
111
129
|
ez-time-input --> ez-icon
|
|
130
|
+
ez-classic-date-time-input --> ez-classic-input
|
|
131
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
132
|
+
ez-classic-date-time-input --> ez-calendar
|
|
112
133
|
ez-date-time-input --> ez-text-input
|
|
113
134
|
ez-date-time-input --> ez-popover-plus
|
|
114
135
|
ez-date-time-input --> ez-calendar
|
|
136
|
+
ez-classic-number-input --> ez-classic-input
|
|
115
137
|
ez-number-input --> ez-text-input
|
|
138
|
+
ez-classic-text-area --> ez-icon
|
|
116
139
|
ez-text-area --> ez-tooltip
|
|
117
140
|
ez-text-area --> ez-icon
|
|
141
|
+
ez-classic-search-plus --> ez-classic-input
|
|
142
|
+
ez-classic-search-plus --> ez-popover-plus
|
|
143
|
+
ez-classic-search-plus --> ez-classic-search-result-list
|
|
144
|
+
ez-classic-search-result-list --> ez-card-item
|
|
145
|
+
ez-classic-search-result-list --> ez-skeleton
|
|
118
146
|
ez-search-plus --> ez-icon
|
|
119
147
|
ez-search-plus --> ez-text-input
|
|
120
148
|
ez-search-plus --> ez-popover-plus
|
|
121
149
|
ez-search-plus --> ez-search-result-list
|
|
122
150
|
ez-search-result-list --> ez-card-item
|
|
123
151
|
ez-search-result-list --> ez-skeleton
|
|
152
|
+
ez-classic-search --> ez-button
|
|
153
|
+
ez-classic-search --> ez-classic-input
|
|
154
|
+
ez-classic-search --> ez-popover-plus
|
|
155
|
+
ez-classic-search --> classic-search-list
|
|
156
|
+
classic-search-list --> ez-card-item
|
|
157
|
+
ez-search --> ez-button
|
|
124
158
|
ez-search --> ez-text-input
|
|
125
159
|
ez-search --> ez-icon
|
|
126
160
|
ez-search --> ez-popover-plus
|
|
@@ -149,6 +183,10 @@ graph TD;
|
|
|
149
183
|
ez-simple-image-uploader --> ez-tooltip
|
|
150
184
|
ez-simple-image-uploader --> ez-text-input
|
|
151
185
|
ez-simple-image-uploader --> ez-icon
|
|
186
|
+
ez-image-input --> ez-skeleton
|
|
187
|
+
ez-image-input --> ez-button
|
|
188
|
+
ez-image-input --> ez-icon
|
|
189
|
+
ez-image-input --> ez-popup
|
|
152
190
|
style ez-form fill:#f9f,stroke:#333,stroke-width:4px
|
|
153
191
|
```
|
|
154
192
|
|
|
@@ -7,11 +7,13 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------ | --------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `customUiBuilders` | -- | Define construtores customizados para tipos de campos específicos | `Map<UserInterface, (field: IFormViewField, context?: IFieldBuilderContext) => HTMLElement>` | `new Map()` |
|
|
13
|
+
| `fields` | -- | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
|
|
14
|
+
| `formLayout` | `form-layout` | Define o layout do formulário. | `FormLayout.CASCADE \| FormLayout.CLASSIC_CASCADE \| FormLayout.CLASSIC_SIDE_BY_SIDE \| FormLayout.SIDE_BY_SIDE` | `undefined` |
|
|
15
|
+
| `selectedRecord` | -- | Define os registros da linha selecionada. | `Record` | `undefined` |
|
|
16
|
+
| `singleColumn` | `single-column` | Define se o formulario deve possuir apenas 1 coluna. | `boolean` | `false` |
|
|
15
17
|
|
|
16
18
|
|
|
17
19
|
## Events
|
|
@@ -66,17 +68,27 @@ Type: `Promise<void>`
|
|
|
66
68
|
- [ez-custom-form-input](custom-input)
|
|
67
69
|
- [ez-collapsible-box](../ez-collapsible-box)
|
|
68
70
|
- [ez-check](../ez-check)
|
|
71
|
+
- [ez-classic-combo-box](../ez-classic-combo-box)
|
|
69
72
|
- [ez-combo-box](../ez-combo-box)
|
|
73
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
70
74
|
- [ez-date-input](../ez-date-input)
|
|
75
|
+
- [ez-classic-time-input](../ez-classic-time-input)
|
|
71
76
|
- [ez-time-input](../ez-time-input)
|
|
77
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
72
78
|
- [ez-date-time-input](../ez-date-time-input)
|
|
73
79
|
- [ez-upload](../ez-upload)
|
|
80
|
+
- [ez-classic-number-input](../ez-classic-number-input)
|
|
74
81
|
- [ez-number-input](../ez-number-input)
|
|
82
|
+
- [ez-classic-text-area](../ez-classic-text-area)
|
|
75
83
|
- [ez-text-area](../ez-text-area)
|
|
84
|
+
- [ez-classic-input](../ez-classic-input)
|
|
76
85
|
- [ez-text-input](../ez-text-input)
|
|
86
|
+
- [ez-classic-search-plus](../ez-classic-search-plus)
|
|
77
87
|
- [ez-search-plus](../ez-search-plus)
|
|
88
|
+
- [ez-classic-search](../ez-classic-search)
|
|
78
89
|
- [ez-search](../ez-search)
|
|
79
90
|
- [ez-rich-text](../ez-rich-text)
|
|
91
|
+
- [ez-image-input](../ez-image-input)
|
|
80
92
|
|
|
81
93
|
### Graph
|
|
82
94
|
```mermaid
|
|
@@ -84,17 +96,27 @@ graph TD;
|
|
|
84
96
|
ez-form-view --> ez-custom-form-input
|
|
85
97
|
ez-form-view --> ez-collapsible-box
|
|
86
98
|
ez-form-view --> ez-check
|
|
99
|
+
ez-form-view --> ez-classic-combo-box
|
|
87
100
|
ez-form-view --> ez-combo-box
|
|
101
|
+
ez-form-view --> ez-classic-date-input
|
|
88
102
|
ez-form-view --> ez-date-input
|
|
103
|
+
ez-form-view --> ez-classic-time-input
|
|
89
104
|
ez-form-view --> ez-time-input
|
|
105
|
+
ez-form-view --> ez-classic-date-time-input
|
|
90
106
|
ez-form-view --> ez-date-time-input
|
|
91
107
|
ez-form-view --> ez-upload
|
|
108
|
+
ez-form-view --> ez-classic-number-input
|
|
92
109
|
ez-form-view --> ez-number-input
|
|
110
|
+
ez-form-view --> ez-classic-text-area
|
|
93
111
|
ez-form-view --> ez-text-area
|
|
112
|
+
ez-form-view --> ez-classic-input
|
|
94
113
|
ez-form-view --> ez-text-input
|
|
114
|
+
ez-form-view --> ez-classic-search-plus
|
|
95
115
|
ez-form-view --> ez-search-plus
|
|
116
|
+
ez-form-view --> ez-classic-search
|
|
96
117
|
ez-form-view --> ez-search
|
|
97
118
|
ez-form-view --> ez-rich-text
|
|
119
|
+
ez-form-view --> ez-image-input
|
|
98
120
|
ez-collapsible-box --> ez-icon
|
|
99
121
|
ez-collapsible-box --> ez-text-edit
|
|
100
122
|
ez-text-edit --> ez-text-input
|
|
@@ -102,28 +124,51 @@ graph TD;
|
|
|
102
124
|
ez-text-input --> ez-tooltip
|
|
103
125
|
ez-text-input --> ez-icon
|
|
104
126
|
ez-button --> ez-icon
|
|
127
|
+
ez-classic-combo-box --> ez-classic-input
|
|
128
|
+
ez-classic-combo-box --> ez-popover-core
|
|
129
|
+
ez-classic-input --> ez-icon
|
|
105
130
|
ez-combo-box --> ez-text-input
|
|
106
131
|
ez-combo-box --> ez-icon
|
|
107
132
|
ez-combo-box --> ez-popover-plus
|
|
108
133
|
ez-combo-box --> ez-combo-box-list
|
|
109
134
|
ez-popover-plus --> ez-popover-core
|
|
135
|
+
ez-classic-date-input --> ez-classic-input
|
|
136
|
+
ez-classic-date-input --> ez-popover-plus
|
|
137
|
+
ez-classic-date-input --> ez-calendar
|
|
110
138
|
ez-date-input --> ez-text-input
|
|
111
139
|
ez-date-input --> ez-popover-plus
|
|
112
140
|
ez-date-input --> ez-calendar
|
|
141
|
+
ez-classic-time-input --> ez-classic-input
|
|
113
142
|
ez-time-input --> ez-text-input
|
|
114
143
|
ez-time-input --> ez-icon
|
|
144
|
+
ez-classic-date-time-input --> ez-classic-input
|
|
145
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
146
|
+
ez-classic-date-time-input --> ez-calendar
|
|
115
147
|
ez-date-time-input --> ez-text-input
|
|
116
148
|
ez-date-time-input --> ez-popover-plus
|
|
117
149
|
ez-date-time-input --> ez-calendar
|
|
150
|
+
ez-classic-number-input --> ez-classic-input
|
|
118
151
|
ez-number-input --> ez-text-input
|
|
152
|
+
ez-classic-text-area --> ez-icon
|
|
119
153
|
ez-text-area --> ez-tooltip
|
|
120
154
|
ez-text-area --> ez-icon
|
|
155
|
+
ez-classic-search-plus --> ez-classic-input
|
|
156
|
+
ez-classic-search-plus --> ez-popover-plus
|
|
157
|
+
ez-classic-search-plus --> ez-classic-search-result-list
|
|
158
|
+
ez-classic-search-result-list --> ez-card-item
|
|
159
|
+
ez-classic-search-result-list --> ez-skeleton
|
|
121
160
|
ez-search-plus --> ez-icon
|
|
122
161
|
ez-search-plus --> ez-text-input
|
|
123
162
|
ez-search-plus --> ez-popover-plus
|
|
124
163
|
ez-search-plus --> ez-search-result-list
|
|
125
164
|
ez-search-result-list --> ez-card-item
|
|
126
165
|
ez-search-result-list --> ez-skeleton
|
|
166
|
+
ez-classic-search --> ez-button
|
|
167
|
+
ez-classic-search --> ez-classic-input
|
|
168
|
+
ez-classic-search --> ez-popover-plus
|
|
169
|
+
ez-classic-search --> classic-search-list
|
|
170
|
+
classic-search-list --> ez-card-item
|
|
171
|
+
ez-search --> ez-button
|
|
127
172
|
ez-search --> ez-text-input
|
|
128
173
|
ez-search --> ez-icon
|
|
129
174
|
ez-search --> ez-popover-plus
|
|
@@ -152,6 +197,10 @@ graph TD;
|
|
|
152
197
|
ez-simple-image-uploader --> ez-tooltip
|
|
153
198
|
ez-simple-image-uploader --> ez-text-input
|
|
154
199
|
ez-simple-image-uploader --> ez-icon
|
|
200
|
+
ez-image-input --> ez-skeleton
|
|
201
|
+
ez-image-input --> ez-button
|
|
202
|
+
ez-image-input --> ez-icon
|
|
203
|
+
ez-image-input --> ez-popup
|
|
155
204
|
ez-form --> ez-form-view
|
|
156
205
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
157
206
|
```
|
|
@@ -165,6 +214,8 @@ graph TD;
|
|
|
165
214
|
| Variable | Description |
|
|
166
215
|
|-|-|
|
|
167
216
|
| --ez-form-view\_\_item--min-width | Define o tamanho mínimo dos itens do formulário. |
|
|
217
|
+
| --ez-form-view\_\_long-item--min-width | Define o tamanho mínimo dos itens do formulário. |
|
|
168
218
|
| --ez-form-view\_\_item--max-width | Define o tamanho máximo dos itens do formulário. |
|
|
169
|
-
| --ez-form-view\_\
|
|
219
|
+
| --ez-form-view\_\_long-item--max-width | Define o tamanho máximo dos itens longos do formulário. |
|
|
220
|
+
| --ez-form-view\_\_item--gap | Define o colunas entre itens do formulário. |
|
|
170
221
|
| --ez-form-view\_\_item--padding | Define o padding do formulário. |
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
- [ez-file-item](../ez-file-item)
|
|
36
36
|
- [ez-filter-input](../ez-filter-input)
|
|
37
37
|
- [ez-grid](../ez-grid)
|
|
38
|
+
- [ez-image-input](../ez-image-input)
|
|
38
39
|
- [ez-list-item](../ez-list-item)
|
|
39
40
|
- [ez-modal-container](../ez-modal-container)
|
|
40
41
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
@@ -71,6 +72,7 @@ graph TD;
|
|
|
71
72
|
ez-file-item --> ez-icon
|
|
72
73
|
ez-filter-input --> ez-icon
|
|
73
74
|
ez-grid --> ez-icon
|
|
75
|
+
ez-image-input --> ez-icon
|
|
74
76
|
ez-list-item --> ez-icon
|
|
75
77
|
ez-modal-container --> ez-icon
|
|
76
78
|
ez-multi-selection-list --> ez-icon
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
# ez-image-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------- | --------------- | ---------------------------------------------------------- | --------- | ------------------ |
|
|
12
|
+
| `accept` | `accept` | Tipos de arquivo aceitos | `string` | `'image/*'` |
|
|
13
|
+
| `enabled` | `enabled` | Define se o componente está habilitado | `boolean` | `true` |
|
|
14
|
+
| `label` | `label` | Label exibido na área de upload | `string` | `undefined` |
|
|
15
|
+
| `loading` | `loading` | Define se o componente está em estado de carregamento | `boolean` | `false` |
|
|
16
|
+
| `maxFileSize` | `max-file-size` | Define o tamanho máximo do arquivo em bytes (padrão: 20MB) | `number` | `20 * 1024 * 1024` |
|
|
17
|
+
| `name` | `name` | Nome do componente | `string` | `undefined` |
|
|
18
|
+
| `value` | `value` | Valor da imagem em base64 | `string` | `undefined` |
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
## Events
|
|
22
|
+
|
|
23
|
+
| Event | Description | Type |
|
|
24
|
+
| ---------- | ------------------------------------------------ | --------------------- |
|
|
25
|
+
| `ezChange` | Evento disparado quando uma imagem é selecionada | `CustomEvent<string>` |
|
|
26
|
+
| `ezError` | Evento disparado quando ocorre um erro | `CustomEvent<string>` |
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
## Dependencies
|
|
30
|
+
|
|
31
|
+
### Used by
|
|
32
|
+
|
|
33
|
+
- [ez-form-view](../ez-form-view)
|
|
34
|
+
|
|
35
|
+
### Depends on
|
|
36
|
+
|
|
37
|
+
- [ez-skeleton](../ez-skeleton)
|
|
38
|
+
- [ez-button](../ez-button)
|
|
39
|
+
- [ez-icon](../ez-icon)
|
|
40
|
+
- [ez-popup](../ez-popup)
|
|
41
|
+
|
|
42
|
+
### Graph
|
|
43
|
+
```mermaid
|
|
44
|
+
graph TD;
|
|
45
|
+
ez-image-input --> ez-skeleton
|
|
46
|
+
ez-image-input --> ez-button
|
|
47
|
+
ez-image-input --> ez-icon
|
|
48
|
+
ez-image-input --> ez-popup
|
|
49
|
+
ez-button --> ez-icon
|
|
50
|
+
ez-popup --> ez-button
|
|
51
|
+
ez-form-view --> ez-image-input
|
|
52
|
+
style ez-image-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
----------------------------------------------
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
## CSS Variables
|
|
61
|
+
| Variable | Description |
|
|
62
|
+
|-|-|
|
|
63
|
+
| --ez-image-input--container-height | Define a altura do container de imagem. |
|
|
64
|
+
| --ez-image-input--container-width | Define a largura do container de imagem. |
|
|
65
|
+
| --ez-image-input--background-color | Define a cor de fundo do container. |
|
|
66
|
+
| --ez-image-input--border-color | Define a cor da borda do container. |
|
|
67
|
+
| --ez-image-input--border-color-hover | Define a cor da borda no estado de hover. |
|
|
68
|
+
| --ez-image-input--border-color-dragging | Define a cor da borda quando está sendo arrastado. |
|
|
69
|
+
| --ez-image-input--border-color-disabled | Define a cor da borda quando está desabilitado. |
|
|
70
|
+
| --ez-image-input--label-color | Define a cor do texto do label. |
|
|
71
|
+
| --ez-image-input--icon-color | Define a cor do ícone. |
|
|
72
|
+
| --ez-image-input--border-radius | Define o raio da borda do container. |
|
|
73
|
+
| --ez-image-input--border-width | Define a largura da borda. |
|
|
74
|
+
| --ez-image-input--remove-button-bg | Define a cor de fundo do botão de remover. |
|
|
75
|
+
| --ez-image-input--remove-button-bg-hover | Define a cor de fundo do botão de remover no hover. |
|
|
76
|
+
| --ez-image-input--remove-button-color | Define a cor do ícone do botão de remover. |
|
|
77
|
+
| --ez-image-input--remove-button-border | Define a borda do botão de remover. |
|
|
@@ -38,4 +38,5 @@
|
|
|
38
38
|
|-|-|
|
|
39
39
|
| --ez-modal-z-index | Define a camada em que o componente será exibido. |
|
|
40
40
|
| --ez-modal-vertical-padding | Define o espaçamento vertical do conteúdo do modal. |
|
|
41
|
-
| --ez-modal-content-padding | Define o padding entre o conteúdo e o modal |
|
|
41
|
+
| --ez-modal-content-padding | Define o padding entre o conteúdo e o modal |
|
|
42
|
+
| --ez-modal-content-min-width | Define a largura mínima do conteúdo do modal |
|
|
@@ -65,10 +65,12 @@ graph TD;
|
|
|
65
65
|
ez-filter-input --> ez-icon
|
|
66
66
|
ez-text-input --> ez-tooltip
|
|
67
67
|
ez-text-input --> ez-icon
|
|
68
|
+
ez-search --> ez-button
|
|
68
69
|
ez-search --> ez-text-input
|
|
69
70
|
ez-search --> ez-icon
|
|
70
71
|
ez-search --> ez-popover-plus
|
|
71
72
|
ez-search --> search-list
|
|
73
|
+
ez-button --> ez-icon
|
|
72
74
|
ez-popover-plus --> ez-popover-core
|
|
73
75
|
search-list --> ez-card-item
|
|
74
76
|
filter-column --> ez-multi-selection-list
|
|
@@ -93,6 +93,10 @@ Type: `Promise<void>`
|
|
|
93
93
|
|
|
94
94
|
### Used by
|
|
95
95
|
|
|
96
|
+
- [ez-classic-date-input](../ez-classic-date-input)
|
|
97
|
+
- [ez-classic-date-time-input](../ez-classic-date-time-input)
|
|
98
|
+
- [ez-classic-search](../ez-classic-search)
|
|
99
|
+
- [ez-classic-search-plus](../ez-classic-search-plus)
|
|
96
100
|
- [ez-combo-box](../ez-combo-box)
|
|
97
101
|
- [ez-date-input](../ez-date-input)
|
|
98
102
|
- [ez-date-time-input](../ez-date-time-input)
|
|
@@ -108,6 +112,10 @@ Type: `Promise<void>`
|
|
|
108
112
|
```mermaid
|
|
109
113
|
graph TD;
|
|
110
114
|
ez-popover-plus --> ez-popover-core
|
|
115
|
+
ez-classic-date-input --> ez-popover-plus
|
|
116
|
+
ez-classic-date-time-input --> ez-popover-plus
|
|
117
|
+
ez-classic-search --> ez-popover-plus
|
|
118
|
+
ez-classic-search-plus --> ez-popover-plus
|
|
111
119
|
ez-combo-box --> ez-popover-plus
|
|
112
120
|
ez-date-input --> ez-popover-plus
|
|
113
121
|
ez-date-time-input --> ez-popover-plus
|
|
@@ -31,6 +31,7 @@
|
|
|
31
31
|
|
|
32
32
|
### Used by
|
|
33
33
|
|
|
34
|
+
- [ez-image-input](../ez-image-input)
|
|
34
35
|
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
35
36
|
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
36
37
|
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
graph TD;
|
|
44
45
|
ez-popup --> ez-button
|
|
45
46
|
ez-button --> ez-icon
|
|
47
|
+
ez-image-input --> ez-popup
|
|
46
48
|
ez-link-builder --> ez-popup
|
|
47
49
|
ez-simple-image-uploader --> ez-popup
|
|
48
50
|
style ez-popup fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
17
17
|
| `ensureClearButtonVisible` | `ensure-clear-button-visible` | Garante que o botão de limpar pesquisa está sempre visível | `boolean` | `false` |
|
|
18
18
|
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
19
|
-
| `hideDescriptionInput` | `hide-description-input` | Se true o campo de
|
|
19
|
+
| `hideDescriptionInput` | `hide-description-input` | Se true o campo de descrição não será exibido. | `boolean` | `false` |
|
|
20
20
|
| `hideErrorOnFocusOut` | `hide-error-on-focus-out` | Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente. | `boolean` | `true` |
|
|
21
21
|
| `ignoreLimitCharsToSearch` | `ignore-limit-chars-to-search` | Define se deve ignorar o limite de caracteres mínimo para realizar uma pesquisa | `boolean` | `false` |
|
|
22
22
|
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto. | `boolean` | `false` |
|
|
@@ -25,10 +25,12 @@
|
|
|
25
25
|
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
26
26
|
| `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument, ctxProperties?: any) => IOption \| IOption[] \| Promise<IOption[]>` | `undefined` |
|
|
27
27
|
| `options` | -- | Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IOption[]` | `undefined` |
|
|
28
|
+
| `showMore` | `show-more` | Informa se deve exibir a opção de mostrar mais resultados. | `boolean` | `undefined` |
|
|
28
29
|
| `showOptionValue` | `show-option-value` | Se false cada opção na lista deve exibir somente o `label`. | `boolean` | `true` |
|
|
29
30
|
| `showSelectedValue` | `show-selected-value` | Se false a opção selecionada deve exibir somente o `label`. | `boolean` | `true` |
|
|
30
31
|
| `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, ineterrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `false` |
|
|
31
32
|
| `suppressEmptyOption` | `suppress-empty-option` | Se true remove a opção vazia da lista. | `boolean` | `false` |
|
|
33
|
+
| `suppressInputPersist` | `suppress-input-persist` | Informa se o valor da opção selecionada deve persistir no input de texto. | `boolean` | `false` |
|
|
32
34
|
| `suppressPreLoad` | `suppress-pre-load` | Se true, desabilita pré-load das opções ao carregar componente | `boolean` | `true` |
|
|
33
35
|
| `suppressSearch` | `suppress-search` | Se true desabilita a digitação dentro do componente. | `boolean` | `false` |
|
|
34
36
|
| `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` |
|
|
@@ -106,6 +108,7 @@ Type: `Promise<void>`
|
|
|
106
108
|
|
|
107
109
|
### Depends on
|
|
108
110
|
|
|
111
|
+
- [ez-button](../ez-button)
|
|
109
112
|
- [ez-text-input](../ez-text-input)
|
|
110
113
|
- [ez-icon](../ez-icon)
|
|
111
114
|
- [ez-popover-plus](../ez-popover-plus)
|
|
@@ -114,10 +117,12 @@ Type: `Promise<void>`
|
|
|
114
117
|
### Graph
|
|
115
118
|
```mermaid
|
|
116
119
|
graph TD;
|
|
120
|
+
ez-search --> ez-button
|
|
117
121
|
ez-search --> ez-text-input
|
|
118
122
|
ez-search --> ez-icon
|
|
119
123
|
ez-search --> ez-popover-plus
|
|
120
124
|
ez-search --> search-list
|
|
125
|
+
ez-button --> ez-icon
|
|
121
126
|
ez-text-input --> ez-tooltip
|
|
122
127
|
ez-text-input --> ez-icon
|
|
123
128
|
ez-popover-plus --> ez-popover-core
|
|
@@ -25,13 +25,17 @@
|
|
|
25
25
|
|
|
26
26
|
### Used by
|
|
27
27
|
|
|
28
|
+
- [ez-classic-search-result-list](../ez-classic-search-plus/subcomponent/ez-search-result-list)
|
|
28
29
|
- [ez-dropdown](../ez-dropdown)
|
|
30
|
+
- [ez-image-input](../ez-image-input)
|
|
29
31
|
- [ez-search-result-list](../ez-search-plus/subcomponent/ez-search-result-list)
|
|
30
32
|
|
|
31
33
|
### Graph
|
|
32
34
|
```mermaid
|
|
33
35
|
graph TD;
|
|
36
|
+
ez-classic-search-result-list --> ez-skeleton
|
|
34
37
|
ez-dropdown --> ez-skeleton
|
|
38
|
+
ez-image-input --> ez-skeleton
|
|
35
39
|
ez-search-result-list --> ez-skeleton
|
|
36
40
|
style ez-skeleton fill:#f9f,stroke:#333,stroke-width:4px
|
|
37
41
|
```
|