@sankhyalabs/ezui-docs 7.1.0-dev.20 → 7.1.0-dev.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ez-button/readme.md +2 -0
- package/components/ez-form/readme.md +15 -9
- package/components/ez-form-view/readme.md +12 -5
- package/components/ez-icon/readme.md +2 -0
- package/components/ez-image-input/readme.md +77 -0
- package/components/ez-popup/readme.md +2 -0
- package/components/ez-skeleton/readme.md +2 -0
- package/package.json +1 -1
|
@@ -56,6 +56,7 @@ Type: `Promise<void>`
|
|
|
56
56
|
- [ez-double-list](../ez-double-list)
|
|
57
57
|
- [ez-grid](../ez-grid)
|
|
58
58
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
59
|
+
- [ez-image-input](../ez-image-input)
|
|
59
60
|
- [ez-modal-container](../ez-modal-container)
|
|
60
61
|
- [ez-pagination](../ez-pagination)
|
|
61
62
|
- [ez-popup](../ez-popup)
|
|
@@ -80,6 +81,7 @@ graph TD;
|
|
|
80
81
|
ez-double-list --> ez-button
|
|
81
82
|
ez-grid --> ez-button
|
|
82
83
|
ez-guide-navigator --> ez-button
|
|
84
|
+
ez-image-input --> ez-button
|
|
83
85
|
ez-modal-container --> ez-button
|
|
84
86
|
ez-pagination --> ez-button
|
|
85
87
|
ez-popup --> ez-button
|
|
@@ -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) => 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
|
|
@@ -92,6 +93,7 @@ graph TD;
|
|
|
92
93
|
ez-form-view --> ez-search-plus
|
|
93
94
|
ez-form-view --> ez-search
|
|
94
95
|
ez-form-view --> ez-rich-text
|
|
96
|
+
ez-form-view --> ez-image-input
|
|
95
97
|
ez-collapsible-box --> ez-icon
|
|
96
98
|
ez-collapsible-box --> ez-text-edit
|
|
97
99
|
ez-text-edit --> ez-text-input
|
|
@@ -150,6 +152,10 @@ graph TD;
|
|
|
150
152
|
ez-simple-image-uploader --> ez-tooltip
|
|
151
153
|
ez-simple-image-uploader --> ez-text-input
|
|
152
154
|
ez-simple-image-uploader --> ez-icon
|
|
155
|
+
ez-image-input --> ez-skeleton
|
|
156
|
+
ez-image-input --> ez-button
|
|
157
|
+
ez-image-input --> ez-icon
|
|
158
|
+
ez-image-input --> ez-popup
|
|
153
159
|
style ez-form fill:#f9f,stroke:#333,stroke-width:4px
|
|
154
160
|
```
|
|
155
161
|
|
|
@@ -7,11 +7,12 @@
|
|
|
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) => HTMLElement>` | `new Map()` |
|
|
13
|
+
| `fields` | -- | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
|
|
14
|
+
| `selectedRecord` | -- | Define os registros da linha selecionada. | `Record` | `undefined` |
|
|
15
|
+
| `singleColumn` | `single-column` | Define se o formulario deve possuir apenas 1 coluna. | `boolean` | `false` |
|
|
15
16
|
|
|
16
17
|
|
|
17
18
|
## Events
|
|
@@ -77,6 +78,7 @@ Type: `Promise<void>`
|
|
|
77
78
|
- [ez-search-plus](../ez-search-plus)
|
|
78
79
|
- [ez-search](../ez-search)
|
|
79
80
|
- [ez-rich-text](../ez-rich-text)
|
|
81
|
+
- [ez-image-input](../ez-image-input)
|
|
80
82
|
|
|
81
83
|
### Graph
|
|
82
84
|
```mermaid
|
|
@@ -95,6 +97,7 @@ graph TD;
|
|
|
95
97
|
ez-form-view --> ez-search-plus
|
|
96
98
|
ez-form-view --> ez-search
|
|
97
99
|
ez-form-view --> ez-rich-text
|
|
100
|
+
ez-form-view --> ez-image-input
|
|
98
101
|
ez-collapsible-box --> ez-icon
|
|
99
102
|
ez-collapsible-box --> ez-text-edit
|
|
100
103
|
ez-text-edit --> ez-text-input
|
|
@@ -153,6 +156,10 @@ graph TD;
|
|
|
153
156
|
ez-simple-image-uploader --> ez-tooltip
|
|
154
157
|
ez-simple-image-uploader --> ez-text-input
|
|
155
158
|
ez-simple-image-uploader --> ez-icon
|
|
159
|
+
ez-image-input --> ez-skeleton
|
|
160
|
+
ez-image-input --> ez-button
|
|
161
|
+
ez-image-input --> ez-icon
|
|
162
|
+
ez-image-input --> ez-popup
|
|
156
163
|
ez-form --> ez-form-view
|
|
157
164
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
158
165
|
```
|
|
@@ -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. |
|
|
@@ -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
|
|
@@ -26,12 +26,14 @@
|
|
|
26
26
|
### Used by
|
|
27
27
|
|
|
28
28
|
- [ez-dropdown](../ez-dropdown)
|
|
29
|
+
- [ez-image-input](../ez-image-input)
|
|
29
30
|
- [ez-search-result-list](../ez-search-plus/subcomponent/ez-search-result-list)
|
|
30
31
|
|
|
31
32
|
### Graph
|
|
32
33
|
```mermaid
|
|
33
34
|
graph TD;
|
|
34
35
|
ez-dropdown --> ez-skeleton
|
|
36
|
+
ez-image-input --> ez-skeleton
|
|
35
37
|
ez-search-result-list --> ez-skeleton
|
|
36
38
|
style ez-skeleton fill:#f9f,stroke:#333,stroke-width:4px
|
|
37
39
|
```
|