@sankhyalabs/ezui-docs 2.3.1 → 2.3.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.
Files changed (34) hide show
  1. package/components/ez-actions-button/readme.md +28 -16
  2. package/components/ez-button/readme.md +45 -10
  3. package/components/ez-calendar/readme.md +47 -15
  4. package/components/ez-card-item/readme.md +21 -6
  5. package/components/ez-check/readme.md +59 -14
  6. package/components/ez-chip/readme.md +38 -14
  7. package/components/ez-collapsible-box/readme.md +34 -19
  8. package/components/ez-combo-box/readme.md +58 -21
  9. package/components/ez-date-input/readme.md +23 -15
  10. package/components/ez-date-time-input/readme.md +24 -16
  11. package/components/ez-dialog/readme.md +39 -23
  12. package/components/ez-filter-input/readme.md +14 -15
  13. package/components/ez-form/readme.md +6 -26
  14. package/components/ez-grid/readme.md +36 -31
  15. package/components/ez-icon/readme.md +11 -5
  16. package/components/ez-list/readme.md +57 -19
  17. package/components/ez-loading-bar/readme.md +2 -2
  18. package/components/ez-modal/readme.md +18 -11
  19. package/components/ez-modal-container/readme.md +9 -9
  20. package/components/ez-number-input/readme.md +17 -17
  21. package/components/ez-popover/readme.md +25 -16
  22. package/components/ez-popup/readme.md +25 -10
  23. package/components/ez-radio-button/readme.md +40 -10
  24. package/components/ez-scroller/readme.md +11 -5
  25. package/components/ez-search/readme.md +17 -18
  26. package/components/ez-tabselector/readme.md +15 -8
  27. package/components/ez-text-area/readme.md +40 -16
  28. package/components/ez-text-edit/readme.md +9 -9
  29. package/components/ez-text-input/readme.md +47 -18
  30. package/components/ez-time-input/readme.md +16 -16
  31. package/components/ez-toast/readme.md +18 -9
  32. package/components/ez-upload/readme.md +33 -11
  33. package/components/ez-view-stack/readme.md +2 -2
  34. package/package.json +1 -1
