@sankhyalabs/ezui-docs 6.1.0 → 6.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-actions-button/readme.md +14 -0
- package/components/ez-alert/readme.md +18 -0
- package/components/ez-alert-list/readme.md +16 -0
- package/components/ez-avatar/readme.md +6 -0
- package/components/ez-badge/readme.md +5 -0
- package/components/ez-breadcrumb/readme.md +8 -0
- package/components/ez-button/readme.md +37 -0
- package/components/ez-calendar/readme.md +34 -0
- package/components/ez-card-item/readme.md +17 -0
- package/components/ez-check/readme.md +47 -0
- package/components/ez-chip/readme.md +47 -14
- package/components/ez-collapsible-box/readme.md +20 -0
- package/components/ez-combo-box/ez-combo-box-list/readme.md +11 -11
- package/components/ez-combo-box/readme.md +23 -22
- package/components/ez-date-input/readme.md +8 -0
- package/components/ez-date-time-input/readme.md +8 -0
- package/components/ez-dialog/readme.md +26 -0
- package/components/ez-dropdown/readme.md +41 -0
- package/components/ez-empty-card/readme.md +29 -0
- package/components/ez-file-item/readme.md +17 -0
- package/components/ez-form/readme.md +25 -0
- package/components/ez-form-view/readme.md +35 -0
- package/components/ez-grid/readme.md +14 -0
- package/components/ez-guide-navigator/readme.md +13 -0
- package/components/ez-icon/readme.md +16 -0
- package/components/ez-list/readme.md +37 -0
- package/components/ez-modal/readme.md +8 -0
- package/components/ez-modal-container/readme.md +7 -0
- package/components/ez-number-input/readme.md +7 -0
- package/components/ez-popover/readme.md +9 -0
- package/components/ez-popup/readme.md +30 -0
- package/components/ez-radio-button/readme.md +30 -0
- package/components/ez-rich-text/ez-link-builder/readme.md +69 -0
- package/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-arrows/readme.md +29 -0
- package/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-configs/readme.md +29 -0
- package/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item/readme.md +49 -0
- package/components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-letters/readme.md +29 -0
- package/components/ez-rich-text/ez-rich-toolbar/readme.md +54 -0
- package/components/ez-rich-text/ez-simple-image-uploader/readme.md +78 -0
- package/components/ez-rich-text/readme.md +121 -0
- package/components/ez-scroller/readme.md +14 -0
- package/components/ez-search/readme.md +30 -0
- package/components/ez-search-plus/readme.md +40 -0
- package/components/ez-sidebar-button/readme.md +17 -0
- package/components/ez-sidebar-navigator/readme.md +19 -0
- package/components/ez-sortable-list/readme.md +32 -16
- package/components/ez-split-button/readme.md +42 -13
- package/components/ez-tabselector/readme.md +7 -0
- package/components/ez-tag/readme.md +34 -0
- package/components/ez-text-area/readme.md +47 -1
- package/components/ez-text-input/readme.md +46 -0
- package/components/ez-tile/readme.md +89 -0
- package/components/ez-tile-medium/readme.md +97 -0
- package/components/ez-toast/readme.md +12 -0
- package/components/ez-tooltip/readme.md +6 -0
- package/components/ez-tree/readme.md +31 -0
- package/components/ez-underface/readme.md +29 -0
- package/components/ez-upload/readme.md +22 -0
- package/package.json +1 -1
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
# ez-rich-toolbar-letters
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Dependencies
|
|
9
|
+
|
|
10
|
+
### Used by
|
|
11
|
+
|
|
12
|
+
- [ez-rich-toolbar](..)
|
|
13
|
+
|
|
14
|
+
### Depends on
|
|
15
|
+
|
|
16
|
+
- [ez-rich-toolbar-item](../ez-rich-toolbar-item)
|
|
17
|
+
|
|
18
|
+
### Graph
|
|
19
|
+
```mermaid
|
|
20
|
+
graph TD;
|
|
21
|
+
ez-rich-toolbar-letters --> ez-rich-toolbar-item
|
|
22
|
+
ez-rich-toolbar-item --> ez-icon
|
|
23
|
+
ez-rich-toolbar --> ez-rich-toolbar-letters
|
|
24
|
+
style ez-rich-toolbar-letters fill:#f9f,stroke:#333,stroke-width:4px
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
----------------------------------------------
|
|
28
|
+
|
|
29
|
+
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# ez-rich-toolbar
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------- | ------------------ | --------------------------------------------------------------------------------------------------- | --------- | ------- |
|
|
12
|
+
| `isPreviewMode` | `is-preview-mode` | Informa se o editor está em modo preview. | `boolean` | `false` |
|
|
13
|
+
| `showConfigs` | `show-configs` | Informa se as opções de configurações (lista, imagem e link) devem ser apresentadas. | `boolean` | `true` |
|
|
14
|
+
| `showPreview` | `show-preview` | Informa se as opções a opção de pré-visualização deve ser apresentada. | `boolean` | `true` |
|
|
15
|
+
| `showTextFormat` | `show-text-format` | Informa se as opções de formatação de texto (itálico, sublinhado e negrito) devem ser apresentadas. | `boolean` | `true` |
|
|
16
|
+
| `showUndoRedo` | `show-undo-redo` | Informa se as opções de desfazer e refazer devem ser apresentadas. | `boolean` | `true` |
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## Events
|
|
20
|
+
|
|
21
|
+
| Event | Description | Type |
|
|
22
|
+
| ----------------------- | ----------- | --------------------------------- |
|
|
23
|
+
| `executeToolbarCommand` | | `CustomEvent<RichToolbarCommand>` |
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## Dependencies
|
|
27
|
+
|
|
28
|
+
### Used by
|
|
29
|
+
|
|
30
|
+
- [ez-rich-text](..)
|
|
31
|
+
|
|
32
|
+
### Depends on
|
|
33
|
+
|
|
34
|
+
- [ez-rich-toolbar-arrows](ez-rich-toolbar-arrows)
|
|
35
|
+
- [ez-rich-toolbar-letters](ez-rich-toolbar-letters)
|
|
36
|
+
- [ez-rich-toolbar-configs](ez-rich-toolbar-configs)
|
|
37
|
+
|
|
38
|
+
### Graph
|
|
39
|
+
```mermaid
|
|
40
|
+
graph TD;
|
|
41
|
+
ez-rich-toolbar --> ez-rich-toolbar-arrows
|
|
42
|
+
ez-rich-toolbar --> ez-rich-toolbar-letters
|
|
43
|
+
ez-rich-toolbar --> ez-rich-toolbar-configs
|
|
44
|
+
ez-rich-toolbar-arrows --> ez-rich-toolbar-item
|
|
45
|
+
ez-rich-toolbar-item --> ez-icon
|
|
46
|
+
ez-rich-toolbar-letters --> ez-rich-toolbar-item
|
|
47
|
+
ez-rich-toolbar-configs --> ez-rich-toolbar-item
|
|
48
|
+
ez-rich-text --> ez-rich-toolbar
|
|
49
|
+
style ez-rich-toolbar fill:#f9f,stroke:#333,stroke-width:4px
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
----------------------------------------------
|
|
53
|
+
|
|
54
|
+
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# ez-simple-image-uploader
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| --------- | ---------- | ---------------------------------------------------- | -------- | ------- |
|
|
12
|
+
| `maxSize` | `max-size` | Tamanho máximo que a imagem poderá ter em kilobytes. | `number` | `500` |
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## Events
|
|
16
|
+
|
|
17
|
+
| Event | Description | Type |
|
|
18
|
+
| ----------------------- | ----------- | --------------------------------- |
|
|
19
|
+
| `executeToolbarCommand` | | `CustomEvent<RichToolbarCommand>` |
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Methods
|
|
23
|
+
|
|
24
|
+
### `hide() => Promise<void>`
|
|
25
|
+
|
|
26
|
+
Método responsável pelo fechamento do popup.
|
|
27
|
+
|
|
28
|
+
#### Returns
|
|
29
|
+
|
|
30
|
+
Type: `Promise<void>`
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
### `show() => Promise<void>`
|
|
35
|
+
|
|
36
|
+
Método responsável pela abertura do popup.
|
|
37
|
+
|
|
38
|
+
#### Returns
|
|
39
|
+
|
|
40
|
+
Type: `Promise<void>`
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
## Dependencies
|
|
46
|
+
|
|
47
|
+
### Used by
|
|
48
|
+
|
|
49
|
+
- [ez-rich-text](..)
|
|
50
|
+
|
|
51
|
+
### Depends on
|
|
52
|
+
|
|
53
|
+
- [ez-popup](../../ez-popup)
|
|
54
|
+
- [ez-modal-container](../../ez-modal-container)
|
|
55
|
+
- [ez-tooltip](../../ez-tooltip)
|
|
56
|
+
- [ez-text-input](../../ez-text-input)
|
|
57
|
+
- [ez-icon](../../ez-icon)
|
|
58
|
+
|
|
59
|
+
### Graph
|
|
60
|
+
```mermaid
|
|
61
|
+
graph TD;
|
|
62
|
+
ez-simple-image-uploader --> ez-popup
|
|
63
|
+
ez-simple-image-uploader --> ez-modal-container
|
|
64
|
+
ez-simple-image-uploader --> ez-tooltip
|
|
65
|
+
ez-simple-image-uploader --> ez-text-input
|
|
66
|
+
ez-simple-image-uploader --> ez-icon
|
|
67
|
+
ez-modal-container --> ez-icon
|
|
68
|
+
ez-modal-container --> ez-button
|
|
69
|
+
ez-button --> ez-icon
|
|
70
|
+
ez-text-input --> ez-tooltip
|
|
71
|
+
ez-text-input --> ez-icon
|
|
72
|
+
ez-rich-text --> ez-simple-image-uploader
|
|
73
|
+
style ez-simple-image-uploader fill:#f9f,stroke:#333,stroke-width:4px
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
----------------------------------------------
|
|
77
|
+
|
|
78
|
+
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
# ez-rich-text
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------- | ------------------ | -------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
13
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
14
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
15
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
16
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
17
|
+
| `rows` | `rows` | Define o número de linhas. | `number` | `6` |
|
|
18
|
+
| `showConfigs` | `show-configs` | Informa se as opções de configurações (lista, imagem e link) devem ser apresentadas | `boolean` | `true` |
|
|
19
|
+
| `showPreview` | `show-preview` | Informa se as opções a opção de pré-visualização deve ser apresentada. | `boolean` | `true` |
|
|
20
|
+
| `showTextFormat` | `show-text-format` | Informa se as opções de formatação de texto (itálico, sublinhado e negrito) devem ser apresentadas | `boolean` | `true` |
|
|
21
|
+
| `showUndoRedo` | `show-undo-redo` | Informa se as opções de desfazer e refazer devem ser habilitadas. | `boolean` | `true` |
|
|
22
|
+
| `value` | `value` | Define o valor HTML do campo. | `string` | `''` |
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## Events
|
|
26
|
+
|
|
27
|
+
| Event | Description | Type |
|
|
28
|
+
| ---------- | ------------------------------------------------------ | --------------------- |
|
|
29
|
+
| `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent<string>` |
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
## Methods
|
|
33
|
+
|
|
34
|
+
### `isInvalid() => Promise<boolean>`
|
|
35
|
+
|
|
36
|
+
Retorna se o conteúdo é inválido.
|
|
37
|
+
|
|
38
|
+
#### Returns
|
|
39
|
+
|
|
40
|
+
Type: `Promise<boolean>`
|
|
41
|
+
|
|
42
|
+
|
|
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() => 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
|
+
### Used by
|
|
68
|
+
|
|
69
|
+
- [ez-form-view](../ez-form-view)
|
|
70
|
+
|
|
71
|
+
### Depends on
|
|
72
|
+
|
|
73
|
+
- [ez-text-area](../ez-text-area)
|
|
74
|
+
- [ez-rich-toolbar](ez-rich-toolbar)
|
|
75
|
+
- [ez-link-builder](ez-link-builder)
|
|
76
|
+
- [ez-simple-image-uploader](ez-simple-image-uploader)
|
|
77
|
+
|
|
78
|
+
### Graph
|
|
79
|
+
```mermaid
|
|
80
|
+
graph TD;
|
|
81
|
+
ez-rich-text --> ez-text-area
|
|
82
|
+
ez-rich-text --> ez-rich-toolbar
|
|
83
|
+
ez-rich-text --> ez-link-builder
|
|
84
|
+
ez-rich-text --> ez-simple-image-uploader
|
|
85
|
+
ez-text-area --> ez-tooltip
|
|
86
|
+
ez-text-area --> ez-icon
|
|
87
|
+
ez-rich-toolbar --> ez-rich-toolbar-arrows
|
|
88
|
+
ez-rich-toolbar --> ez-rich-toolbar-letters
|
|
89
|
+
ez-rich-toolbar --> ez-rich-toolbar-configs
|
|
90
|
+
ez-rich-toolbar-arrows --> ez-rich-toolbar-item
|
|
91
|
+
ez-rich-toolbar-item --> ez-icon
|
|
92
|
+
ez-rich-toolbar-letters --> ez-rich-toolbar-item
|
|
93
|
+
ez-rich-toolbar-configs --> ez-rich-toolbar-item
|
|
94
|
+
ez-link-builder --> ez-popup
|
|
95
|
+
ez-link-builder --> ez-modal-container
|
|
96
|
+
ez-link-builder --> ez-text-input
|
|
97
|
+
ez-link-builder --> ez-check
|
|
98
|
+
ez-modal-container --> ez-icon
|
|
99
|
+
ez-modal-container --> ez-button
|
|
100
|
+
ez-button --> ez-icon
|
|
101
|
+
ez-text-input --> ez-tooltip
|
|
102
|
+
ez-text-input --> ez-icon
|
|
103
|
+
ez-simple-image-uploader --> ez-popup
|
|
104
|
+
ez-simple-image-uploader --> ez-modal-container
|
|
105
|
+
ez-simple-image-uploader --> ez-tooltip
|
|
106
|
+
ez-simple-image-uploader --> ez-text-input
|
|
107
|
+
ez-simple-image-uploader --> ez-icon
|
|
108
|
+
ez-form-view --> ez-rich-text
|
|
109
|
+
style ez-rich-text fill:#f9f,stroke:#333,stroke-width:4px
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
----------------------------------------------
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
## CSS Variables
|
|
118
|
+
| Variable | Description |
|
|
119
|
+
|-|-|
|
|
120
|
+
| --ez-rich-text--box-shadow | Define a sombra do header. |
|
|
121
|
+
| --ez-rich-text--shadow--outline | Define o outline usado como borda do header. |
|
|
@@ -32,3 +32,17 @@ graph TD;
|
|
|
32
32
|
----------------------------------------------
|
|
33
33
|
|
|
34
34
|
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
## CSS Variables
|
|
38
|
+
| Variable | Description |
|
|
39
|
+
|-|-|
|
|
40
|
+
| --ez-scroller--box-shadow-color | Define a cor de efeito de sombreado com componente. |
|
|
41
|
+
| --ez-scroller\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. |
|
|
42
|
+
| --ez-scroller\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. |
|
|
43
|
+
| --ez-scroller\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. |
|
|
44
|
+
| --ez-scroller\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. |
|
|
45
|
+
| --ez-scroller\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. |
|
|
46
|
+
| --ez-scroller\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |
|
|
47
|
+
| --ez-scroller\_\_max-height | Define o a altura máxima do componente. |
|
|
48
|
+
| --ez-scroller\_\_scrollbar--padding-right | Define o espaçamento interno direito da barra de rolagem do componente. |
|
|
@@ -130,3 +130,33 @@ graph TD;
|
|
|
130
130
|
----------------------------------------------
|
|
131
131
|
|
|
132
132
|
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
## CSS Variables
|
|
136
|
+
| Variable | Description |
|
|
137
|
+
|-|-|
|
|
138
|
+
| --ez-search--height | Define altura do input. |
|
|
139
|
+
| --ez-search--width | Define largura do input. |
|
|
140
|
+
| --ez-search\_\_icon--width | Define largura do slot do ícone do input. |
|
|
141
|
+
| --ez-search--border-radius | Define o raio da borda do input. |
|
|
142
|
+
| --ez-search--border-radius-small | Define o raio da borda do input quando pequeno. |
|
|
143
|
+
| --ez-search--font-size | Define o tamanho da fonte dentro do input. |
|
|
144
|
+
| --ez-search--font-family | Define a família da fonte dentro do input. |
|
|
145
|
+
| --ez-search--font-weight--large | Define o peso da fonte dentro do input quando pesada. |
|
|
146
|
+
| --ez-search--font-weight--medium | Define o peso da fonte dentro do input quando média. |
|
|
147
|
+
| --ez-search--background-color--xlight | Define a cor de fundo da lista de opções. |
|
|
148
|
+
| --ez-search--background-medium | Define a cor de fundo dos itens da lista de opções. |
|
|
149
|
+
| --ez-search--line-height | Define a altura da linha do texto dentro do input. |
|
|
150
|
+
| --ez-search\_\_input--background-color | Define a cor de fundo do input. |
|
|
151
|
+
| --ez-search\_\_input--border | Define o estilo da borda do input. |
|
|
152
|
+
| --ez-search\_\_input--border-color | Define a cor da borda do input. |
|
|
153
|
+
| --ez-search\_\_input--focus--border-color | Define a cor da borda do input quando focado. |
|
|
154
|
+
| --ez-search\_\_input--disabled--background-color | Define a cor de fundo do input quando desabilitado. |
|
|
155
|
+
| --ez-search\_\_input--disabled--color | Define a cor do texto dentro do input quando desabilitado. |
|
|
156
|
+
| --ez-search\_\_input--error--border-color | Define a cor da borda do input quando com erro. |
|
|
157
|
+
| --ez-search\_\_btn--color | Define a cor do botão de pesquisa do componente. |
|
|
158
|
+
| --ez-search\_\_btn-disabled--color | Define a cor do botão de pesquisa do componente quando desabilitado. |
|
|
159
|
+
| --ez-search\_\_btn-hover--color | Define a cor do botão de pesquisa do componente quando o mouse está sobre ele. |
|
|
160
|
+
| --ez-search\_\_label--color | Define a cor do label. |
|
|
161
|
+
| --ez-search--space--medium | Define um espaçamento mediano entre elementos do componente. |
|
|
162
|
+
| --ez-search--space--small | Define um espaçamento pequeno entre elementos do componente. |
|
|
@@ -128,3 +128,43 @@ graph TD;
|
|
|
128
128
|
----------------------------------------------
|
|
129
129
|
|
|
130
130
|
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
## CSS Variables
|
|
134
|
+
| Variable | Description |
|
|
135
|
+
|-|-|
|
|
136
|
+
| --ez-search--height | Define altura do input. |
|
|
137
|
+
| --ez-search--width | Define largura do input. |
|
|
138
|
+
| --ez-search\_\_icon--width | Define largura do slot do ícone do input. |
|
|
139
|
+
| --ez-search--border-radius | Define o raio da borda do input. |
|
|
140
|
+
| --ez-search--border-radius-small | Define o raio da borda do input quando pequeno. |
|
|
141
|
+
| --ez-search--font-size | Define o tamanho da fonte dentro do input. |
|
|
142
|
+
| --ez-search--font-family | Define a família da fonte dentro do input. |
|
|
143
|
+
| --ez-search--font-weight--large | Define o peso da fonte dentro do input quando pesada. |
|
|
144
|
+
| --ez-search--font-weight--medium | Define o peso da fonte dentro do input quando média. |
|
|
145
|
+
| --ez-search--background-color--xlight | Define a cor de fundo da lista de opções. |
|
|
146
|
+
| --ez-search--background-medium | Define a cor de fundo dos itens da lista de opções. |
|
|
147
|
+
| --ez-search--line-height | Define a altura da linha do texto dentro do input. |
|
|
148
|
+
| --ez-search\_\_input--background-color | Define a cor de fundo do input. |
|
|
149
|
+
| --ez-search\_\_input--border | Define o estilo da borda do input. |
|
|
150
|
+
| --ez-search\_\_input--border-color | Define a cor da borda do input. |
|
|
151
|
+
| --ez-search\_\_input--focus--border-color | Define a cor da borda do input quando focado. |
|
|
152
|
+
| --ez-search\_\_input--disabled--background-color | Define a cor de fundo do input quando desabilitado. |
|
|
153
|
+
| --ez-search\_\_input--disabled--color | Define a cor do texto dentro do input quando desabilitado. |
|
|
154
|
+
| --ez-search\_\_input--error--border-color | Define a cor da borda do input quando com erro. |
|
|
155
|
+
| --ez-search\_\_btn--color | Define a cor do botão de pesquisa do componente. |
|
|
156
|
+
| --ez-search\_\_btn-disabled--color | Define a cor do botão de pesquisa do componente quando desabilitado. |
|
|
157
|
+
| --ez-search\_\_btn-hover--color | Define a cor do botão de pesquisa do componente quando o mouse está sobre ele. |
|
|
158
|
+
| --ez-search\_\_label--color | Define a cor do label. |
|
|
159
|
+
| --ez-search\_\_list-title--primary | Define a cor do texto da lista de opções. |
|
|
160
|
+
| --ez-search\_\_list-text--primary | Define a cor do texto do value da lista de opções. |
|
|
161
|
+
| --ez-search\_\_list-height | Define a altura do box da lista de opções. |
|
|
162
|
+
| --ez-search\_\_list-min-width | Define a largura mínima da lista de opções. |
|
|
163
|
+
| --ez-search--space--medium | Define um espaçamento mediano entre elementos do componente. |
|
|
164
|
+
| --ez-search--space--small | Define um espaçamento pequeno entre elementos do componente. |
|
|
165
|
+
| --ez-search\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. |
|
|
166
|
+
| --ez-search\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. |
|
|
167
|
+
| --ez-search\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. |
|
|
168
|
+
| --ez-search\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. |
|
|
169
|
+
| --ez-search\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. |
|
|
170
|
+
| --ez-search\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |
|
|
@@ -35,3 +35,20 @@ graph TD;
|
|
|
35
35
|
----------------------------------------------
|
|
36
36
|
|
|
37
37
|
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## CSS Variables
|
|
41
|
+
| Variable | Description |
|
|
42
|
+
|-|-|
|
|
43
|
+
| --ez-sidebar-button--width | Define a largura do span do botão. |
|
|
44
|
+
| --ez-sidebar-button--hover--width | Define a largura do span do botão quando passar o mouse em cima. |
|
|
45
|
+
| --ez-sidebar-button--height | Define a altura do span do botão. |
|
|
46
|
+
| --ez-sidebar-navigator-button--z-index | Define a camada em que o componente será exibido. |
|
|
47
|
+
| --ez-sidebar-button--background-color--xlight | Define a cor de fundo do botão. |
|
|
48
|
+
| --ez-sidebar-button--background-color--primary | Define a cor de fundo do span do botão. |
|
|
49
|
+
| --ez-sidebar-button--space--small | Define um espaçamento pequeno entre elementos do componente. |
|
|
50
|
+
| --ez-sidebar-button--space--medium | Define um espaçamento mediano entre elementos do componente. |
|
|
51
|
+
| --ez-sidebar-button--box-shadow | Define a sombra default do botão. |
|
|
52
|
+
| --ez-sidebar-button--hover--box-shadow | Define a sombra do botão quando passar o mouse em cima. |
|
|
53
|
+
| --ez-sidebar-button--border--radius-small | Define a borda arrendondada no valor de 6px. |
|
|
54
|
+
| --ez-sidebar-button--border--radius-medium | Define a borda arrendondada no valor de 12px. |
|
|
@@ -80,3 +80,22 @@ graph TD;
|
|
|
80
80
|
----------------------------------------------
|
|
81
81
|
|
|
82
82
|
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
## CSS Variables
|
|
86
|
+
| Variable | Description |
|
|
87
|
+
|-|-|
|
|
88
|
+
| --ez-sidebar-navigator--padding-left | Define o espaçamento da esquerda do container |
|
|
89
|
+
| --ez-sidebar-navigator--padding-right | Define o espaçamento da direita do container |
|
|
90
|
+
| --ez-sidebar-navigator--gap | Define o espaçamento entre o cabeçalho conteúdo e rodapé |
|
|
91
|
+
| --ez-sidebar-navigator--box-shadow | Define a cor de shadow box do container de label |
|
|
92
|
+
| --ez-sidebar-navigator--background-color | Define a cor de fundo do container de label |
|
|
93
|
+
| --ez-sidebar-navigator--border-radius | Define o border radius do container de label |
|
|
94
|
+
| --ez-sidebar-navigator--height | Força uma altura especifica para o sidebar, o padrão é 100% da tela |
|
|
95
|
+
| --ez-sidebar-navigator--z-index | Define a camada em que o componente será exibido. |
|
|
96
|
+
| --ez-sidebar-navigator--header-gap | Define o espaçamento entre os componente do cabeçalho |
|
|
97
|
+
| --ez-sidebar-navigator--footer-gap | Define o espaçamento entre os componente do rodadé |
|
|
98
|
+
| --ez-ez-sidebar-navigator\_\_title--font-family | Define a fonte do título do componente |
|
|
99
|
+
| --ez-ez-sidebar-navigator\_\_title--font-size | Define o tamanho da fonte do título do componente. |
|
|
100
|
+
| --ez-ez-sidebar-navigator\_\_title--color | Define a cor da fonte do título do componente. |
|
|
101
|
+
| --ez-ez-sidebar-navigator\_\_title--font-weight | Define o peso da fonte do título do componente. |
|
|
@@ -7,22 +7,22 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
|
|
12
|
-
| `dataSource` | -- | Lista de itens para serem renderizados | `ListItem[]` | `[]`
|
|
13
|
-
| `emptyMessage` | `empty-message` | Mensagem exibida quando a lista está vazia | `string` | `
|
|
14
|
-
| `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' | `boolean` | `false`
|
|
15
|
-
| `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `
|
|
16
|
-
| `entityLabelPlural` | `entity-label-plural` | Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `
|
|
17
|
-
| `group` | `group` | Grupo ao qual o ez-sortable-list pertence | `string` | `'default'`
|
|
18
|
-
| `hideHeader` | `hide-header` | Define se o cabeçalho deve ficar oculto. | `boolean` | `false`
|
|
19
|
-
| `hideTotalizer` | `hide-totalizer` | Define se o totalizador deve ser escondido. | `boolean` | `false`
|
|
20
|
-
| `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista | `boolean` | `true`
|
|
21
|
-
| `idSortableList` | `id-sortable-list` | ID do sortable list | `string` | `'DEFAULT_LIST'`
|
|
22
|
-
| `itemLeftSlotBuilder` | -- | Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined`
|
|
23
|
-
| `itemRightSlotBuilder` | -- | 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: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined`
|
|
24
|
-
| `removeItensMoved` | `remove-itens-moved` | Remove itens arrastados de uma lista para outra | `boolean` | `false`
|
|
25
|
-
| `title` | `title` | Define o título da lista. | `string` | `undefined`
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------------- |
|
|
12
|
+
| `dataSource` | -- | Lista de itens para serem renderizados | `ListItem[]` | `[]` |
|
|
13
|
+
| `emptyMessage` | `empty-message` | Mensagem exibida quando a lista está vazia | `string` | `undefined` |
|
|
14
|
+
| `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' | `boolean` | `false` |
|
|
15
|
+
| `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `undefined` |
|
|
16
|
+
| `entityLabelPlural` | `entity-label-plural` | Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `undefined` |
|
|
17
|
+
| `group` | `group` | Grupo ao qual o ez-sortable-list pertence | `string` | `'default'` |
|
|
18
|
+
| `hideHeader` | `hide-header` | Define se o cabeçalho deve ficar oculto. | `boolean` | `false` |
|
|
19
|
+
| `hideTotalizer` | `hide-totalizer` | Define se o totalizador deve ser escondido. | `boolean` | `false` |
|
|
20
|
+
| `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista | `boolean` | `true` |
|
|
21
|
+
| `idSortableList` | `id-sortable-list` | ID do sortable list | `string` | `'DEFAULT_LIST'` |
|
|
22
|
+
| `itemLeftSlotBuilder` | -- | Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
23
|
+
| `itemRightSlotBuilder` | -- | 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: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
24
|
+
| `removeItensMoved` | `remove-itens-moved` | Remove itens arrastados de uma lista para outra | `boolean` | `false` |
|
|
25
|
+
| `title` | `title` | Define o título da lista. | `string` | `undefined` |
|
|
26
26
|
|
|
27
27
|
|
|
28
28
|
## Events
|
|
@@ -73,3 +73,19 @@ graph TD;
|
|
|
73
73
|
----------------------------------------------
|
|
74
74
|
|
|
75
75
|
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
## CSS Variables
|
|
79
|
+
| Variable | Description |
|
|
80
|
+
|-|-|
|
|
81
|
+
| --ez-sortable-list\_\_selected-item--border-radius | Define o raio da borda de items selecionados. |
|
|
82
|
+
| --ez-sortable-list\_\_selected-item--background-color | Define a cor de fundo de items selecionados. |
|
|
83
|
+
| --ez-sortable-list\_\_selectable--padding-right | Define o espaçamento lateral direito para items selecionados. |
|
|
84
|
+
| --ez-sortable-list\_\_selectable--padding-left | Define o espaçamento lateral esquerdo para items selecionados. |
|
|
85
|
+
| --ez-sortable-list\_\_icon--color | Define a cor do ícone de arrasto do item da lista. |
|
|
86
|
+
| --ez-sortable-list\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. |
|
|
87
|
+
| --ez-sortable-list--color-background | Define a cor de fundo da barra de rolagem do componente. |
|
|
88
|
+
| --ez-sortable-list\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. |
|
|
89
|
+
| --ez-sortable-list\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. |
|
|
90
|
+
| --ez-sortable-list--border-radius | Define o raio da borda da barra de rolagem do componente. |
|
|
91
|
+
| --ez-sortable-list\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |
|
|
@@ -7,19 +7,19 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
|
|
12
|
-
| `enabled` | `enabled` | Se false o usuário não pode interagir com o botão. | `boolean` | `true`
|
|
13
|
-
| `iconName` | `icon-name` | 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`
|
|
14
|
-
| `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined`
|
|
15
|
-
| `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`
|
|
16
|
-
| `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined`
|
|
17
|
-
| `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined`
|
|
18
|
-
| `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined`
|
|
19
|
-
| `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'`
|
|
20
|
-
| `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `
|
|
21
|
-
| `show` | `show` | | `boolean` | `false`
|
|
22
|
-
| `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'`
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o botão. | `boolean` | `true` |
|
|
13
|
+
| `iconName` | `icon-name` | 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` |
|
|
14
|
+
| `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` |
|
|
15
|
+
| `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` |
|
|
16
|
+
| `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined` |
|
|
17
|
+
| `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined` |
|
|
18
|
+
| `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined` |
|
|
19
|
+
| `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'` |
|
|
20
|
+
| `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `undefined` |
|
|
21
|
+
| `show` | `show` | | `boolean` | `false` |
|
|
22
|
+
| `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'` |
|
|
23
23
|
|
|
24
24
|
|
|
25
25
|
## Events
|
|
@@ -104,3 +104,32 @@ graph TD;
|
|
|
104
104
|
----------------------------------------------
|
|
105
105
|
|
|
106
106
|
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
## CSS Variables
|
|
110
|
+
| Variable | Description |
|
|
111
|
+
|-|-|
|
|
112
|
+
| --ez-split-button--min-width | Define a largura mínima do componente. |
|
|
113
|
+
| --ez-split-button--width | Define a largura do componente. |
|
|
114
|
+
| --ez-split-button\_\_medium--height | Define a altura do componente. |
|
|
115
|
+
| --ez-split-button\_\_medium-icon--width | Define a largura do slot que contém o ícone. |
|
|
116
|
+
| --ez-split-button\_\_inline\_\_icon--gap | Define o espaçamento entre o ícone e o label. |
|
|
117
|
+
| --ez-split-button\_\_label--padding-top | Define o espaçamento superior ao label. |
|
|
118
|
+
| --ez-split-button\_\_label--padding-bottom | Define o espaçamento inferior ao label. |
|
|
119
|
+
| --ez-split-button\_\_right-button--padding-left | Define o espaçamento esquerdo ao ícone. |
|
|
120
|
+
| --ez-split-button--color | Define a cor do label. |
|
|
121
|
+
| --ez-split-button--font-size | Define o tamanho do label. |
|
|
122
|
+
| --ez-split-button--font-family | Define a família da fonte do label. |
|
|
123
|
+
| --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
|
+
| --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
|
+
| --ez-split-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
|
|
129
|
+
| --ez-split-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
|
|
130
|
+
| --ez-split-button--disabled-color | Define a cor do texto quando o botão está desabilitado. |
|
|
131
|
+
| --ez-split-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. |
|
|
132
|
+
| --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. |
|
|
@@ -55,3 +55,10 @@ graph TD;
|
|
|
55
55
|
----------------------------------------------
|
|
56
56
|
|
|
57
57
|
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
## CSS Variables
|
|
61
|
+
| Variable | Description |
|
|
62
|
+
|-|-|
|
|
63
|
+
| --tabselector--backward-icon | Contém o ícone de voltar para a aba anterior. |
|
|
64
|
+
| --tabselector--forward-icon | Contém o ícone de avançar para a aba posterior. |
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# ez-tag
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
|
|
12
|
+
| `color` | `color` | Define a cor de fundo do componente. | `"gray" \| "green" \| "light-gray" \| "light-green" \| "light-ocean-green" \| "light-petroleum" \| "light-red" \| "light-yellow" \| "ocean-green" \| "petroleum" \| "red" \| "yellow"` | `"ocean-green"` |
|
|
13
|
+
| `customBackgroundColor` | `custom-background-color` | Define uma cor de fundo customizada, dentro da paleta de cores do Design System para o componente. | `string` | `undefined` |
|
|
14
|
+
| `customLabelColor` | `custom-label-color` | Define uma cor de texto customizada, dentro da paleta de cores do Design System para o componente. | `string` | `undefined` |
|
|
15
|
+
| `label` | `label` | Define o conteúdo textual ou numérico do componente. | `string` | `undefined` |
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
----------------------------------------------
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
## CSS Variables
|
|
24
|
+
| Variable | Description |
|
|
25
|
+
|-|-|
|
|
26
|
+
| --ez-tag--padding-x | Define o padding horizontal do componentes. |
|
|
27
|
+
| --ez-tag--padding-y | Define o padding vertical do componente. |
|
|
28
|
+
| --ez-tag--min-width | Define a largura minima do componente. |
|
|
29
|
+
| --ez-tag--min-height | Define a largura minima do componente. |
|
|
30
|
+
| --ez-tag--border-radius | Define o raio da borda do componente. |
|
|
31
|
+
| --ez-tag--background-color | Define a cor de fundo. |
|
|
32
|
+
| --ez-tag\_label--font-weight | Define o peso da fonte do label. |
|
|
33
|
+
| --ez-tag\_label--font-size | Define o tamanho da fonte do label. |
|
|
34
|
+
| --ez-tag\_label--color | Define a cor da fonte do label. |
|