@sankhyalabs/ezui-docs 6.2.1 → 6.3.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-avatar/readme.md +1 -0
- package/components/ez-check/readme.md +2 -0
- package/components/ez-chip/readme.md +29 -21
- package/components/ez-classic-input/readme.md +80 -0
- package/components/ez-classic-text-area/readme.md +78 -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-form/readme.md +25 -0
- package/components/ez-form-view/readme.md +26 -0
- package/components/ez-icon/readme.md +12 -0
- package/components/ez-list-item/readme.md +43 -0
- package/components/ez-modal-container/readme.md +7 -0
- package/components/ez-popup/readme.md +15 -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-sortable-list/readme.md +16 -16
- package/components/ez-split-button/readme.md +13 -13
- package/components/ez-text-area/readme.md +16 -2
- package/components/ez-text-input/readme.md +4 -0
- package/components/ez-tooltip/readme.md +6 -0
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `iconName` | `icon-name` | Nome do ícone que deve ser exibido no avatar. | `string` | `undefined` |
|
|
12
13
|
| `imageSrc` | `image-src` | URL da imagem do Avatar. | `string` | `undefined` |
|
|
13
14
|
| `isInteractive` | `is-interactive` | Se true, o Avatar será interativo. Caso contrário, será estático. | `boolean` | `false` |
|
|
14
15
|
| `name` | `name` | Nome do usuário para exibição da inicial. | `string` | `undefined` |
|
|
@@ -53,6 +53,7 @@ Type: `Promise<void>`
|
|
|
53
53
|
### Used by
|
|
54
54
|
|
|
55
55
|
- [ez-form-view](../ez-form-view)
|
|
56
|
+
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
56
57
|
- [ez-list](../ez-list)
|
|
57
58
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
58
59
|
|
|
@@ -60,6 +61,7 @@ Type: `Promise<void>`
|
|
|
60
61
|
```mermaid
|
|
61
62
|
graph TD;
|
|
62
63
|
ez-form-view --> ez-check
|
|
64
|
+
ez-link-builder --> ez-check
|
|
63
65
|
ez-list --> ez-check
|
|
64
66
|
ez-multi-selection-list --> ez-check
|
|
65
67
|
style ez-check fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -7,24 +7,30 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type
|
|
11
|
-
| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
12
|
-
| `disableAutoUpdateValue` | `disable-auto-update-value` | Desabilita a alteração da propriedade value ao clicar. | `boolean`
|
|
13
|
-
| `enabled` | `enabled` | Se false o usuário não pode interagir com o ez-chip. | `boolean`
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | --------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------- |
|
|
12
|
+
| `disableAutoUpdateValue` | `disable-auto-update-value` | Desabilita a alteração da propriedade value ao clicar. | `boolean` | `false` |
|
|
13
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o ez-chip. | `boolean` | `true` |
|
|
14
|
+
| `iconNameLeft` | `icon-name-left` | Define o icone esquerdo. | `string` | `undefined` |
|
|
15
|
+
| `iconNameRight` | `icon-name-right` | Define o icone direito. | `string` | `undefined` |
|
|
16
|
+
| `label` | `label` | Texto a ser apresentado como título do ez-chip. | `string` | `undefined` |
|
|
17
|
+
| `maxWidth` | `max-width` | Define o tamanho máximo do chip. | `string` | `undefined` |
|
|
18
|
+
| `mode` | `mode` | Define o modo de uso do ez-chip. | `"action" \| "label"` | `undefined` |
|
|
19
|
+
| `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` |
|
|
20
|
+
| `showNativeTooltip` | `show-native-tooltip` | Exibe condicionalmente o tooltip nativo do navegador ao sobrepor o cursor acima do elemento. | `boolean` | `false` |
|
|
21
|
+
| `size` | `size` | Define o tamanho do chip. | `"default" \| "large" \| "medium"` | `'default'` |
|
|
22
|
+
| `type` | `type` | Define o tipo de estilização do chip. | `"primary" \| "secondary"` | `'primary'` |
|
|
23
|
+
| `value` | `value` | Define o valor do ez-chip. | `boolean` | `false` |
|
|
19
24
|
|
|
20
25
|
|
|
21
26
|
## Events
|
|
22
27
|
|
|
23
|
-
| Event | Description | Type
|
|
24
|
-
| ------------- | ----------------------------------------------------------- |
|
|
25
|
-
| `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>`
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
+
| Event | Description | Type |
|
|
29
|
+
| ------------- | ----------------------------------------------------------- | ------------------------------------------- |
|
|
30
|
+
| `actionClick` | Emitido no modo "action" quando o usuário clica no ez-chip. | `CustomEvent<void>` |
|
|
31
|
+
| `iconClick` | Emitido quando o icone é acionado. | `CustomEvent<{ icon: "left" \| "right"; }>` |
|
|
32
|
+
| `removeChip` | Emitido quando o botão de remoção é acionado. | `CustomEvent<void>` |
|
|
33
|
+
| `valueChange` | Emitido quando acontece a alteração de valor do ez-chip. | `CustomEvent<boolean>` |
|
|
28
34
|
|
|
29
35
|
|
|
30
36
|
## Methods
|
|
@@ -54,11 +60,13 @@ Type: `Promise<void>`
|
|
|
54
60
|
|
|
55
61
|
### Depends on
|
|
56
62
|
|
|
63
|
+
- [ez-tooltip](../ez-tooltip)
|
|
57
64
|
- [ez-icon](../ez-icon)
|
|
58
65
|
|
|
59
66
|
### Graph
|
|
60
67
|
```mermaid
|
|
61
68
|
graph TD;
|
|
69
|
+
ez-chip --> ez-tooltip
|
|
62
70
|
ez-chip --> ez-icon
|
|
63
71
|
style ez-chip fill:#f9f,stroke:#333,stroke-width:4px
|
|
64
72
|
```
|
|
@@ -75,19 +83,19 @@ graph TD;
|
|
|
75
83
|
| --ez-label-chip\_\_label--font-size | Define o tamanho do label. |
|
|
76
84
|
| --ez-label-chip\_\_label--font-family | Define a família da fonte do label. |
|
|
77
85
|
| --ez-label-chip\_\_label--font-weight | Define o peso da fonte do label. |
|
|
78
|
-
| --ez-label-chip\_\
|
|
79
|
-
| --ez-label-chip\_\_label--
|
|
80
|
-
| --ez-label-chip\_\_label--
|
|
86
|
+
| --ez-label-chip\_\_horizontal-padding | Define o espaçamento do label. |
|
|
87
|
+
| --ez-label-chip\_\_label--text--primary | Define a cor do texto. |
|
|
88
|
+
| --ez-label-chip\_\_label--icon--primary | Define a cor do ícone. |
|
|
81
89
|
| --ez-label-chip\_\_label\_\_container--border-radius | Define o raio da borda do container do chip. |
|
|
82
90
|
| --ez-label-chip\_\_label\_\_container--border | Define o estilo da borda do container. |
|
|
83
91
|
| --ez-label-chip\_\_label\_\_container--border-color-strokes | Define a cor da borda do container. |
|
|
84
92
|
| --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). |
|
|
85
93
|
| --ez-label-chip\_\_label\_\_container-color--disable-secondary | Define a cor da borda e do fundo quando o chip está desativado. |
|
|
86
|
-
| --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container
|
|
94
|
+
| --ez-label-chip\_\_label\_\_container--background-color | Define a cor de fundo do container. |
|
|
87
95
|
| --ez-label-chip\_\_label\_\_container--border-color | Define a cor da borda do container quando ativo. |
|
|
88
|
-
| --ez-label-chip\_\_label\_\_container--
|
|
89
|
-
| --ez-label-chip\_\_label\_\_container--default--background-color--
|
|
90
|
-
| --ez-label-chip\_\_label\_\_container--default--color--
|
|
96
|
+
| --ez-label-chip\_\_label\_\_container--border-color-active | Define a cor da borda do container quando ativo. |
|
|
97
|
+
| --ez-label-chip\_\_label\_\_container--default--background-color--active | Define a cor do fundo do container quando o cursor está ativo. |
|
|
98
|
+
| --ez-label-chip\_\_label\_\_container--default--color--active | Define a cor do texto quando o cursor está sobre ele. |
|
|
91
99
|
| --ez-label-chip\_\_label\_\_container--text--disabled | Define a cor do texto e do ícone quando o chip está desabilitado. |
|
|
92
100
|
| --ez-label-chip\_\_label\_\_container--default--border-color--active | Define a cor da borda quando o componente está ativo. |
|
|
93
101
|
| --ez-label-chip\_\_label\_\_container--default--margin-top | Define a margem superior. |
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
# ez-classic-input
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
|
|
12
|
+
| `emitMaskedValue` | `emit-masked-value` | Define se o valor emitido pelo evento ezChange deve conter a máscara aplicada (padrão: false) | `boolean` | `false` |
|
|
13
|
+
| `enabled` | `enabled` | Define se o input está habilitado | `boolean` | `true` |
|
|
14
|
+
| `helpText` | `help-text` | Texto de ajuda exibido abaixo do input | `string` | `undefined` |
|
|
15
|
+
| `label` | `label` | Texto do label exibido acima do input | `string` | `undefined` |
|
|
16
|
+
| `leftIconClickable` | `left-icon-clickable` | Define se o ícone da esquerda é clicável | `boolean` | `false` |
|
|
17
|
+
| `leftIconName` | `left-icon-name` | Nome do ícone à esquerda | `string` | `undefined` |
|
|
18
|
+
| `leftIconTooltip` | `left-icon-tooltip` | Título do ícone à esquerda (tooltip) | `string` | `undefined` |
|
|
19
|
+
| `mask` | `mask` | Aplica uma máscara no conteúdo conforme o padrão estabelecido. Para mais informações acesse: https://gilded-nasturtium-6b64dd.netlify.app/docs/utilities/api/classes/maskformatter/ | `string` | `undefined` |
|
|
20
|
+
| `maxlength` | `maxlength` | Tamanho máximo do valor | `number` | `undefined` |
|
|
21
|
+
| `minlength` | `minlength` | Tamanho mínimo do valor | `number` | `undefined` |
|
|
22
|
+
| `name` | `name` | Nome do input | `string` | `undefined` |
|
|
23
|
+
| `placeholder` | `placeholder` | Placeholder do input | `string` | `undefined` |
|
|
24
|
+
| `readonly` | `readonly` | Define se o input é somente leitura | `boolean` | `false` |
|
|
25
|
+
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável | `boolean` | `false` |
|
|
26
|
+
| `rightIconName` | `right-icon-name` | Nome do ícone à direita | `string` | `undefined` |
|
|
27
|
+
| `rightIconTooltip` | `right-icon-tooltip` | Título do ícone à direita (tooltip) | `string` | `undefined` |
|
|
28
|
+
| `state` | `state` | Estado visual do input: default, error, success ou warning | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
29
|
+
| `type` | `type` | Tipo do input (ex: text, password, email, etc) | `string` | `'text'` |
|
|
30
|
+
| `value` | `value` | Valor do input | `string` | `undefined` |
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
## Events
|
|
34
|
+
|
|
35
|
+
| Event | Description | Type |
|
|
36
|
+
| ----------- | -------------------------------------------------------------------------------- | ------------------------------------------- |
|
|
37
|
+
| `ezBlur` | Evento disparado quando o input perde o foco. | `CustomEvent<string>` |
|
|
38
|
+
| `ezChange` | Evento disparado quando o valor do input muda. | `CustomEvent<string>` |
|
|
39
|
+
| `iconClick` | Evento disparado quando um ícone é clicado. Payload: { icon: "left" \| "right" } | `CustomEvent<{ icon: "left" \| "right"; }>` |
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
## Methods
|
|
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(option?: OptionsSetFocus) => 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
|
+
### Depends on
|
|
68
|
+
|
|
69
|
+
- [ez-icon](../ez-icon)
|
|
70
|
+
|
|
71
|
+
### Graph
|
|
72
|
+
```mermaid
|
|
73
|
+
graph TD;
|
|
74
|
+
ez-classic-input --> ez-icon
|
|
75
|
+
style ez-classic-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
----------------------------------------------
|
|
79
|
+
|
|
80
|
+
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
# ez-classic-text-area
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------------- | ---------------------- | -------------------------------------------------------------- | ------------------------------------------------ | ---------------------------- |
|
|
12
|
+
| `enabled` | `enabled` | Define se a textarea está habilitada | `boolean` | `true` |
|
|
13
|
+
| `helpText` | `help-text` | Texto de ajuda exibido abaixo da textarea | `string` | `undefined` |
|
|
14
|
+
| `label` | `label` | Texto do rótulo exibido acima da área de texto | `string` | `''` |
|
|
15
|
+
| `leftIconClickable` | `left-icon-clickable` | Define se o ícone da esquerda é clicável | `boolean` | `false` |
|
|
16
|
+
| `leftIconName` | `left-icon-name` | Nome do ícone à esquerda | `string` | `undefined` |
|
|
17
|
+
| `leftIconTooltip` | `left-icon-tooltip` | Título do ícone à esquerda (tooltip) | `string` | `undefined` |
|
|
18
|
+
| `maxlength` | `maxlength` | Número máximo de caracteres permitidos | `number` | `undefined` |
|
|
19
|
+
| `name` | `name` | Nome da textarea | `string` | `StringUtils.generateUUID()` |
|
|
20
|
+
| `placeholder` | `placeholder` | Texto de placeholder exibido quando a área de texto está vazia | `string` | `''` |
|
|
21
|
+
| `readonly` | `readonly` | Se a área de texto é somente leitura | `boolean` | `false` |
|
|
22
|
+
| `resize` | `resize` | Comportamento de redimensionamento da área de texto | `"both" \| "horizontal" \| "none" \| "vertical"` | `'vertical'` |
|
|
23
|
+
| `rightIconClickable` | `right-icon-clickable` | Define se o ícone da direita é clicável | `boolean` | `false` |
|
|
24
|
+
| `rightIconName` | `right-icon-name` | Nome do ícone à direita | `string` | `undefined` |
|
|
25
|
+
| `rightIconTooltip` | `right-icon-tooltip` | Título do ícone à direita (tooltip) | `string` | `undefined` |
|
|
26
|
+
| `rows` | `rows` | Define o número de linhas da área de texto | `number` | `5` |
|
|
27
|
+
| `state` | `state` | Estado visual da textarea: default, error, success ou warning | `"default" \| "error" \| "success" \| "warning"` | `"default"` |
|
|
28
|
+
| `value` | `value` | Valor atual da área de texto | `string` | `''` |
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
## Events
|
|
32
|
+
|
|
33
|
+
| Event | Description | Type |
|
|
34
|
+
| ----------- | -------------------------------------------------------------------------------- | ------------------------------------------- |
|
|
35
|
+
| `ezBlur` | Evento emitido quando a área de texto perde foco | `CustomEvent<string>` |
|
|
36
|
+
| `ezChange` | Evento emitido quando o valor da área de texto muda | `CustomEvent<string>` |
|
|
37
|
+
| `iconClick` | Evento disparado quando um ícone é clicado. Payload: { icon: "left" \| "right" } | `CustomEvent<{ icon: "left" \| "right"; }>` |
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## Methods
|
|
41
|
+
|
|
42
|
+
### `setBlur() => Promise<void>`
|
|
43
|
+
|
|
44
|
+
Remove o foco do campo.
|
|
45
|
+
|
|
46
|
+
#### Returns
|
|
47
|
+
|
|
48
|
+
Type: `Promise<void>`
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### `setFocus(option?: OptionsSetFocus) => Promise<void>`
|
|
53
|
+
|
|
54
|
+
Aplica o foco no campo.
|
|
55
|
+
|
|
56
|
+
#### Returns
|
|
57
|
+
|
|
58
|
+
Type: `Promise<void>`
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
## Dependencies
|
|
64
|
+
|
|
65
|
+
### Depends on
|
|
66
|
+
|
|
67
|
+
- [ez-icon](../ez-icon)
|
|
68
|
+
|
|
69
|
+
### Graph
|
|
70
|
+
```mermaid
|
|
71
|
+
graph TD;
|
|
72
|
+
ez-classic-text-area --> ez-icon
|
|
73
|
+
style ez-classic-text-area fill:#f9f,stroke:#333,stroke-width:4px
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
----------------------------------------------
|
|
77
|
+
|
|
78
|
+
|
|
@@ -7,17 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ----------------- | ------------------- | -------------------------------------------------------------------- | --------------------------- |
|
|
12
|
-
| `maxWidth` | `max-width` | Largura máxima da lista, em pixels. | `number` | `undefined`
|
|
13
|
-
| `onOptionHover` | -- | Callback chamado quando o mouse passa sobre uma opção. | `(index: number) => void` | `undefined`
|
|
14
|
-
| `onOptionSelect` | -- | Callback chamado quando uma opção é selecionada. | `(option: IOption) => void` | `undefined`
|
|
15
|
-
| `preSelection` | `pre-selection` | Índice da opção pré-selecionada na lista. | `number` | `undefined`
|
|
16
|
-
| `showLoading` | `show-loading` | Indica se o indicador de carregamento deve ser exibido. | `boolean` | `undefined`
|
|
17
|
-
| `showOptionValue` | `show-option-value` | Indica se o valor de cada opção deve ser exibido junto com o rótulo. | `boolean` | `undefined`
|
|
18
|
-
| `textEmptyList` | `text-empty-list` | Mensagem exibida quando a lista de opções está vazia. | `string` | `
|
|
19
|
-
| `visibleOptions` | -- | Lista de opções visíveis que serão exibidas no componente. | `IOption[]` | `undefined`
|
|
20
|
-
| `width` | `width` | Largura fixa da lista, em pixels. | `number` | `undefined`
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ----------------- | ------------------- | -------------------------------------------------------------------- | --------------------------- | ----------- |
|
|
12
|
+
| `maxWidth` | `max-width` | Largura máxima da lista, em pixels. | `number` | `undefined` |
|
|
13
|
+
| `onOptionHover` | -- | Callback chamado quando o mouse passa sobre uma opção. | `(index: number) => void` | `undefined` |
|
|
14
|
+
| `onOptionSelect` | -- | Callback chamado quando uma opção é selecionada. | `(option: IOption) => void` | `undefined` |
|
|
15
|
+
| `preSelection` | `pre-selection` | Índice da opção pré-selecionada na lista. | `number` | `undefined` |
|
|
16
|
+
| `showLoading` | `show-loading` | Indica se o indicador de carregamento deve ser exibido. | `boolean` | `undefined` |
|
|
17
|
+
| `showOptionValue` | `show-option-value` | Indica se o valor de cada opção deve ser exibido junto com o rótulo. | `boolean` | `undefined` |
|
|
18
|
+
| `textEmptyList` | `text-empty-list` | Mensagem exibida quando a lista de opções está vazia. | `string` | `undefined` |
|
|
19
|
+
| `visibleOptions` | -- | Lista de opções visíveis que serão exibidas no componente. | `IOption[]` | `undefined` |
|
|
20
|
+
| `width` | `width` | Largura fixa da lista, em pixels. | `number` | `undefined` |
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
## Methods
|
|
@@ -7,28 +7,29 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ---------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|
12
|
-
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined`
|
|
13
|
-
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false`
|
|
14
|
-
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true`
|
|
15
|
-
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true`
|
|
16
|
-
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined`
|
|
17
|
-
| `hideErrorOnFocusOut` | `hide-error-on-focus-out` | Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente. | `boolean` | `true`
|
|
18
|
-
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto. | `boolean` | `false`
|
|
19
|
-
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined`
|
|
20
|
-
| `limitCharsToSearch` | `limit-chars-to-search` | Define o limite de caracteres mínimo para realizar uma pesquisa | `number` | `3`
|
|
21
|
-
| `listOptionsPosition` | -- | Define um posicionamento fixo para a lista de opções do CheckBox. | `IEzCheckBoxListPosition` | `undefined`
|
|
22
|
-
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"`
|
|
23
|
-
| `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument) => IOption \| IOption[] \| Promise<IOption[]>` | `undefined`
|
|
24
|
-
| `options` | -- | Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IOption[]` | `undefined`
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined` |
|
|
13
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
14
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
15
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
16
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
17
|
+
| `hideErrorOnFocusOut` | `hide-error-on-focus-out` | Quando verdadeiro deixa de exibir a mensagem de erro (se existente) quando focar em um elemento diferente. | `boolean` | `true` |
|
|
18
|
+
| `isTextSearch` | `is-text-search` | Informa se a pesquisa é do tipo texto. | `boolean` | `false` |
|
|
19
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
20
|
+
| `limitCharsToSearch` | `limit-chars-to-search` | Define o limite de caracteres mínimo para realizar uma pesquisa | `number` | `3` |
|
|
21
|
+
| `listOptionsPosition` | -- | Define um posicionamento fixo para a lista de opções do CheckBox. | `IEzCheckBoxListPosition` | `undefined` |
|
|
22
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
23
|
+
| `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument) => IOption \| IOption[] \| Promise<IOption[]>` | `undefined` |
|
|
24
|
+
| `options` | -- | Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`. | `IOption[]` | `undefined` |
|
|
25
|
+
| `preventAutoFocus` | `prevent-auto-focus` | Se true, impede que o campo de texto receba foco automaticamente ao abrir as opções. | `boolean` | `false` |
|
|
26
|
+
| `showOptionValue` | `show-option-value` | Se true cada opção na lista exibe o `value` junto com `label`. | `boolean` | `false` |
|
|
27
|
+
| `showSelectedValue` | `show-selected-value` | Se true a opção selecionada exibe o `value` junto com `label`. | `boolean` | `false` |
|
|
28
|
+
| `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, ineterrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `true` |
|
|
29
|
+
| `suppressEmptyOption` | `suppress-empty-option` | Se true remove a opção vazia da lista. | `boolean` | `false` |
|
|
30
|
+
| `suppressSearch` | `suppress-search` | Se true desabilita a digitação dentro do componente. | `boolean` | `false` |
|
|
31
|
+
| `textEmptyOption` | `text-empty-option` | Texto a ser apresentado na opção de valor nulo. | `string` | `undefined` |
|
|
32
|
+
| `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` |
|
|
32
33
|
|
|
33
34
|
|
|
34
35
|
## Events
|
|
@@ -91,6 +91,7 @@ graph TD;
|
|
|
91
91
|
ez-form-view --> ez-text-input
|
|
92
92
|
ez-form-view --> ez-search-plus
|
|
93
93
|
ez-form-view --> ez-search
|
|
94
|
+
ez-form-view --> ez-rich-text
|
|
94
95
|
ez-collapsible-box --> ez-icon
|
|
95
96
|
ez-collapsible-box --> ez-text-edit
|
|
96
97
|
ez-text-edit --> ez-text-input
|
|
@@ -112,6 +113,8 @@ graph TD;
|
|
|
112
113
|
ez-date-time-input --> ez-popover-plus
|
|
113
114
|
ez-date-time-input --> ez-calendar
|
|
114
115
|
ez-number-input --> ez-text-input
|
|
116
|
+
ez-text-area --> ez-tooltip
|
|
117
|
+
ez-text-area --> ez-icon
|
|
115
118
|
ez-search-plus --> ez-icon
|
|
116
119
|
ez-search-plus --> ez-text-input
|
|
117
120
|
ez-search-plus --> ez-popover-plus
|
|
@@ -123,6 +126,28 @@ graph TD;
|
|
|
123
126
|
ez-search --> ez-popover-plus
|
|
124
127
|
ez-search --> search-list
|
|
125
128
|
search-list --> ez-card-item
|
|
129
|
+
ez-rich-text --> ez-text-area
|
|
130
|
+
ez-rich-text --> ez-rich-toolbar
|
|
131
|
+
ez-rich-text --> ez-link-builder
|
|
132
|
+
ez-rich-text --> ez-simple-image-uploader
|
|
133
|
+
ez-rich-toolbar --> ez-rich-toolbar-arrows
|
|
134
|
+
ez-rich-toolbar --> ez-rich-toolbar-letters
|
|
135
|
+
ez-rich-toolbar --> ez-rich-toolbar-configs
|
|
136
|
+
ez-rich-toolbar-arrows --> ez-rich-toolbar-item
|
|
137
|
+
ez-rich-toolbar-item --> ez-icon
|
|
138
|
+
ez-rich-toolbar-letters --> ez-rich-toolbar-item
|
|
139
|
+
ez-rich-toolbar-configs --> ez-rich-toolbar-item
|
|
140
|
+
ez-link-builder --> ez-popup
|
|
141
|
+
ez-link-builder --> ez-modal-container
|
|
142
|
+
ez-link-builder --> ez-text-input
|
|
143
|
+
ez-link-builder --> ez-check
|
|
144
|
+
ez-modal-container --> ez-icon
|
|
145
|
+
ez-modal-container --> ez-button
|
|
146
|
+
ez-simple-image-uploader --> ez-popup
|
|
147
|
+
ez-simple-image-uploader --> ez-modal-container
|
|
148
|
+
ez-simple-image-uploader --> ez-tooltip
|
|
149
|
+
ez-simple-image-uploader --> ez-text-input
|
|
150
|
+
ez-simple-image-uploader --> ez-icon
|
|
126
151
|
style ez-form fill:#f9f,stroke:#333,stroke-width:4px
|
|
127
152
|
```
|
|
128
153
|
|
|
@@ -76,6 +76,7 @@ Type: `Promise<void>`
|
|
|
76
76
|
- [ez-text-input](../ez-text-input)
|
|
77
77
|
- [ez-search-plus](../ez-search-plus)
|
|
78
78
|
- [ez-search](../ez-search)
|
|
79
|
+
- [ez-rich-text](../ez-rich-text)
|
|
79
80
|
|
|
80
81
|
### Graph
|
|
81
82
|
```mermaid
|
|
@@ -93,6 +94,7 @@ graph TD;
|
|
|
93
94
|
ez-form-view --> ez-text-input
|
|
94
95
|
ez-form-view --> ez-search-plus
|
|
95
96
|
ez-form-view --> ez-search
|
|
97
|
+
ez-form-view --> ez-rich-text
|
|
96
98
|
ez-collapsible-box --> ez-icon
|
|
97
99
|
ez-collapsible-box --> ez-text-edit
|
|
98
100
|
ez-text-edit --> ez-text-input
|
|
@@ -114,6 +116,8 @@ graph TD;
|
|
|
114
116
|
ez-date-time-input --> ez-popover-plus
|
|
115
117
|
ez-date-time-input --> ez-calendar
|
|
116
118
|
ez-number-input --> ez-text-input
|
|
119
|
+
ez-text-area --> ez-tooltip
|
|
120
|
+
ez-text-area --> ez-icon
|
|
117
121
|
ez-search-plus --> ez-icon
|
|
118
122
|
ez-search-plus --> ez-text-input
|
|
119
123
|
ez-search-plus --> ez-popover-plus
|
|
@@ -125,6 +129,28 @@ graph TD;
|
|
|
125
129
|
ez-search --> ez-popover-plus
|
|
126
130
|
ez-search --> search-list
|
|
127
131
|
search-list --> ez-card-item
|
|
132
|
+
ez-rich-text --> ez-text-area
|
|
133
|
+
ez-rich-text --> ez-rich-toolbar
|
|
134
|
+
ez-rich-text --> ez-link-builder
|
|
135
|
+
ez-rich-text --> ez-simple-image-uploader
|
|
136
|
+
ez-rich-toolbar --> ez-rich-toolbar-arrows
|
|
137
|
+
ez-rich-toolbar --> ez-rich-toolbar-letters
|
|
138
|
+
ez-rich-toolbar --> ez-rich-toolbar-configs
|
|
139
|
+
ez-rich-toolbar-arrows --> ez-rich-toolbar-item
|
|
140
|
+
ez-rich-toolbar-item --> ez-icon
|
|
141
|
+
ez-rich-toolbar-letters --> ez-rich-toolbar-item
|
|
142
|
+
ez-rich-toolbar-configs --> ez-rich-toolbar-item
|
|
143
|
+
ez-link-builder --> ez-popup
|
|
144
|
+
ez-link-builder --> ez-modal-container
|
|
145
|
+
ez-link-builder --> ez-text-input
|
|
146
|
+
ez-link-builder --> ez-check
|
|
147
|
+
ez-modal-container --> ez-icon
|
|
148
|
+
ez-modal-container --> ez-button
|
|
149
|
+
ez-simple-image-uploader --> ez-popup
|
|
150
|
+
ez-simple-image-uploader --> ez-modal-container
|
|
151
|
+
ez-simple-image-uploader --> ez-tooltip
|
|
152
|
+
ez-simple-image-uploader --> ez-text-input
|
|
153
|
+
ez-simple-image-uploader --> ez-icon
|
|
128
154
|
ez-form --> ez-form-view
|
|
129
155
|
style ez-form-view fill:#f9f,stroke:#333,stroke-width:4px
|
|
130
156
|
```
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
- [ez-breadcrumb](../ez-breadcrumb)
|
|
27
27
|
- [ez-button](../ez-button)
|
|
28
28
|
- [ez-chip](../ez-chip)
|
|
29
|
+
- [ez-classic-input](../ez-classic-input)
|
|
30
|
+
- [ez-classic-text-area](../ez-classic-text-area)
|
|
29
31
|
- [ez-collapsible-box](../ez-collapsible-box)
|
|
30
32
|
- [ez-combo-box](../ez-combo-box)
|
|
31
33
|
- [ez-dialog](../ez-dialog)
|
|
@@ -33,13 +35,17 @@
|
|
|
33
35
|
- [ez-file-item](../ez-file-item)
|
|
34
36
|
- [ez-filter-input](../ez-filter-input)
|
|
35
37
|
- [ez-grid](../ez-grid)
|
|
38
|
+
- [ez-list-item](../ez-list-item)
|
|
36
39
|
- [ez-modal-container](../ez-modal-container)
|
|
37
40
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
41
|
+
- [ez-rich-toolbar-item](../ez-rich-text/ez-rich-toolbar/ez-rich-toolbar-item)
|
|
38
42
|
- [ez-search](../ez-search)
|
|
39
43
|
- [ez-search-plus](../ez-search-plus)
|
|
40
44
|
- [ez-sidebar-button](../ez-sidebar-button)
|
|
45
|
+
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
41
46
|
- [ez-split-button](../ez-split-button)
|
|
42
47
|
- [ez-tabselector](../ez-tabselector)
|
|
48
|
+
- [ez-text-area](../ez-text-area)
|
|
43
49
|
- [ez-text-input](../ez-text-input)
|
|
44
50
|
- [ez-tile](../ez-tile)
|
|
45
51
|
- [ez-tile-medium](../ez-tile-medium)
|
|
@@ -56,6 +62,8 @@ graph TD;
|
|
|
56
62
|
ez-breadcrumb --> ez-icon
|
|
57
63
|
ez-button --> ez-icon
|
|
58
64
|
ez-chip --> ez-icon
|
|
65
|
+
ez-classic-input --> ez-icon
|
|
66
|
+
ez-classic-text-area --> ez-icon
|
|
59
67
|
ez-collapsible-box --> ez-icon
|
|
60
68
|
ez-combo-box --> ez-icon
|
|
61
69
|
ez-dialog --> ez-icon
|
|
@@ -63,13 +71,17 @@ graph TD;
|
|
|
63
71
|
ez-file-item --> ez-icon
|
|
64
72
|
ez-filter-input --> ez-icon
|
|
65
73
|
ez-grid --> ez-icon
|
|
74
|
+
ez-list-item --> ez-icon
|
|
66
75
|
ez-modal-container --> ez-icon
|
|
67
76
|
ez-multi-selection-list --> ez-icon
|
|
77
|
+
ez-rich-toolbar-item --> ez-icon
|
|
68
78
|
ez-search --> ez-icon
|
|
69
79
|
ez-search-plus --> ez-icon
|
|
70
80
|
ez-sidebar-button --> ez-icon
|
|
81
|
+
ez-simple-image-uploader --> ez-icon
|
|
71
82
|
ez-split-button --> ez-icon
|
|
72
83
|
ez-tabselector --> ez-icon
|
|
84
|
+
ez-text-area --> ez-icon
|
|
73
85
|
ez-text-input --> ez-icon
|
|
74
86
|
ez-tile --> ez-icon
|
|
75
87
|
ez-tile-medium --> ez-icon
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# ez-list-item
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ----------- | ------------ | ------------------------------------------- | -------- | ----------- |
|
|
12
|
+
| `iconName` | `icon-name` | Nome do ícone que deve ser exibido no item. | `string` | `undefined` |
|
|
13
|
+
| `text` | `text` | Texto do item da lista. | `string` | `undefined` |
|
|
14
|
+
| `titleText` | `title-text` | Título do item da lista. | `string` | `undefined` |
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## Dependencies
|
|
18
|
+
|
|
19
|
+
### Depends on
|
|
20
|
+
|
|
21
|
+
- [ez-icon](../ez-icon)
|
|
22
|
+
|
|
23
|
+
### Graph
|
|
24
|
+
```mermaid
|
|
25
|
+
graph TD;
|
|
26
|
+
ez-list-item --> ez-icon
|
|
27
|
+
style ez-list-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
----------------------------------------------
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
## CSS Variables
|
|
36
|
+
| Variable | Description |
|
|
37
|
+
|-|-|
|
|
38
|
+
| --ez-list-item\_\_title--color | Define a cor do título do item da lista. |
|
|
39
|
+
| --ez-list-item\_\_text--color | Define a cor do texto do item da lista. |
|
|
40
|
+
| --ez-list-item\_\_icon--color | Define a cor do ícone do item da lista. |
|
|
41
|
+
| --ez-list-item\_\_background--color | Define a cor do background do item da lista. |
|
|
42
|
+
| --ez-list-item\_\_border--color-hover | Define a cor da borda do item da lista com hover. |
|
|
43
|
+
| --ez-list-item\_\_min-width | Define a largura mínima do componente. |
|
|
@@ -28,6 +28,11 @@
|
|
|
28
28
|
|
|
29
29
|
## Dependencies
|
|
30
30
|
|
|
31
|
+
### Used by
|
|
32
|
+
|
|
33
|
+
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
34
|
+
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
35
|
+
|
|
31
36
|
### Depends on
|
|
32
37
|
|
|
33
38
|
- [ez-icon](../ez-icon)
|
|
@@ -39,6 +44,8 @@ graph TD;
|
|
|
39
44
|
ez-modal-container --> ez-icon
|
|
40
45
|
ez-modal-container --> ez-button
|
|
41
46
|
ez-button --> ez-icon
|
|
47
|
+
ez-link-builder --> ez-modal-container
|
|
48
|
+
ez-simple-image-uploader --> ez-modal-container
|
|
42
49
|
style ez-modal-container fill:#f9f,stroke:#333,stroke-width:4px
|
|
43
50
|
```
|
|
44
51
|
|
|
@@ -25,6 +25,21 @@
|
|
|
25
25
|
| `ezPopupAction` | Evento emitido ao clicar no botão de fechar (ezPopupAction = OK) | `CustomEvent<string>` |
|
|
26
26
|
|
|
27
27
|
|
|
28
|
+
## Dependencies
|
|
29
|
+
|
|
30
|
+
### Used by
|
|
31
|
+
|
|
32
|
+
- [ez-link-builder](../ez-rich-text/ez-link-builder)
|
|
33
|
+
- [ez-simple-image-uploader](../ez-rich-text/ez-simple-image-uploader)
|
|
34
|
+
|
|
35
|
+
### Graph
|
|
36
|
+
```mermaid
|
|
37
|
+
graph TD;
|
|
38
|
+
ez-link-builder --> ez-popup
|
|
39
|
+
ez-simple-image-uploader --> ez-popup
|
|
40
|
+
style ez-popup fill:#f9f,stroke:#333,stroke-width:4px
|
|
41
|
+
```
|
|
42
|
+
|
|
28
43
|
----------------------------------------------
|
|
29
44
|
|
|
30
45
|
|