package/components/ez-actions-button/readme.md CHANGED
@@ -7,31 +7,31 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | --------------- | ---------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
12
- | `actions` | -- | . Array no formato "{value: string, label: string, iconName: string}" que alimenta a lista de ações. | `IAction[]` | `undefined` |
13
- | `arrowActive` | `arrow-active` | Define se o elemento contará com a seta de orientação. | `boolean` | `false` |
14
- | `checkOption` | `check-option` | Define se na opção selecionada apresentará um ícone de check. | `boolean` | `false` |
15
- | `displayIcon` | `display-icon` | Nome do ícone que será apresentado no display do componente. | `string` | `undefined` |
16
- | `enabled` | `enabled` | Deixa o campo disponível ou não para interação com usuário. | `boolean` | `true` |
17
- | `isTransparent` | `is-transparent` | Define se o background do botão será transparent. | `boolean` | `false` |
18
- | `showLabel` | `show-label` | Define se o label será apresentado no display do componente. | `boolean` | `false` |
19
- | `size` | `size` | É possível escolher entre [small,medium,large]. | `"large" \| "medium" \| "small"` | `undefined` |
20
- | `value` | `value` | Define qual o value que será selecionado na lista. | `string` | `undefined` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | --------------- | ---------------- | ------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- |
12
+ | `actions` | -- | Define a lista de ações. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IAction[]` | `undefined` |
13
+ | `arrowActive` | `arrow-active` | Se true a seta de ordenação será apresentada. | `boolean` | `false` |
14
+ | `checkOption` | `check-option` | Se true o check será apresentado para os itens. | `boolean` | `false` |
15
+ | `displayIcon` | `display-icon` | Define o ícone do componente. | `string` | `undefined` |
16
+ | `enabled` | `enabled` | Se false o usuário não pode interagir com o componente. | `boolean` | `true` |
17
+ | `isTransparent` | `is-transparent` | Se true o background será transparent. | `boolean` | `false` |
18
+ | `showLabel` | `show-label` | Se true o label será apresentado. | `boolean` | `false` |
19
+ | `size` | `size` | Determina o tamanho do ez-action-button. | `"large" \| "medium" \| "small"` | `"medium"` |
20
+ | `value` | `value` | Define o valor do componente. | `string` | `undefined` |
21
21
 
22
22
 
23
23
  ## Events
24
24
 
25
- | Event | Description | Type |
26
- | ---------- | ------------------------------------------- | ---------------------- |
27
- | `ezAction` | Evento que é disparado ao acionar uma ação. | `CustomEvent<IAction>` |
25
+ | Event | Description | Type |
26
+ | ---------- | ---------------------------- | ---------------------- |
27
+ | `ezAction` | Emitido ao acionar uma ação. | `CustomEvent<IAction>` |
28
28
 
29
29
 
30
30
  ## Methods
31
31
 
32
32
  ### `hideActions() => Promise<void>`
33
33
 
34
- Oculta a lista de ações
34
+ Oculta a lista de ações.
35
35
 
36
36
  #### Returns
37
37
 
@@ -41,7 +41,7 @@ Type: `Promise<void>`
41
41
 
42
42
  ### `isOpened() => Promise<boolean>`
43
43
 
44
- Verifica se a lista de ações está oculta
44
+ Verifica se a lista de ações está aberta.
45
45
 
46
46
  #### Returns
47
47
 
@@ -69,3 +69,15 @@ graph TD;
69
69
  ----------------------------------------------
70
70
 
71
71
 
72
+
73
+
74
+ ## CSS Variables
75
+ | Variable | Description |
76
+ |-|-|
77
+ | --ez-actions-button\_\_actions-list--border-radius | Define o raio da borda do popover. |
78
+ | --ez-actions-button\_\_actions-list--box-shadow | Define a sombra do popover. |
79
+ | --ez-actions-button\_\_actions-list--background-color | Define a cor de fundo do popover. |
80
+ | --ez-actions-button\_\_actions-list--padding | Define o espaçamento interno do popover |
81
+ | --ez-actions-button\_\_actions-list--top-margin | Define a distancia entre o botão e o popover |
82
+ | --ez-actions-button\_\_btn-action--min-width | Define a largura mínima do popover |
83
+ | --ez-actions-button\_\_btn-action--background-color | Define a cor de fundo do popover |
package/components/ez-button/readme.md CHANGED
@@ -7,21 +7,21 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- |
12
- | `enabled` | `enabled` | Deixa o botão disponível ou não para interação com o usuário. | `boolean` | `true` |
13
- | `iconName` | `icon-name` | Nome do icone disponível no pacote de fontes [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html) | `string` | `undefined` |
14
- | `image` | `image` | Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo "icon" | `string` | `undefined` |
15
- | `label` | `label` | Texto indicativo da ação do botão. | `string` | `undefined` |
16
- | `mode` | `mode` | Define o modo de uso do botão; opções: icon, link e regular | `string` | `"regular"` |
17
- | `size` | `size` | É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link") | `"large" \| "medium" \| "small"` | `undefined` |
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://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html) | `string` | `undefined` |
14
+ | `image` | `image` | Define o caminho usado nos modos `icon` e `label-icon` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` |
15
+ | `label` | `label` | Texto a ser apresentado como título do botão. | `string` | `undefined` |
16
+ | `mode` | `mode` | Define o modo de uso do botão. | `"icon" \| "label-icon" \| "link" \| "regular"` | `"regular"` |
17
+ | `size` | `size` | Define o tamanho do ez-button. | `"large" \| "medium" \| "small"` | `undefined` |
18
18
 
19
19
 
20
20
  ## Methods
21
21
 
22
22
  ### `setBlur() => Promise<void>`
23
23
 
24
- Remove o foco no botão
24
+ Remove o foco do botão.
25
25
 
26
26
  #### Returns
27
27
 
@@ -31,7 +31,7 @@ Type: `Promise<void>`
31
31
 
32
32
  ### `setFocus() => Promise<void>`
33
33
 
34
- Realiza o foco no botão
34
+ Aplica o foco no botão.
35
35
 
36
36
  #### Returns
37
37
 
@@ -69,3 +69,38 @@ graph TD;
69
69
  ----------------------------------------------
70
70
 
71
71
 
