@sankhyalabs/ezui-docs 6.1.0 → 6.2.0

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.
Files changed (46) hide show
  1. package/components/ez-actions-button/readme.md +14 -0
  2. package/components/ez-alert/readme.md +18 -0
  3. package/components/ez-alert-list/readme.md +16 -0
  4. package/components/ez-avatar/readme.md +5 -0
  5. package/components/ez-badge/readme.md +5 -0
  6. package/components/ez-breadcrumb/readme.md +8 -0
  7. package/components/ez-button/readme.md +37 -0
  8. package/components/ez-calendar/readme.md +34 -0
  9. package/components/ez-card-item/readme.md +17 -0
  10. package/components/ez-check/readme.md +45 -0
  11. package/components/ez-chip/readme.md +25 -0
  12. package/components/ez-collapsible-box/readme.md +20 -0
  13. package/components/ez-date-input/readme.md +8 -0
  14. package/components/ez-date-time-input/readme.md +8 -0
  15. package/components/ez-dialog/readme.md +26 -0
  16. package/components/ez-dropdown/readme.md +41 -0
  17. package/components/ez-empty-card/readme.md +29 -0
  18. package/components/ez-file-item/readme.md +17 -0
  19. package/components/ez-form-view/readme.md +9 -0
  20. package/components/ez-grid/readme.md +14 -0
  21. package/components/ez-guide-navigator/readme.md +13 -0
  22. package/components/ez-icon/readme.md +10 -0
  23. package/components/ez-list/readme.md +37 -0
  24. package/components/ez-modal/readme.md +8 -0
  25. package/components/ez-number-input/readme.md +7 -0
  26. package/components/ez-popover/readme.md +9 -0
  27. package/components/ez-popup/readme.md +15 -0
  28. package/components/ez-radio-button/readme.md +30 -0
  29. package/components/ez-scroller/readme.md +14 -0
  30. package/components/ez-search/readme.md +30 -0
  31. package/components/ez-search-plus/readme.md +40 -0
  32. package/components/ez-sidebar-button/readme.md +17 -0
  33. package/components/ez-sidebar-navigator/readme.md +19 -0
  34. package/components/ez-sortable-list/readme.md +16 -0
  35. package/components/ez-split-button/readme.md +29 -0
  36. package/components/ez-tabselector/readme.md +7 -0
  37. package/components/ez-tag/readme.md +34 -0
  38. package/components/ez-text-area/readme.md +32 -0
  39. package/components/ez-text-input/readme.md +42 -0
  40. package/components/ez-tile/readme.md +89 -0
  41. package/components/ez-tile-medium/readme.md +97 -0
  42. package/components/ez-toast/readme.md +12 -0
  43. package/components/ez-tree/readme.md +31 -0
  44. package/components/ez-underface/readme.md +29 -0
  45. package/components/ez-upload/readme.md +22 -0
  46. package/package.json +1 -1
package/components/ez-popup/readme.md CHANGED
@@ -28,3 +28,18 @@
28
28
  ----------------------------------------------
29
29
 
30
30
 
31
+
32
+
33
+ ## CSS Variables
34
+ | Variable | Description |
35
+ |-|-|
36
+ | --ez-popup-z-index | Define a camada em que o componente será exibido. |
37
+ | --ez-popup\_\_container--color | Define a cor do texto do container do popup. |
38
+ | --ez-popup\_\_container--padding | Define o espaçamento do container do popup. |
39
+ | --ez-popup\_\_header--padding-bottom | Define o espaçamento inferior do cabeçalho do popup. |
40
+ | --ez-popup\_\_title--font-family | Define a família da fonte do título do popup. |
41
+ | --ez-popup\_\_title--font-size | Define o tamanho da fonte do título do popup. |
42
+ | --ez-popup\_\_title--color | Define a cor da fonte do título do popup. |
43
+ | --ez-popup\_\_title--font-weight | Define o peso da fonte do título do popup. |
44
+ | --ez-popup\_\_btn\_\_close--icon-color | Define a cor do ícone do botão de fechamento. |
45
+ | --ez-popup\_\_btn\_\_close--icon | Contém o ícone do botão de fechamento. |
package/components/ez-radio-button/readme.md CHANGED
@@ -26,3 +26,33 @@
26
26
  ----------------------------------------------