72
+
73
+
74
+ ## CSS Variables
75
+ | Variable | Description |
76
+ |-|-|
77
+ | --ez-button--min-width | Define a largura mínima do componente. |
78
+ | --ez-button--width | Define a largura do componente. |
79
+ | --ez-button--height | Define a altura do componente. |
80
+ | --ez-button\_\_icon--width | Define a largura do slot que contém o ícone. |
81
+ | --ez-button\_\_inline\_\_icon--padding | Define o espaçamento entre o ícone e o label. |
82
+ | --ez-button--padding-top | Define o espaçamento superior ao label. |
83
+ | --ez-button--padding-bottom | Define o espaçamento inferior ao label. |
84
+ | --ez-button--padding-right | Define o espaçamento à direita do label. |
85
+ | --ez-button--padding-left | Define o espaçamento à esquerda do label. |
86
+ | --ez-button--color | Define a cor do label. |
87
+ | --ez-button--font-size | Define o tamanho do label. |
88
+ | --ez-button--font-family | Define a família da fonte do label. |
89
+ | --ez-button--font-weight | Define o peso da fonte do label. |
90
+ | --ez-button--background-color | Define a cor de fundo do botão. |
91
+ | --ez-button--border-radius | Define o raio da borda do botão. |
92
+ | --ez-button--border | Define o estilo da borda do botão. |
93
+ | --ez-button--justify-content | Define o alinhamento horizontal do conteúdo do botão. |
94
+ | --ez-button--hover-color | Define a cor do texto e do ícone quando o cursor está sobre o botão. |
95
+ | --ez-button--hover--background-color | Define a cor de fundo quando o cursor está sobre o botão. |
96
+ | --ez-button--disabled-color | Define a cor do texto quando o botão está desabilitado. |
97
+ | --ez-button--disabled--background-color | Define a cor de fundo quando o botão está desabilitado. |
98
+ | --ez-button--focus--border | Define o estido da borda quando o botão está selecionado. |
99
+ | --ez-button--focus--box-shadow | Define a sombra do botão quando selecionado. |
100
+ | --ez-button--active-color | Define a cor do texto e do ícone ao ativar o botão. |
101
+ | --ez-button--active--background-color | Define a cor do fundo ao ativar o botão. |
102
+ | --ez-button--link-color | Define a cor do texto do botão no modo link. |
103
+ | --ez-button--link--hover-color | Define a cor do texto do botão no hover do modo link. |
104
+ | --ez-button--link--small--font-size | Define o tamanho small na fonte do texto do botão no modo link. |
105
+ | --ez-button--link--medium--font-size | Define o tamanho medium na fonte do texto do botão no modo link. |
106
+ | --ez-button--link--large--font-size | Define o tamanho large na fonte do texto do botão no modo link. |
package/components/ez-calendar/readme.md CHANGED
@@ -7,26 +7,26 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | ------------- | -------------- | ---------------------------------------------------------------------------------------- | --------- | ------------ |
12
- | `floating` | `floating` | No modo floating o calendário só se tornará visível quando o método show() for acionado. | `boolean` | `false` |
13
- | `showSeconds` | `show-seconds` | Exibe ou não os segundos no calendario | `boolean` | `false` |
14
- | `time` | `time` | Exibe ou não as horas e minutos no calendario | `boolean` | `false` |
15
- | `value` | -- | A data selecionada no calendário | `Date` | `new Date()` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | ------------- | -------------- | --------------------------------------------------------------------------------------- | --------- | ------------ |
12
+ | `floating` | `floating` | Define se a exibição do ez-calendar será feita pelos métodos `show()` e `hide()`. | `boolean` | `false` |
13
+ | `showSeconds` | `show-seconds` | Se true a data considera segundos. Deve ser usado em conjunto com a propriedade `time`. | `boolean` | `false` |
14
+ | `time` | `time` | Se true a data considera horas e minutos. | `boolean` | `false` |
15
+ | `value` | -- | Define o valor do calendário. | `Date` | `new Date()` |
16
16
 
17
17
 
18
18
  ## Events
19
19
 
20
- | Event | Description | Type |
21
- | ---------- | --------------------------------------------------------- | ------------------- |
22
- | `ezChange` | Quando o usuário escolhe uma data, esse evento é emitido. | `CustomEvent<Date>` |
20
+ | Event | Description | Type |
21
+ | ---------- | ----------------------------------------------------------- | ------------------- |
22
+ | `ezChange` | Emitido quando acontece a alteração de valor do calendário. | `CustomEvent<Date>` |
23
23
 
24
24
 
25
25
  ## Methods
26
26
 
27
27
  ### `fitVertical(topOffset: number, bottomOffset: number) => Promise<void>`
28
28
 
29
- Método necessário para ajustar o posicionamento do calendar acima ou abaixo do ez-date-input conforme a disponibilidade de espaço.
29
+ Ajusta o posicionamento do ez-calendar conforme a disponibilidade de espaço.
30
30
 
31
31
  #### Returns
32
32
 
@@ -36,7 +36,7 @@ Type: `Promise<void>`
36
36
 
37
37
  ### `hide() => Promise<void>`
38
38
 
39
- Usado no modo floating. Faz com que o componente seja ocultado.
39
+ Oculta o ez-calendar.
40
40
 
41
41
  #### Returns
42
42
 
@@ -46,10 +46,8 @@ Type: `Promise<void>`
46
46
 
47
47
  ### `show(top?: string, left?: string, bottom?: string, right?: string) => Promise<void>`
48
48
 