27
27
 
28
28
 
29
+
30
+
31
+ ## CSS Variables
32
+ | Variable | Description |
33
+ |-|-|
34
+ | --ez-radio-button--font-family | Define a família da fonte do label. |
35
+ | --ez-radio-button--font-size | Define o tamanho do label. |
36
+ | --ez-radio-button--font-weight | Define o peso da fonte do label. |
37
+ | --ez-radio-button--font-color | Define a cor do texto. |
38
+ | --ez-radio-button--padding-vertical | Define o espaço superior e inferior da lista de opções. |
39
+ | --ez-radio-button--padding-horizontal | Define o espaço lateral da lista de opções. |
40
+ | --ez-radio-button\_\_form-label--font-family | Define a família da fonte do label. |
41
+ | --ez-radio-button\_\_form-label--font-weight | Define o peso da fonte do label. |
42
+ | --ez-radio-button\_\_form-label--title-primary | Define a cor do texto. |
43
+ | --ez-radio-button\_\_form-label--font-size | Define o tamanho do label. |
44
+ | --ez-radio-button\_\_form-label--padding-horizontal | Define o espaço lateral da lista de opções. |
45
+ | --ez-radio-button\_\_form-radio--border-color | cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) |
46
+ | --ez-radio-button\_\_form-radio--checked--color | cor do radio selecionado (com seleção / sem foco / sem hover / enabled) |
47
+ | --ez-radio-button\_\_form-radio--disabled--border-color | cor da borda do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) |
48
+ | --ez-radio-button\_\_form-radio--disabled--background-color | cor do background do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) |
49
+ | --ez-radio-button\_\_form-radio--disabled--color | cor da label quando o radio está desativado (sem seleção / sem foco / sem hover / disabled) |
50
+ | --ez-radio-button\_\_form-radio--disabled--before--background-color | cor do centro do radio quando o radio está desativado (com seleção / sem foco / sem hover / disabled) |
51
+ | --ez-radio-button\_\_form-radio--focus--background-color | cor do background quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) |
52
+ | --ez-radio-button\_\_form-radio--checked--box-shadow-color | cor do box-shadow quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) |
53
+ | --ez-radio-button\_\_form-radio--checked--focus--background-color | cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) |
54
+ | --ez-radio-button\_\_form-radio--checked--focus--box-shadow-color | cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) |
55
+ | --ez-radio-button\_\_form-radio--checked--hover--background-color | cor do background quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) |
56
+ | --ez-radio-button\_\_form-radio--checked--hover--box-shadow-color | cor do box-shadow quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) |
57
+ | --ez-radio-button\_\_form-radio--hover--box-shadow-color | cor do hover quando o radio está desmarcado (sem seleção / sem foco / com hover / enabled) |
58
+ | --ez-radio-button\_\_form-radio--checked--disabled--hover--background-color | cor do fundo quando o radio está marcado e desativado (com seleção / sem foco / com hover / disabled) |
package/components/ez-scroller/readme.md CHANGED
@@ -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. |
package/components/ez-search/readme.md CHANGED
@@ -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. |
package/components/ez-search-plus/readme.md CHANGED
@@ -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. |
package/components/ez-sidebar-button/readme.md CHANGED
@@ -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. |
package/components/ez-sidebar-navigator/readme.md CHANGED
@@ -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. |
package/components/ez-sortable-list/readme.md CHANGED
@@ -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. |
package/components/ez-split-button/readme.md CHANGED
@@ -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. |
package/components/ez-tabselector/readme.md CHANGED
@@ -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. |
package/components/ez-tag/readme.md ADDED
@@ -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. |
package/components/ez-text-area/readme.md CHANGED
@@ -91,3 +91,35 @@ graph TD;
91
91
  ----------------------------------------------