49
- Usado no modo floating. Faz com que o componente seja exibido.
50
- É possível determinar ajustes de posicionamento através dos parâmetros
51
- top, left, bottom e right. Esses parâmetros devem ser informados como
52
- strings no formato css.
49
+ Exibe o ez-calendar em uma posição determinada.
50
+ É possível determinar o posicionamento através dos parâmetros, no formato css.
53
51
 
54
52
  #### Returns
55
53
 
@@ -76,3 +74,37 @@ graph TD;
76
74
  ----------------------------------------------
77
75
 
78
76
 
77
+
78
+
79
+ ## CSS Variables
80
+ | Variable | Description |
81
+ |-|-|
82
+ | --ez-calendar--font-family | Define a família da fonte do componente. |
83
+ | --ez-calendar--color | Define a cor dos textos dentro do componente. |
84
+ | --ez-calendar--text-shadow | Define a sombra dos textos dentro do componente. |
85
+ | --ez-calendar\_\_body--background-color | Define a cor de fundo do corpo do calendário. |
86
+ | --ez-calendar\_\_time--background-color | Define a cor de fundo do corpo da hora do calendário. |
87
+ | --ez-calendar\_\_body--padding | Define o espaçamento do corpo do calendário. |
88
+ | --ez-calendar\_\_body--border-radius | Define o raio da borda do corpo do calendário. |
89
+ | --ez-calendar\_\_body--shadow | Define a sombra do corpo do calendário. |
90
+ | --ez-container--z-index | Define a posição do container de calendario nas camadas da página . |
91
+ | --ez-calendar\_\_header-line--stroke | Define a espessura da borda inferior do header. |
92
+ | --ez-calendar\_\_header-line--color | Define a cor da borda inferior do header. |
93
+ | --ez-calendar\_\_nav-btn--fill | Define a cor do ícone de navegação. |
94
+ | --ez-calendar\_\_nav-btn--hover--fill | Define a cor do ícone de navegação quando o cursor está sobre ele. |
95
+ | --ez-calendar\_\_nav-btn--width | Define a largura do ícone de navegação. |
96
+ | --ez-calendar\_\_nav-btn--height | Define a altura do ícone de navegação. |
97
+ | --ez-calendar\_\_nav-btn--previous-image | Contém a imagem do ícone de navegação à esquerda. |
98
+ | --ez-calendar\_\_nav-btn--next-image | Contém a imagem do ícone de navegação à direita. |
99
+ | --ez-calendar\_\_cell--margin | Define o espaçamento vertical entre as células. |
100
+ | --ez-calendar\_\_cell--width | Define a largura das células. |
101
+ | --ez-calendar\_\_cell--padding | Define o espaçamento horizontal entre as células. |
102
+ | --ez-calendar\_\_cell--border-radius | Define o raio da borda das células. |
103
+ | --ez-calendar\_\_cell--over--background-color | Define a cor de fundo das células. |
104
+ | --ez-calendar\_\_cell--over--color | Define a cor de do texto das células. |
105
+ | --ez-calendar\_\_cell--outset--color | Define a cor do texto para células secundárias (fora do mês selecionado). |
106
+ | --ez-calendar\_\_cell--selected--background-color | Define a cor de fundo das células selecionadas. |
107
+ | --ez-calendar\_\_cell--selected--color | Define a cor do texto da célula selecionada. |
108
+ | --ez-calendar\_\_btn-today--color | Define a cor do texto do botão "Hoje". |
109
+ | --ez-calendar\_\_btn-today--hover--background-color | Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele. |
110
+ | --ez-calendar\_\_btn-today--border-radius | Define o raio da borda do botão "Hoje". |
package/components/ez-card-item/readme.md CHANGED
@@ -7,18 +7,33 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | -------- | --------- | ----------- | ---------- | ----------- |
12
- | `item` | -- | | `CardItem` | `undefined` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | -------- | --------- | ------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
12
+ | `item` | -- | Determina o conteúdo do card. Deve conter um objeto no formato: `{title: string, key: string, details: any}`. | `CardItem` | `undefined` |
13
13
 
14
14
 
15
15
  ## Events
16
16
 
17
- | Event | Description | Type |
18
- | --------- | ----------- | ----------------------- |
19
- | `ezClick` | | `CustomEvent<CardItem>` |
17
+ | Event | Description | Type |
18
+ | --------- | --------------------------------------- | ----------------------- |
19
+ | `ezClick` | Emitido sempre que o ez-card é clicado. | `CustomEvent<CardItem>` |
20
20
 
21
21
 
22
22
  ----------------------------------------------
23
23
 
24
24
 
25
+
26
+
27
+ ## CSS Variables
28
+ | Variable | Description |
29
+ |-|-|
30
+ | --ez-card-item--font-size | Define o tamanho da fonte do componente. |
31
+ | --ez-card-item--font-family | Define a família da fonte do componente. |
32
+ | --ez-card-item--font-weight | Define o peso da fonte do componente. |
33
+ | --ez-card-item--font-weight-large | Define o peso da fonte do title do componente. |
34
+ | --ez-card-item--color | Define a cor da fonte do componente. |
35
+ | --ez-card-item\_\_key--color | Define a cor da fonte da key do componente. |
36
+ | --ez-card-item\_\_detail-label--color | Define a cor da fonte do label do detalhe do componente. |
37
+ | --ez-card-item\_\_detail--padding-bottom | Define o espaçamento inferior dos detalhes do componente. |
38
+ | --ez-card-item\_\_title--padding-bottom | Define o espaçamento inferior do title do componente. |
39
+ | --ez-card-item\_\_highlight--color | Define a cor do highlight / marcação nos textos do componente. |
package/components/ez-check/readme.md CHANGED
@@ -7,37 +7,37 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | --------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
12
- | `enabled` | `enabled` | Deixa o campo disponível ou não para interação com o usuário. | `boolean` | `true` |
13
- | `indeterminate` | `indeterminate` | Deixa o campo em um estado indeterminado, nem marcado nem desmarcado (não disponível em modo "switch"). | `boolean` | `undefined` |
14
- | `label` | `label` | Título do campo | `string` | `undefined` |
15
- | `mode` | `mode` | Existem dois modos de visualização: regular e switch. Se esta propriedade for omitida, o componete assume o formato "regular". No modo "regular" a visualização é a tradicional de uma caixinha marcada/desmarcada. No modo "switch" o campo tem uma interface em formato de um pino liga/desliga. | `string` | `CheckMode.REGULAR` |
16
- | `value` | `value` | Como se trata de um componente binário, o valor alterna entre true e false (marcado / desmarcado) | `boolean` | `undefined` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | --------------- | --------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------- |
12
+ | `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
13
+ | `indeterminate` | `indeterminate` | Se true ativa o estado indeterminado, nem marcado nem desmarcado (não disponível em modo `switch`). | `boolean` | `undefined` |
14
+ | `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
15
+ | `mode` | `mode` | Define o modo de visualização do ez-check. | `CheckMode.REGULAR \| CheckMode.SWITCH` | `CheckMode.REGULAR` |
16
+ | `value` | `value` | Define o valor do campo. | `boolean` | `undefined` |
17
17
 
18
18
 
19
19
  ## Events
20
20
 
21
- | Event | Description | Type |
22
- | ---------- | -------------------------------------------------------- | ------------------ |
23
- | `ezChange` | Evento disparado ao mudar o estado do check(onEzChange). | `CustomEvent<any>` |
21
+ | Event | Description | Type |
22
+ | ---------- | ------------------------------------------------------ | ------------------ |
23
+ | `ezChange` | Emitido quando acontece a alteração de valor do campo. | `CustomEvent<any>` |
24
24
 
25
25
 
26
26
  ## Methods
27
27
 
28
- ### `getMode() => Promise<string>`
28
+ ### `getMode() => Promise<CheckMode>`
29
29
 
30
- Devolve o modo escolhido para o componente
30
+ Obtém o modo escolhido.
31
31
 
32
32
  #### Returns
33
33
 
34
- Type: `Promise<string>`
34
+ Type: `Promise<CheckMode>`
35
35
 
36
36
 
37
37
 
38
38
  ### `setFocus() => Promise<void>`
39
39
 
40
- Faz o foco no componente de input
40
+ Aplica o foco no campo.
41
41
 
42
42
  #### Returns
43
43
 
@@ -62,3 +62,48 @@ graph TD;
62
62
  ----------------------------------------------
63
63
 
64
64
 