92
92
 
93
93
 
94
+
95
+
96
+ ## CSS Variables
97
+ | Variable | Description |
98
+ |-|-|
99
+ | --text-area--width | Define a largura do componente. |
100
+ | --text-area--border-radius | Define o raio da borda do input do componente. |
101
+ | --text-area--font-size | Define o tamanho da fonte do input e label do componente. |
102
+ | --text-area--font-family | Define a família da fonte do input, label e caixa de mensagem do componente. |
103
+ | --text-area--font-weight | Define o peso da fonte do label do componente. |
104
+ | --text-area--color | Define a cor da fonte do input e label do componente. |
105
+ | --text-area\_\_input--background-color | Define a cor de fundo do input. |
106
+ | --text-area\_\_input--border | Define o estilo da borda do input. |
107
+ | --text-area\_\_input--border-color | Define a cor da borda do input. |
108
+ | --text-area\_\_input--focus--border-color | Define a cor da borda do input quando focado. |
109
+ | --text-area\_\_input--disabled--background-color | Define a cor de fundo do input quando desabilitado. |
110
+ | --text-area\_\_input--disabled--color | Define a cor do texto do input. |
111
+ | --text-area\_\_input--disabled--border--color | Define a borda do texto do input quando desabilitado. |
112
+ | --text-area\_\_input--error--border-color | Define a cor da borda do input quando com erro. |
113
+ | --text-area\_\_message\_box--font-size | Define o tamanho da fonte da mensagem abaixo do input. |
114
+ | --text-area\_\_message\_box--info--color | Define a cor da fonte da mensagem quando info. |
115
+ | --text-area\_\_message\_box--error--color | Define a cor da fonte da mensagem quando erro. |
116
+ | --text-area\_\_label--floating--top | Define o posicionamento do label. |
117
+ | --text-area\_\_label--padding-top | Define o espaçamento superior do label. |
118
+ | --text-area\_\_label--padding-left | Define o espaçamento esquerdo do label. |
119
+ | --text-area\_\_label--padding-right | Define o espaçamento direito do label. |
120
+ | --text-area\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. |
121
+ | --text-area\_\_scrollbar--color-background | Define a cor de fundo da barra de rolagem do componente. |
122
+ | --text-area\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. |
123
+ | --text-area\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. |
124
+ | --text-area\_\_scrollbar--border-radius | Define o raio da borda da barra de rolagem do componente. |
125
+ | --text-area\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |
package/components/ez-text-input/readme.md CHANGED
@@ -106,3 +106,45 @@ graph TD;
106
106
  ----------------------------------------------
107
107
 
108
108
 