65
+
66
+
67
+ ## CSS Variables
68
+ | Variable | Description |
69
+ |-|-|
70
+ | --ez-check--box--width | Define a largura do box do checkbox. |
71
+ | --ez-check--box--height | Define a altura do box do checkbox. |
72
+ | --ez-check--width | Define a largura do input do checkbox. |
73
+ | --ez-check--height | Define a altura do input do checkbox |
74
+ | --ez-check--border-radius | Define o raio da borda do input do checkbox. |
75
+ | --ez-check--checked--background-color | Define a cor de fundo do input do checkbox quando marcado. |
76
+ | --ez-check--focus--background-color | Define a cor de fundo do input do checkbox quando focado. |
77
+ | --ez-check--hover--background-color | Define a cor de fundo do input do checkbox quando o cursor está sobre ele. |
78
+ | --ez-check--checked--disabled--background-color | Define a cor de fundo do input do checkbox quando marcado e desabilitado. |
79
+ | --ez-check--border | Define o estilo da borda do input do checkbox. |
80
+ | --ez-check--disabled--border | Define o estilo da borda do input do checkbox quando desabilitado. |
81
+ | --ez-check--checked--border | Define o estilo da borda do input do checkbox quando marcado. |
82
+ | --ez-check--checked--hover--background-color | Define a cor de fundo do input do checkbox quando ativo e com o cursor sobre ele. |
83
+ | --ez-check--checked--focus--background-color | Define a cor de fundo do input do checkbox quando ativo e focado. |
84
+ | --ez-check--check--image | Contém o ícone do input marcado. |
85
+ | --ez-check--indeterminate--image | Ícone usado para o estado "indeterminado" do componente. |
86
+ | --ez-check--check--background-color | Define a cor de fundo do slot do ícone quando marcado. |
87
+ | --ez-check--check--disabled--background-color | Define a cor de fundo do slot do ícone quando marcado e desabilitado. |
88
+ | --ez-switch--slider--width | Define a largura do slider do checkbox. |
89
+ | --ez-switch--slider--height | Define a altura do slider do checkbox. |
90
+ | --ez-switch--pin--width | Define a largura do pino do slider do checkbox. |
91
+ | --ez-switch--pin--height | Define a altura do pino do slider do checkbox. |
92
+ | --ez-switch--focus--width | Define a largura do slider quando focado. |
93
+ | --ez-switch--focus--height | Define a altura do slider quando focado. |
94
+ | --ez-switch--background-color | Define a cor de fundo do checkbox no modo switch. |
95
+ | --ez-switch--disabled--background-color | Define a cor de fundo do checkbox desabilitado no modo switch. |
96
+ | --ez-switch--disabled--checked--background-color | Define a cor de fundo do checkbox marcado no modo switch. |
97
+ | --ez-switch--checked--background-color | Define a cor de fundo do checkbox marcado no modo switch. |
98
+ | --ez-switch--pin--background-color | Define a cor de fundo do pino do slider. |
99
+ | --ez-switch--pin--disabled--background-color | Define a cor de fundo do pino do slider quando desabilitado. |
100
+ | --ez-switch--pin--checked--background-color | Define a cor de fundo do pino do slider quando marcado. |
101
+ | --ez-switch--pin--checked--disabled--background-color | Define a cor de fundo do pino do slider quando marcado e desabilitado1. |
102
+ | --ez-switch--pin--focus--background-color | Define a cor de fundo do pino do slider quando focado. |
103
+ | --ez-switch--pin--checked--focus--background-color | Define a cor de fundo do pino do slider quando marcado e focado. |
104
+ | --ez-switch--pin--border-color | Define a cor da borda do pino do slider. |
105
+ | --ez-switch--pin--disabled--border-color | Define a cor da borda do pino do slider quando desabilitado. |
106
+ | --ez-check--label--font-size | Define o tamanho da fonte do label. |
107
+ | --ez-check--label--font-family | Define a família da fonte do label. |
108
+ | --ez-check--label--color | Define a cor da fonte do label. |
109
+ | --ez-check--label--disabled--color | Define a cor da fonte do label quando desabilitado. |
package/components/ez-chip/readme.md CHANGED
@@ -7,29 +7,29 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | ---------------- | ----------------- | -------------------------------------------------------------------------------------- | --------------------- | ----------- |
12
- | `enabled` | `enabled` | Deixa o componente disponível ou não para seleção. | `boolean` | `true` |
13
- | `label` | `label` | Título exibido no componente. | `string` | `undefined` |
14
- | `mode` | `mode` | Define o modo de uso do cjip: label ou action | `"action" \| "label"` | `undefined` |
15
- | `removePosition` | `remove-position` | Indica se o componente terá a opção de ser removido e qual sua posição: left ou right. | `"left" \| "right"` | `undefined` |
16
- | `value` | `value` | Indica se o componente está ou não ativado. | `boolean` | `false` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | ---------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
12
+ | `enabled` | `enabled` | Se false o usuário não pode interagir com o ez-chip. | `boolean` | `true` |
13
+ | `label` | `label` | Texto a ser apresentado como título do ez-chip. | `string` | `undefined` |
14
+ | `mode` | `mode` | Define o modo de uso do ez-chip. | `"action" \| "label"` | `undefined` |
15
+ | `removePosition` | `remove-position` | Determina o posicionamento do botão de remover (não disponível no modo `action`). Se não informado, não exibe o botão. | `"left" \| "right"` | `undefined` |
16
+ | `value` | `value` | Define o valor do ez-chip. | `boolean` | `false` |
17
17
 
18
18
 
19
19
  ## Events
20
20
 