109
+
110
+
111
+ ## CSS Variables
112
+ | Variable | Description |
113
+ |-|-|
114
+ | --ez-text-input--height | Define a altura do componente. |
115
+ | --ez-text-input--width | Define a largura do componente. |
116
+ | --ez-text-input\_\_icon--width | Define a largura do slot que contém o ícone. |
117
+ | --ez-text-input--height--slim | Define a altura do componente em modo "slim". |
118
+ | --ez-text-input\_\_min-width | Define a largura maxima do componente. |
119
+ | --ez-text-input\_\_max-width | Define a largura minima do componente. |
120
+ | --ez-text-input--border-radius | Define o raio da borda do input do componente. |
121
+ | --ez-text-input--border-top-left-radius | Define o raio da borda no top esquerdo do componente. |
122
+ | --ez-text-input--border-bottom-left-radius | Define o raio da borda inferior esquerda do componente. |
123
+ | --ez-text-input--border-top-right-radius | Define o raio da borda no top direito do componente. |
124
+ | --ez-text-input--border-bottom-right-radius | Define o raio da borda inferior direita do componente. |
125
+ | --ez-text-input--font-size | Define o tamanho da fonte do input e label do componente. |
126
+ | --ez-text-input--font-family | Define a família da fonte do input, label e caixa de mensagem do componente. |
127
+ | --ez-text-input--font-weight | Define o peso da fonte do label do componente. |
128
+ | --ez-text-input--color | Define a cor da fonte do input e label do componente. |
129
+ | --ez-text-input\_\_margin-bottom | Define a margem abaixo do componente. |
130
+ | --ez-text-input\_\_input--background-color | Define a cor de fundo do input. |
131
+ | --ez-text-input\_\_input--border | Define o estilo da borda do input. |
132
+ | --ez-text-input\_\_input--border-color | Define a cor da borda do input. |
133
+ | --ez-text-input\_\_input--focus--border-color | Define a cor da borda do input quando focado. |
134
+ | --ez-text-input\_\_input--disabled--background-color | Define a cor de fundo do input quando desabilitado. |
135
+ | --ez-text-input\_\_input--disabled--color | Define a cor do texto do input. |
136
+ | --ez-text-input\_\_input--error--border-color | Define a cor da borda do input quando com erro. |
137
+ | --ez-text-input\_\_input--noborder-color | Define a cor do input quando não possuir borda |
138
+ | --ez-text-input\_\_input--padding | Define o padding do input |
139
+ | --ez-text-input\_\_placeholder--color | Define a cor do placeholder do input. |
140
+ | --ez-text-input\_\_tooltip\_icon--error--color | Define a cor da fonte da mensagem quando erro. |
141
+ | --ez-text-input\_\_label--floating--top | Define o posicionamento do label. |
142
+ | --ez-text-input\_\_label--padding-top | Define o posicionamento do label. |
143
+ | --ez-text-input\_\_label--padding-left | Define o espaçamento esquerdo do label. |
144
+ | --ez-text-input\_\_label--padding-right | Define o espaçamento direito do label. |
145
+ | --ez-text-input\_\_input--focus--icon-color | Define a cor do ícone do slot. |
146
+ | --ez-text-input\_\_input--disabled--focus--icon-color | Define a cor do ícone do slot quando disabled. |
147
+ | --ez-text-input\_\_tooltip-icon--spacing | Define o espaçamento lateral do icone de erro. |
148
+ | --ez-text-input\_\_tooltip-icon---width | Define a largura do icone de erro. |
149
+ | --ez-text-input\_\_tooltip-icon---horizontal-margin | Define a margem horizontal do icone de erro. |
150
+ | --ez-text-input\_\_tooltip-icon---vertical-margin | Define a margem vertical do icone de erro. |
package/components/ez-tile/readme.md ADDED
@@ -0,0 +1,89 @@
1
+ # ez-tile
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 tema do componente. | `"default" \| "gray" \| "green" \| "red" \| "yellow"` | `"default"` |
13
+ | `height` | `height` | Define o tamanho do componente, sobrescrevendo o padrão da propriedade size. | `number` | `undefined` |
14
+ | `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` | `"home"` |
15
+ | `isInteractive` | `is-interactive` | Define se o componente será interativo. Caso contrário, será estático. Se true, permite permite clique. Se false, não permite clique | `boolean` | `false` |
16
+ | `maximumLines` | `maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas. Quando a propriedade não é passada, limita a 1 linha. | `number` | `undefined` |
17
+ | `size` | `size` | Define qual o tamanho do componente. - `"default"`: 120x80px - `"medium"`: 120x170px | `"medium" \| "small"` | `"small"` |
18
+ | `text` | `text` | Texto a ser apresentado como título do componente. | `string` | `undefined` |
19
+ | `width` | `width` | Define a largura do componente, sobrescrevendo o padrão da propriedade size. | `number` | `undefined` |
20
+
21
+
22
+ ## Events
23
+
24
+ | Event | Description | Type |
25
+ | ----------- | --------------------------------------------- | ------------------- |
26
+ | `tileClick` | Emitido quando o elemento principal é clicado | `CustomEvent<void>` |
27
+
28
+
29
+ ## Methods
30
+
31
+ ### `setBlur() => Promise<void>`
32
+
33
+ Remove o foco do componente.
34
+
35
+ #### Returns
36
+
37
+ Type: `Promise<void>`
38
+
39
+
40
+
41
+ ### `setFocus() => Promise<void>`
42
+
43
+ Aplica o foco no componente.
44
+
45
+ #### Returns
46
+
47
+ Type: `Promise<void>`
48
+
49
+
50
+
51
+
52
+ ## Dependencies
53
+
54
+ ### Depends on
55
+
56
+ - [ez-icon](../ez-icon)
57
+
58
+ ### Graph
59
+ ```mermaid
60
+ graph TD;
61
+ ez-tile --> ez-icon
62
+ style ez-tile fill:#f9f,stroke:#333,stroke-width:4px
63
+ ```
64
+
65
+ ----------------------------------------------
66
+
67
+
68
+
69
+
70
+ ## CSS Variables
71
+ | Variable | Description |
72
+ |-|-|
73
+ | --ez-tile--width | Define a largura do componente. |
74
+ | --ez-tile--height | Define a altura do componente. |
75
+ | --ez-tile--padding | Define a margem do componente. |
76
+ | --ez-tile--icon--margin-bottom | Define o espaçamento entre o ícone e o title. |
77
+ | --ez-tile--border-radius | Define o raio da borda do componente. |
78
+ | --ez-tile--background-color | Define a cor de fundo do componente. |
79
+ | --ez-tile--color | Define a cor do title. |
80
+ | --ez-tile--icon-color | Define a cor do ícone. |
81
+ | --ez-tile--hover-background-color | Define a cor de fundo do componente no hover. |
82
+ | --ez-tile--hover-color | Define a cor do title no hover. |
83
+ | --ez-tile--hover-icon-color | Define a cor do ícone no hover. |
84
+ | --ez-tile--focus-visible-border | Define a cor do ícone no hover. |
85
+ | --ez-tile--font-family | Define a família da fonte do title. |
86
+ | --ez-tile--font-weight | Define o peso da fonte do title. |
87
+ | --ez-tile--font-size | Define o tamanho do title. |
88
+ | --ez-tile--title-line-height | Define a altura da linha do title. |
89
+ | --ez-tile--icon-line-height | Define a altura da linha do ícone. |
package/components/ez-tile-medium/readme.md ADDED
@@ -0,0 +1,97 @@
1
+ # ez-tile-medium
2
+
3
+
4
+
5
+ <!-- Auto Generated Below -->
6
+
7
+
8
+ ## Properties
9
+
10
+ | Property | Attribute | Description | Type | Default |
11
+ | ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
12
+ | `avatarProps` | -- | Propriedade utilizada para configurar o avatar, se definida substitui o ícone por um ez-avatar | `{ name?: string; imageSrc?: string; shape?: "circle" \| "square"; }` | `undefined` |
13
+ | `buttonProps` | -- | Define as props que serão passadas para o botão, caso o objeto seja passado, o botão será renderizado. | `{ label: string; enabled?: boolean; mode?: "link" \| "regular" \| "icon" \| "label-icon"; iconName?: string; size?: "small" \| "medium" \| "large" \| "x-small"; onClick: () => void; colors?: { background?: string; backgroundHover?: string; backgroundActive?: string; text?: string; textHover?: string; textActive?: string; }; }` | `undefined` |
14
+ | `color` | `color` | Define a cor tema do componente. | `"default" \| "gray" \| "green" \| "red" \| "yellow"` | `"default"` |
15
+ | `descriptionMaximumLines` | `description-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas na descrição. Quando a propriedade não é passada, limita a 3 linhas. | `number` | `undefined` |
16
+ | `descriptionText` | `description-text` | Texto a ser apresentado como descrição do componente | `string` | `undefined` |
17
+ | `height` | `height` | Define a altura do componente, sobrescrevendo o padrão de 257px. | `string` | `undefined` |
18
+ | `iconColor` | `icon-color` | Define uma cor customizada para o ícone, dentro da paleta de cores do Design System. Exemplo: "--color--yellow-600" | `string` | `undefined` |
19
+ | `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` |
20
+ | `smallTitleMaximumLines` | `small-title-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas no título pequeno. Quando a propriedade não é passada, limita a 1 linha. | `number` | `undefined` |
21
+ | `smallTitleText` | `small-title-text` | Texto a ser apresentado como um título pequeno do componente. | `string` | `undefined` |
22
+ | `tags` | -- | Define as props que serão passadas para as tags, caso um objeto seja passado, a(s) tag(s) será renderizada(s), se limitando a 3 tags. | `{ label: string; color?: string; }[]` | `undefined` |
23
+ | `titleMaximumLines` | `title-maximum-lines` | Define a quantidade máxima de linhas de texto a serem apresentadas no título. Quando a propriedade não é passada, limita a 1 linha. | `number` | `undefined` |
24
+ | `titleText` | `title-text` | Texto a ser apresentado como título do componente. | `string` | `undefined` |
25
+ | `width` | `width` | Define a largura do componente, sobrescrevendo o padrão de 446px. | `string` | `undefined` |
26
+
27
+
28
+ ## Methods
29
+
30
+ ### `setButtonBlur() => Promise<void>`
31
+
32
+ Remove o foco do botão.
33
+
34
+ #### Returns
35
+
36
+ Type: `Promise<void>`
37
+
38
+
39
+
40
+ ### `setButtonFocus() => Promise<void>`
41
+
42
+ Aplica o foco no botão.
43
+
44
+ #### Returns
45
+
46
+ Type: `Promise<void>`
47
+
48
+
49
+
50
+
51
+ ## Dependencies
52
+
53
+ ### Depends on
54
+
55
+ - [ez-badge](../ez-badge)
56
+ - [ez-avatar](../ez-avatar)
57
+ - [ez-icon](../ez-icon)
58
+ - [ez-button](../ez-button)
59
+
60
+ ### Graph
61
+ ```mermaid
62
+ graph TD;
63
+ ez-tile-medium --> ez-badge
64
+ ez-tile-medium --> ez-avatar
65
+ ez-tile-medium --> ez-icon
66
+ ez-tile-medium --> ez-button
67
+ ez-badge --> ez-icon
68
+ ez-avatar --> ez-icon
69
+ ez-button --> ez-icon
70
+ style ez-tile-medium fill:#f9f,stroke:#333,stroke-width:4px
71
+ ```
72
+
73
+ ----------------------------------------------
74
+
75
+
76
+
77
+
78
+ ## CSS Variables
79
+ | Variable | Description |
80
+ |-|-|
81
+ | --ez-tile-medium--width | Define a largura do componente. |
82
+ | --ez-tile-medium--height | Define a altura do componente. |
83
+ | --ez-tile-medium--padding | Define a margem do componente. |
84
+ | --ez-tile-medium--border-radius | Define o raio da borda do componente. |
85
+ | --ez-tile-medium--background-color | Define a cor do fundo. |
86
+ | --ez-tile-medium--color | Define a cor do title. |
87
+ | --ez-tile-medium--icon-color | Define a cor do ícone. |
88
+ | --ez-tile-medium--font-family | Define a família da fonte do title. |
89
+ | --ez-tile-medium--header-gap | Define o gap entre a seção de imagem e tags. |
90
+ | --ez-tile-medium--icon-line-height | Define a altura da linha do ícone. |
91
+ | --ez-tile-medium--tag-group-gap | Define o gap entre uma tag e outra. |
92
+ | --ez-tile-medium\_button--background-color | Define a cor de fundo do botão. |
93
+ | --ez-tile-medium\_button--color | Define a cor do label do botão. |
94
+ | --ez-tile-medium\_button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
95
+ | --ez-tile-medium\_button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
96
+ | --ez-tile-medium\_button--active--background-color | Define a cor do fundo ao ativar o botão. |
97
+ | --ez-tile-medium\_button--active-color | Define a cor do texto e do ícone ao ativar o botão. |
package/components/ez-toast/readme.md CHANGED
@@ -31,3 +31,15 @@ Type: `Promise<void>`
31
31
  ----------------------------------------------
32
32
 
33
33
 
34
+
35
+
36
+ ## CSS Variables
37
+ | Variable | Description |
38
+ |-|-|
39
+ | --ez-toast\_\_btn\_\_close\_\_image | Contém o ícone de fechamento do toast. |
40
+ | --ez-toast\_\_container--z-index | Define a camada em que o container será exibido. |
41
+ | --ez-toast\_\_container--background-color | Define a cor de fundo do container. |
42
+ | --ez-toast\_\_container--left | Define a posição esquerda do container. |
43
+ | --ez-toast\_\_container--bottom | Define a posição inferior do container. |
44
+ | --ez-toast\_\_container--width | Define a largura do container. |
45
+ | --ez-toast\_\_icon--padding-left | Define o espaçamento à esquerda do ícone. |
package/components/ez-tree/readme.md CHANGED
@@ -157,3 +157,34 @@ graph TD;
157
157
  ----------------------------------------------
158
158
 
159
159
 
160
+
161
+
162
+ ## CSS Variables
163
+ | Variable | Description |
164
+ |-|-|
165
+ | --ez-tree--border-radius | Define o arredondamento dos retangulos. |
166
+ | --ez-tree--padding-inline-start | Define a largura da identação de cada nível. |
167
+ | --ez-tree--margin | Define a margem do componente. |
168
+ | --ez-tree--margin-right | Define a margem da direita do componente. |
169
+ | --ez-tree--font-family | Define a família da fonte. |
170
+ | --ez-tree--font-size | Define o tamanho da fonte. |
171
+ | --ez-tree--selected--font-weight | Define o peso da fonte. |
172
+ | --ez-tree--font-weight | Define o peso da fonte. |
173
+ | --ez-tree--color | Define a cor da fonte e do ícone. |
174
+ | --ez-tree--selected--color | Define a cor da fonte e do ícone quando selecionado. |
175
+ | --ez-tree--disabled--color | Define a cor da fonte e do ícone quando desabilitado. |
176
+ | --ez-tree--font-weight--bold | Usado em fontes com peso maior (bold) |
177
+ | --ez-tree\_\_tree-item--height | Define a altura de cada item. |
178
+ | --ez-tree\_\_tree-item--padding | Define o espaçamento interno do item. |
179
+ | --ez-tree\_\_tree-item--background-color | Define a cor de background. |
180
+ | --ez-tree\_\_tree-item--selected--background-color | Define a cor de background quando selecionado. |
181
+ | --ez-tree\_\_tree-item--hover--background-color | Define a cor de background com o mouse sobre o item. |
182
+ | --ez-tree\_\_tree-item--disabled--background-color | Define a cor de background quando deabilitado. |
183
+ | --ez-tree\_\_item-icon-box--height | Define a altura do box do ícone. |
184
+ | --ez-tree\_\_item-icon-box--width | Define a largura do box do ícone. |
185
+ | --ez-tree\_\_item-icon-box--padding | Define o espaçamento interno do ícone. |
186
+ | --ez-tree\_\_badge--icon-color--default | Cor de ícone de badge padrão. |
187
+ | --ez-tree\_\_badge--icon-color--error | Cor de ícone de badge de erro. |
188
+ | --ez-tree\_\_badge--icon-color--success | Cor de ícone de badge sucesso. |
189
+ | --ez-tree\_\_badge--icon-color--warning | Cor de ícone de badge de aviso. |
190
+ | --ez-tree\_\_badge--icon-color--disabled | Cor de ícone de badge desabilitado. |