21
- | Event | Description | Type |
22
- | ------------- | -------------------------------------------------------------------------- | ---------------------- |
23
- | `actionClick` | Evento disparado ao clicar no chip usando o modo "action" (onActionClick). | `CustomEvent<void>` |
24
- | `removeChip` | Evento disparado ao clicar no botão de remoção (onRemoveChip). | `CustomEvent<void>` |
25
- | `valueChange` | Evento disparado quando o estado do componente mudar (onValueChange). | `CustomEvent<boolean>` |
21
+ | Event | Description | Type |
22
+ | ------------- | ----------------------------------------------------------- | ---------------------- |
23
+ | `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>` |
24
+ | `removeChip` | Emitido quando o botão de remoção é acionado. | `CustomEvent<void>` |
25
+ | `valueChange` | Emitido quando acontece a alteração de valor do ez-chip. | `CustomEvent<boolean>` |
26
26
 
27
27
 
28
28
  ## Methods
29
29
 
30
30
  ### `setBlur() => Promise<void>`
31
31
 
32
- Remove o foco no componente de input
32
+ Remove o foco do ez-chip.
33
33
 
34
34
  #### Returns
35
35
 
@@ -39,7 +39,7 @@ Type: `Promise<void>`
39
39
 
40
40
  ### `setFocus() => Promise<void>`
41
41
 
42
- Faz o foco no componente de input
42
+ Aplica o foco no ez-chip.
43
43
 
44
44
  #### Returns
45
45
 
@@ -64,3 +64,27 @@ graph TD;
64
64
  ----------------------------------------------
65
65
 
66
66
 
67
+
68
+
69
+ ## CSS Variables
70
+ | Variable | Description |
71
+ |-|-|
72
+ | --ez-label-chip--height | Define a altura do chip. |
73
+ | --ez-label-chip\_\_label--font-size | Define o tamanho do label. |
74
+ | --ez-label-chip\_\_label--font-family | Define a família da fonte do label. |
75
+ | --ez-label-chip\_\_label--font-weight | Define o peso da fonte do label. |
76
+ | --ez-label-chip\_\_label--space--medium | Define o espaçamento do label. |
77
+ | --ez-label-chip\_\_label--title--primary | Define a cor do texto. |
78
+ | --ez-label-chip\_\_label--text--primary | Define a cor do ícone. |
79
+ | --ez-label-chip\_\_label\_\_container--border-radius | Define o raio da borda do container do chip. |
80
+ | --ez-label-chip\_\_label\_\_container--border | Define o estilo da borda do container. |
81
+ | --ez-label-chip\_\_label\_\_container--border-color-strokes | Define a cor da borda do container. |
82
+ | --ez-label-chip\_\_label\_\_container--color-primary | Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo). |
83
+ | --ez-label-chip\_\_label\_\_container-color--disable-secondary | Define a cor da borda e do fundo quando o chip está desativado. |
84
+ | --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container quando ativo. |
85
+ | --ez-label-chip\_\_label\_\_container--border-color | Define a cor da borda do container quando ativo. |
86
+ | --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda do container quando o cursor está sobre ele. |
87
+ | --ez-label-chip\_\_label\_\_container--default--background-color--hover | Define a cor do fundo do container quando o cursor está sobre ele. |
88
+ | --ez-label-chip\_\_label\_\_container--default--color--hover | Define a cor do texto quando o cursor está sobre ele. |
89
+ | --ez-label-chip\_\_label\_\_container--text--disabled | Define a cor do texto e do ícone quando o chip está desabilitado. |
90
+ | --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda quando o componente está ativo. |
package/components/ez-collapsible-box/readme.md CHANGED
@@ -7,33 +7,33 @@
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Description | Type | Default |
11
- | ----------------- | ---------------- | ---------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
12
- | `conditionalSave` | -- | Define uma condição para salvar ou não uma alteração. | `Function` | `undefined` |
13
- | `editable` | `editable` | Ativa o ícone para edição do componente. | `boolean` | `false` |
14
- | `headerSize` | `header-size` | Define o tamanho do texto e do ícone do componente. | `"large" \| "medium" \| "small" \| "x-large" \| "x-small"` | `"small"` |
15
- | `iconPlacement` | `icon-placement` | Define o local onde o ícone será renderizado. | `"left" \| "right"` | `"left"` |
16
- | `label` | `label` | Título do campo | `string` | `undefined` |
17
- | `removable` | `removable` | Ativa o ícone para remoção do componente. | `boolean` | `false` |
18
- | `stretchTitle` | `stretch-title` | Define se o titulo irá ocupar toda a largura do componente. | `boolean` | `false` |
19
- | `value` | `value` | Valor externalizado que garante a exibição ou não do componente. | `boolean` | `false` |
10
+ | Property | Attribute | Description | Type | Default |
11
+ | ----------------- | ---------------- | --------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
12
+ | `conditionalSave` | -- | Define uma condição para salvar ou não uma alteração. | `Function` | `undefined` |
13
+ | `editable` | `editable` | Se true mostra o ícone para edição do componente. | `boolean` | `false` |
14
+ | `headerSize` | `header-size` | Define o tamanho do texto e do ícone. | `"large" \| "medium" \| "small" \| "x-large" \| "x-small"` | `"small"` |
15
+ | `iconPlacement` | `icon-placement` | Define o posicionamento do ícone. | `"left" \| "right"` | `"left"` |
16
+ | `label` | `label` | Texto a ser apresentado como título do componente. | `string` | `undefined` |
17
+ | `removable` | `removable` | Se true mostra o ícone para remoção do componente. | `boolean` | `false` |
18
+ | `stretchTitle` | `stretch-title` | Se true o título irá ocupar toda a largura do componente. | `boolean` | `false` |
19
+ | `value` | `value` | Define o valor do componente. | `boolean` | `false` |
20
20
 
21
21
 
22
22
  ## Events
23
23
 
24
- | Event | Description | Type |
25
- | ----------------- | ------------------------------------------------------------------------------------------- | ------------------------------- |
26
- | `ezChange` | Evento disparado ao mudar o estado do componente (onEzChange). | `CustomEvent<boolean>` |
27
- | `ezEditLabelMode` | Evento disparado quando o modo de edição da label for aberto e fechado (onEzEditLabelMode). | `CustomEvent<boolean>` |
28
- | `ezRemove` | Evento disparado ao remover o componente (onEzRemove). | `CustomEvent<EzCollapsibleBox>` |
29
- | `ezSaveEditLabel` | Evento disparado ao concluir edição da label (onEzSaveEditLabel). | `CustomEvent<CustomEvent<any>>` |
24
+ | Event | Description | Type |
25
+ | ----------------- | ---------------------------------------------------------------------------------- | ------------------------------- |
26
+ | `ezChange` | Emitido quando acontece a alteração de valor do componente. | `CustomEvent<boolean>` |
27
+ | `ezEditLabelMode` | Emitido quando o modo de edição da label for aberto e fechado (onEzEditLabelMode). | `CustomEvent<boolean>` |
28
+ | `ezRemove` | Emitido ao remover o componente (onEzRemove). | `CustomEvent<EzCollapsibleBox>` |
29
+ | `ezSaveEditLabel` | Emitido ao concluir edição da label (onEzSaveEditLabel). | `CustomEvent<CustomEvent<any>>` |
30
30
 
31
31
 
32
32
  ## Methods
33
33
 
34
34
  ### `applyFocusTextEdit() => Promise<void>`
35
35
 
36
- Aplica focus no campo de edição de título.
36
+ Aplica o foco no campo de edição de título.
37
37
 
38
38
  #### Returns
39
39
 
@@ -43,7 +43,7 @@ Type: `Promise<void>`
43
43
 
44
44
  ### `cancelEdition() => Promise<void>`
45
45
 
46
- Fecha a edição de título.
46
+ Cancela a edição de título.
47
47
 
48
48
  #### Returns
49
49
 
@@ -53,7 +53,7 @@ Type: `Promise<void>`
53
53
 
54
54
  ### `showHide() => Promise<void>`
55
55
 
56
- Esconde ou revela o conteúdo do componente.
56
+ Oculta/mostra o conteúdo do ez-collapsible-box.
57
57
 
58
58
  #### Returns
59
59
 
@@ -88,3 +88,18 @@ graph TD;
88
88
  ----------------------------------------------
89
89
 
90
90
 
91
+
92
+
93
+ ## CSS Variables
94
+ | Variable | Description |
95
+ |-|-|
96
+ | --ez-collapsible-box--font-size | Define o tamanho da fonte do header. |
97
+ | --ez-collapsible-box--font-family | Define a família da fonte do header. |
98
+ | --ez-collapsible-box--font-weight | Define o peso da fonte do header. |
99
+ | --ez-collapsible-box--color | Define a cor da fonte do header. |
100
+ | --ez-collapsible-box--focus--color | Define a cor do texto e do ícone quando o componente está focado. |
101
+ | --ez-collapsible-box\_\_icon--color | Define a cor do chevron. |
102
+ | --ez-collapsible-box\_\_header--padding-top | Define o espaçamento superior ao header. |
103
+ | --ez-collapsible-box\_\_header--padding-bottom | Define o espaçamento inferior ao header. |
104
+ | --ez-collapsible-box\_\_header--padding-right | Define o espaçamento à direita do header. |
105
+ | --ez-collapsible-box\_\_header--padding-left | Define o espaçamento à esquerda do header. |