@sankhyalabs/ezui-docs 5.22.0-dev.12 → 5.22.0-dev.121
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-badge/readme.md +8 -7
- package/components/ez-breadcrumb/readme.md +1 -0
- package/components/ez-button/readme.md +3 -1
- package/components/ez-card-item/readme.md +5 -2
- package/components/ez-chart/readme.md +2 -2
- package/components/ez-check/readme.md +9 -8
- package/components/ez-collapsible-box/readme.md +2 -0
- package/components/ez-combo-box/ez-combo-box-list/readme.md +71 -0
- package/components/ez-combo-box/readme.md +29 -19
- package/components/ez-date-input/readme.md +16 -9
- package/components/ez-date-time-input/readme.md +17 -10
- package/components/ez-double-list/readme.md +70 -0
- package/components/ez-dropdown/readme.md +3 -0
- package/components/ez-filter-input/readme.md +6 -1
- package/components/ez-form/readme.md +18 -2
- package/components/ez-form-view/readme.md +25 -7
- package/components/ez-grid/readme.md +53 -17
- package/components/ez-grid/subcomponents/readme.md +8 -3
- package/components/ez-guide-navigator/readme.md +2 -0
- package/components/ez-icon/readme.md +4 -0
- package/components/ez-list/readme.md +21 -17
- package/components/ez-modal/readme.md +10 -10
- package/components/ez-multi-selection-list/readme.md +6 -1
- package/components/ez-number-input/readme.md +15 -10
- package/components/ez-popover/readme.md +2 -2
- package/components/ez-popover-plus/readme.md +122 -0
- package/components/ez-popover-plus/subcomponent/readme.md +107 -0
- package/components/ez-popup/readme.md +8 -7
- package/components/ez-scroller/readme.md +2 -0
- package/components/ez-search/readme.md +33 -22
- package/components/ez-search/subcomponent/search-list/readme.md +72 -0
- package/components/ez-search-plus/readme.md +130 -0
- package/components/ez-search-plus/subcomponent/ez-search-result-list/readme.md +90 -0
- package/components/ez-skeleton/readme.md +15 -0
- package/components/ez-split-button/readme.md +2 -1
- package/components/ez-split-panel/readme.md +12 -4
- package/components/ez-split-panel/structure/item/readme.md +6 -5
- package/components/ez-text-area/readme.md +13 -10
- package/components/ez-text-edit/readme.md +2 -0
- package/components/ez-text-input/readme.md +25 -12
- package/components/ez-time-input/readme.md +13 -9
- package/components/ez-tooltip/readme.md +38 -0
- package/components/ez-tree/readme.md +5 -4
- package/package.json +1 -1
|
@@ -7,13 +7,14 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------ | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------------------------------------------ |
|
|
12
|
+
| `alignItems` | `align-items` | Define a posição do ícone em relação ao elemento. | `"center" \| "flex-end" \| "flex-start"` | `"center"` |
|
|
13
|
+
| `iconLeft` | `icon-left` | Define o ícone a ser usado no lado esquerdo do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html) | `string` | `undefined` |
|
|
14
|
+
| `iconRight` | `icon-right` | Define o ícone a ser usado no lado direito do badge: [ez-icons](https://sankhyalabs-storybook.herokuapp.com/themes/default/icons/fonts/index.html) | `string` | `undefined` |
|
|
15
|
+
| `label` | `label` | Define o conteúdo textual ou numérico do componente. | `string` | `undefined` |
|
|
16
|
+
| `position` | -- | Define a posição do ícone em relação ao elemento filho. | `IPosition` | `{ horizontal: "right", vertical: "top" }` |
|
|
17
|
+
| `size` | `size` | Define o tamanho de acordo com o tipo utilizado pelo componente. | `"extra-large" \| "extra-small" \| "large" \| "medium" \| "small" \| "small-medium"` | `"small"` |
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
## Dependencies
|
|
@@ -14,7 +14,7 @@
|
|
|
14
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
15
|
| `label` | `label` | Texto a ser apresentado como título do botão. | `string` | `undefined` |
|
|
16
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"`
|
|
17
|
+
| `size` | `size` | Define o tamanho do ez-button. | `"large" \| "medium" \| "small" \| "x-small"` | `undefined` |
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
## Methods
|
|
@@ -47,6 +47,7 @@ Type: `Promise<void>`
|
|
|
47
47
|
- [ez-actions-button](../ez-actions-button)
|
|
48
48
|
- [ez-alert-list](../ez-alert-list)
|
|
49
49
|
- [ez-dialog](../ez-dialog)
|
|
50
|
+
- [ez-double-list](../ez-double-list)
|
|
50
51
|
- [ez-grid](../ez-grid)
|
|
51
52
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
52
53
|
- [ez-modal-container](../ez-modal-container)
|
|
@@ -66,6 +67,7 @@ graph TD;
|
|
|
66
67
|
ez-actions-button --> ez-button
|
|
67
68
|
ez-alert-list --> ez-button
|
|
68
69
|
ez-dialog --> ez-button
|
|
70
|
+
ez-double-list --> ez-button
|
|
69
71
|
ez-grid --> ez-button
|
|
70
72
|
ez-guide-navigator --> ez-button
|
|
71
73
|
ez-modal-container --> ez-button
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------- | ---------- | ----------- |
|
|
12
|
+
| `compacted` | `compacted` | Determina se o componente será apresentado no modo compacto. | `boolean` | `false` |
|
|
12
13
|
| `enableKey` | `enable-key` | Determina se a chave do item deve ser exibida. | `boolean` | `true` |
|
|
13
14
|
| `item` | -- | Determina o conteúdo do card. Deve conter um objeto no formato: `{title: string, key: string, details: any}`. | `CardItem` | `undefined` |
|
|
14
15
|
|
|
@@ -24,12 +25,14 @@
|
|
|
24
25
|
|
|
25
26
|
### Used by
|
|
26
27
|
|
|
27
|
-
- [ez-search](../ez-search)
|
|
28
|
+
- [ez-search-result-list](../ez-search-plus/subcomponent/ez-search-result-list)
|
|
29
|
+
- [search-list](../ez-search/subcomponent/search-list)
|
|
28
30
|
|
|
29
31
|
### Graph
|
|
30
32
|
```mermaid
|
|
31
33
|
graph TD;
|
|
32
|
-
ez-search --> ez-card-item
|
|
34
|
+
ez-search-result-list --> ez-card-item
|
|
35
|
+
search-list --> ez-card-item
|
|
33
36
|
style ez-card-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
34
37
|
```
|
|
35
38
|
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
| `series` | -- | Define as series a serem apresentadas no gráfico | `ChartSerie[] \| ({ data: (number \| ChartSerieData)[]; name?: string; color?: string; type?: "line" \| "column" \| "bar"; yAxis?: number; toolTipFormatter?: (serieName: string, xAxis: string \| number, yAxis: number, dataName: string, percentage: number) => string; showDataLabel?: boolean; })` | `undefined` |
|
|
17
17
|
| `type` | `type` | Define o tipo de gráfico apresentado pelo componente | `ChartType.BAR \| ChartType.COLUMN \| ChartType.DONUT \| ChartType.LINE \| ChartType.PIE` | `ChartType.LINE` |
|
|
18
18
|
| `width` | `width` | Define uma largura do gráfico | `number` | `undefined` |
|
|
19
|
-
| `xAxis` | -- | Definições do eixo X do gráfico | `ChartAxis[] \| ({ color?: string; categories?: string[]; formatter?: (value: string \| number) => string; text?: string; invertedPosition?: boolean; })`
|
|
20
|
-
| `yAxis` | -- | Definições do eixo Y do gráfico | `ChartAxis[] \| ({ color?: string; categories?: string[]; formatter?: (value: string \| number) => string; text?: string; invertedPosition?: boolean; })`
|
|
19
|
+
| `xAxis` | -- | Definições do eixo X do gráfico | `ChartAxis[] \| ({ color?: string; categories?: string[]; formatter?: (value: string \| number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })` | `undefined` |
|
|
20
|
+
| `yAxis` | -- | Definições do eixo Y do gráfico | `ChartAxis[] \| ({ color?: string; categories?: string[]; formatter?: (value: string \| number) => string; text?: string; invertedPosition?: boolean; type?: ChartTypeValue; })` | `undefined` |
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
## Events
|
|
@@ -7,14 +7,15 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------- | --------------------------------------- | ------------------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo a ser apresentado como título do campo. | `string` | `undefined` |
|
|
13
|
+
| `compact` | `compact` | Define o modo compacto com espaçamento menor entre label e o input | `boolean` | `false` |
|
|
14
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
15
|
+
| `indeterminate` | `indeterminate` | Se true ativa o estado indeterminado, nem marcado nem desmarcado (não disponível em modo `switch`). | `boolean` | `undefined` |
|
|
16
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
17
|
+
| `mode` | `mode` | Define o modo de visualização do ez-check. | `CheckMode.REGULAR \| CheckMode.SWITCH` | `CheckMode.REGULAR` |
|
|
18
|
+
| `value` | `value` | Define o valor do campo. | `boolean` | `undefined` |
|
|
18
19
|
|
|
19
20
|
|
|
20
21
|
## Events
|
|
@@ -82,6 +82,8 @@ graph TD;
|
|
|
82
82
|
ez-collapsible-box --> ez-text-edit
|
|
83
83
|
ez-text-edit --> ez-text-input
|
|
84
84
|
ez-text-edit --> ez-button
|
|
85
|
+
ez-text-input --> ez-tooltip
|
|
86
|
+
ez-text-input --> ez-icon
|
|
85
87
|
ez-button --> ez-icon
|
|
86
88
|
ez-form-view --> ez-collapsible-box
|
|
87
89
|
style ez-collapsible-box fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# ez-combo-box-list
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
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` | `"Nenhum resultado encontrado"` |
|
|
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
|
+
|
|
22
|
+
|
|
23
|
+
## Methods
|
|
24
|
+
|
|
25
|
+
### `nextOption() => Promise<void>`
|
|
26
|
+
|
|
27
|
+
Move a seleção para a próxima opção na lista.
|
|
28
|
+
|
|
29
|
+
#### Returns
|
|
30
|
+
|
|
31
|
+
Type: `Promise<void>`
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### `previousOption() => Promise<void>`
|
|
36
|
+
|
|
37
|
+
Move a seleção para a opção anterior na lista, sem ultrapassar o início.
|
|
38
|
+
|
|
39
|
+
#### Returns
|
|
40
|
+
|
|
41
|
+
Type: `Promise<void>`
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
### `selectCurrentOption() => Promise<void>`
|
|
46
|
+
|
|
47
|
+
Seleciona a opção atualmente pré-selecionada.
|
|
48
|
+
|
|
49
|
+
#### Returns
|
|
50
|
+
|
|
51
|
+
Type: `Promise<void>`
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## Dependencies
|
|
57
|
+
|
|
58
|
+
### Used by
|
|
59
|
+
|
|
60
|
+
- [ez-combo-box](..)
|
|
61
|
+
|
|
62
|
+
### Graph
|
|
63
|
+
```mermaid
|
|
64
|
+
graph TD;
|
|
65
|
+
ez-combo-box --> ez-combo-box-list
|
|
66
|
+
style ez-combo-box-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
----------------------------------------------
|
|
70
|
+
|
|
71
|
+
|
|
@@ -7,24 +7,27 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
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
|
+
| `showOptionValue` | `show-option-value` | Se true cada opção na lista exibe o `value` junto com `label`. | `boolean` | `false` |
|
|
26
|
+
| `showSelectedValue` | `show-selected-value` | Se true a opção selecionada exibe o `value` junto com `label`. | `boolean` | `false` |
|
|
27
|
+
| `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, ineterrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `true` |
|
|
28
|
+
| `suppressEmptyOption` | `suppress-empty-option` | Se true remove a opção vazia da lista. | `boolean` | `false` |
|
|
29
|
+
| `suppressSearch` | `suppress-search` | Se true desabilita a digitação dentro do componente. | `boolean` | `false` |
|
|
30
|
+
| `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` |
|
|
28
31
|
|
|
29
32
|
|
|
30
33
|
## Events
|
|
@@ -76,7 +79,7 @@ Type: `Promise<void>`
|
|
|
76
79
|
|
|
77
80
|
|
|
78
81
|
|
|
79
|
-
### `setFocus() => Promise<void>`
|
|
82
|
+
### `setFocus(options?: TFocusOptions) => Promise<void>`
|
|
80
83
|
|
|
81
84
|
Aplica o foco no campo.
|
|
82
85
|
|
|
@@ -97,12 +100,19 @@ Type: `Promise<void>`
|
|
|
97
100
|
|
|
98
101
|
- [ez-text-input](../ez-text-input)
|
|
99
102
|
- [ez-icon](../ez-icon)
|
|
103
|
+
- [ez-popover-plus](../ez-popover-plus)
|
|
104
|
+
- [ez-combo-box-list](ez-combo-box-list)
|
|
100
105
|
|
|
101
106
|
### Graph
|
|
102
107
|
```mermaid
|
|
103
108
|
graph TD;
|
|
104
109
|
ez-combo-box --> ez-text-input
|
|
105
110
|
ez-combo-box --> ez-icon
|
|
111
|
+
ez-combo-box --> ez-popover-plus
|
|
112
|
+
ez-combo-box --> ez-combo-box-list
|
|
113
|
+
ez-text-input --> ez-tooltip
|
|
114
|
+
ez-text-input --> ez-icon
|
|
115
|
+
ez-popover-plus --> ez-popover-core
|
|
106
116
|
ez-form-view --> ez-combo-box
|
|
107
117
|
style ez-combo-box fill:#f9f,stroke:#333,stroke-width:4px
|
|
108
118
|
```
|
|
@@ -7,14 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | --------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo 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
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
18
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
19
|
+
| `value` | -- | Define o valor do campo. | `Date` | `undefined` |
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
## Events
|
|
@@ -58,7 +60,7 @@ Type: `Promise<void>`
|
|
|
58
60
|
|
|
59
61
|
|
|
60
62
|
|
|
61
|
-
### `setFocus() => Promise<void>`
|
|
63
|
+
### `setFocus(options?: TFocusOptions) => Promise<void>`
|
|
62
64
|
|
|
63
65
|
Aplica o foco no campo.
|
|
64
66
|
|
|
@@ -78,13 +80,18 @@ Type: `Promise<void>`
|
|
|
78
80
|
### Depends on
|
|
79
81
|
|
|
80
82
|
- [ez-text-input](../ez-text-input)
|
|
83
|
+
- [ez-popover-plus](../ez-popover-plus)
|
|
81
84
|
- [ez-calendar](../ez-calendar)
|
|
82
85
|
|
|
83
86
|
### Graph
|
|
84
87
|
```mermaid
|
|
85
88
|
graph TD;
|
|
86
89
|
ez-date-input --> ez-text-input
|
|
90
|
+
ez-date-input --> ez-popover-plus
|
|
87
91
|
ez-date-input --> ez-calendar
|
|
92
|
+
ez-text-input --> ez-tooltip
|
|
93
|
+
ez-text-input --> ez-icon
|
|
94
|
+
ez-popover-plus --> ez-popover-core
|
|
88
95
|
ez-form-view --> ez-date-input
|
|
89
96
|
style ez-date-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
90
97
|
```
|
|
@@ -7,15 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------ | ------------------------- | --------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
|
+
| `alternativePlaceholder` | `alternative-placeholder` | Texto alternativo 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
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
18
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
19
|
+
| `showSeconds` | `show-seconds` | Se true considera segundos. | `boolean` | `false` |
|
|
20
|
+
| `value` | -- | Define o valor do campo. | `Date` | `undefined` |
|
|
19
21
|
|
|
20
22
|
|
|
21
23
|
## Events
|
|
@@ -59,7 +61,7 @@ Type: `Promise<void>`
|
|
|
59
61
|
|
|
60
62
|
|
|
61
63
|
|
|
62
|
-
### `setFocus() => Promise<void>`
|
|
64
|
+
### `setFocus(options?: TFocusOptions) => Promise<void>`
|
|
63
65
|
|
|
64
66
|
Aplica o foco no campo.
|
|
65
67
|
|
|
@@ -79,13 +81,18 @@ Type: `Promise<void>`
|
|
|
79
81
|
### Depends on
|
|
80
82
|
|
|
81
83
|
- [ez-text-input](../ez-text-input)
|
|
84
|
+
- [ez-popover-plus](../ez-popover-plus)
|
|
82
85
|
- [ez-calendar](../ez-calendar)
|
|
83
86
|
|
|
84
87
|
### Graph
|
|
85
88
|
```mermaid
|
|
86
89
|
graph TD;
|
|
87
90
|
ez-date-time-input --> ez-text-input
|
|
91
|
+
ez-date-time-input --> ez-popover-plus
|
|
88
92
|
ez-date-time-input --> ez-calendar
|
|
93
|
+
ez-text-input --> ez-tooltip
|
|
94
|
+
ez-text-input --> ez-icon
|
|
95
|
+
ez-popover-plus --> ez-popover-core
|
|
89
96
|
ez-form-view --> ez-date-time-input
|
|
90
97
|
style ez-date-time-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
91
98
|
```
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# ez-double-list
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------- | --------------------- | ----------------------------------------------------------------------------------- | ------------ | ---------------- |
|
|
12
|
+
| `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `'item'` |
|
|
13
|
+
| `entityLabelPlural` | `entity-label-plural` | Variação plura do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `'itens'` |
|
|
14
|
+
| `leftList` | -- | Define a lista origem. | `ListItem[]` | `[]` |
|
|
15
|
+
| `leftListLabel` | `left-list-label` | Rótulo da lista esquerda. | `string` | `'disponíveis'` |
|
|
16
|
+
| `leftTitle` | `left-title` | Define o título da lista origem. | `string` | `undefined` |
|
|
17
|
+
| `rightList` | -- | Define a lista destino. | `ListItem[]` | `[]` |
|
|
18
|
+
| `rightListLabel` | `right-list-label` | Rótulo da lista direita. | `string` | `'selecionados'` |
|
|
19
|
+
| `rightTitle` | `right-title` | Define o título da lista destino. | `string` | `undefined` |
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## Events
|
|
23
|
+
|
|
24
|
+
| Event | Description | Type |
|
|
25
|
+
| -------------------- | ----------- | ------------------------- |
|
|
26
|
+
| `ezLeftListChanged` | | `CustomEvent<ListItem[]>` |
|
|
27
|
+
| `ezRightListChanged` | | `CustomEvent<ListItem[]>` |
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## Methods
|
|
31
|
+
|
|
32
|
+
### `resetSelectedLists() => Promise<void>`
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
#### Returns
|
|
37
|
+
|
|
38
|
+
Type: `Promise<void>`
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
## Dependencies
|
|
44
|
+
|
|
45
|
+
### Depends on
|
|
46
|
+
|
|
47
|
+
- [ez-scroller](../ez-scroller)
|
|
48
|
+
- [ez-list](../ez-list)
|
|
49
|
+
- [ez-filter-input](../ez-filter-input)
|
|
50
|
+
- [ez-button](../ez-button)
|
|
51
|
+
|
|
52
|
+
### Graph
|
|
53
|
+
```mermaid
|
|
54
|
+
graph TD;
|
|
55
|
+
ez-double-list --> ez-scroller
|
|
56
|
+
ez-double-list --> ez-list
|
|
57
|
+
ez-double-list --> ez-filter-input
|
|
58
|
+
ez-double-list --> ez-button
|
|
59
|
+
ez-list --> ez-check
|
|
60
|
+
ez-filter-input --> ez-text-input
|
|
61
|
+
ez-filter-input --> ez-icon
|
|
62
|
+
ez-text-input --> ez-tooltip
|
|
63
|
+
ez-text-input --> ez-icon
|
|
64
|
+
ez-button --> ez-icon
|
|
65
|
+
style ez-double-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
----------------------------------------------
|
|
69
|
+
|
|
70
|
+
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
| Event | Description | Type |
|
|
20
20
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------- |
|
|
21
21
|
| `ezClick` | Emitido quando ocorrer um click em um item da lista, o IDropdownItem que recebeu o click deve ser enviado como data do evento. | `CustomEvent<IDropdownItem>` |
|
|
22
|
+
| `ezHover` | Emitido quando ocorrer o ponteiro do mouse é colocado sobre um item. | `CustomEvent<IDropdownItem>` |
|
|
22
23
|
| `ezOutsideClick` | Emitido quando ocorrer um click fora do componente. | `CustomEvent<void>` |
|
|
23
24
|
| `ezSubActionClick` | Emitido quando ocorrer um click em uma ação secundaria do item, o IDropdownSubAction deve ser enviado como data do evento. | `CustomEvent<IDropdownSubAction>` |
|
|
24
25
|
|
|
@@ -32,11 +33,13 @@
|
|
|
32
33
|
|
|
33
34
|
### Depends on
|
|
34
35
|
|
|
36
|
+
- [ez-skeleton](../ez-skeleton)
|
|
35
37
|
- [ez-icon](../ez-icon)
|
|
36
38
|
|
|
37
39
|
### Graph
|
|
38
40
|
```mermaid
|
|
39
41
|
graph TD;
|
|
42
|
+
ez-dropdown --> ez-skeleton
|
|
40
43
|
ez-dropdown --> ez-icon
|
|
41
44
|
ez-breadcrumb --> ez-dropdown
|
|
42
45
|
ez-split-button --> ez-dropdown
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| -------------- | ---------------- | --------------------------------------------------------------------------------- | --------------------- | ----------- |
|
|
12
12
|
| `asyncSearch` | `async-search` | Define se o campo irá funcionar de forma assíncrona. | `boolean` | `false` |
|
|
13
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
13
14
|
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
14
15
|
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
15
16
|
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
@@ -60,7 +61,7 @@ Type: `Promise<void>`
|
|
|
60
61
|
|
|
61
62
|
|
|
62
63
|
|
|
63
|
-
### `setFocus() => Promise<void>`
|
|
64
|
+
### `setFocus(options?: TFocusOptions) => Promise<void>`
|
|
64
65
|
|
|
65
66
|
Aplica o foco no campo.
|
|
66
67
|
|
|
@@ -85,6 +86,7 @@ Type: `Promise<void>`
|
|
|
85
86
|
|
|
86
87
|
### Used by
|
|
87
88
|
|
|
89
|
+
- [ez-double-list](../ez-double-list)
|
|
88
90
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
89
91
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
90
92
|
|
|
@@ -98,6 +100,9 @@ Type: `Promise<void>`
|
|
|
98
100
|
graph TD;
|
|
99
101
|
ez-filter-input --> ez-text-input
|
|
100
102
|
ez-filter-input --> ez-icon
|
|
103
|
+
ez-text-input --> ez-tooltip
|
|
104
|
+
ez-text-input --> ez-icon
|
|
105
|
+
ez-double-list --> ez-filter-input
|
|
101
106
|
ez-guide-navigator --> ez-filter-input
|
|
102
107
|
ez-multi-selection-list --> ez-filter-input
|
|
103
108
|
style ez-filter-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -81,26 +81,42 @@ graph TD;
|
|
|
81
81
|
ez-form-view --> ez-date-time-input
|
|
82
82
|
ez-form-view --> ez-upload
|
|
83
83
|
ez-form-view --> ez-number-input
|
|
84
|
-
ez-form-view --> ez-search
|
|
85
84
|
ez-form-view --> ez-text-area
|
|
86
85
|
ez-form-view --> ez-text-input
|
|
86
|
+
ez-form-view --> ez-search-plus
|
|
87
|
+
ez-form-view --> ez-search
|
|
87
88
|
ez-collapsible-box --> ez-icon
|
|
88
89
|
ez-collapsible-box --> ez-text-edit
|
|
89
90
|
ez-text-edit --> ez-text-input
|
|
90
91
|
ez-text-edit --> ez-button
|
|
92
|
+
ez-text-input --> ez-tooltip
|
|
93
|
+
ez-text-input --> ez-icon
|
|
91
94
|
ez-button --> ez-icon
|
|
92
95
|
ez-combo-box --> ez-text-input
|
|
93
96
|
ez-combo-box --> ez-icon
|
|
97
|
+
ez-combo-box --> ez-popover-plus
|
|
98
|
+
ez-combo-box --> ez-combo-box-list
|
|
99
|
+
ez-popover-plus --> ez-popover-core
|
|
94
100
|
ez-date-input --> ez-text-input
|
|
101
|
+
ez-date-input --> ez-popover-plus
|
|
95
102
|
ez-date-input --> ez-calendar
|
|
96
103
|
ez-time-input --> ez-text-input
|
|
97
104
|
ez-time-input --> ez-icon
|
|
98
105
|
ez-date-time-input --> ez-text-input
|
|
106
|
+
ez-date-time-input --> ez-popover-plus
|
|
99
107
|
ez-date-time-input --> ez-calendar
|
|
100
108
|
ez-number-input --> ez-text-input
|
|
101
|
-
ez-search --> ez-
|
|
109
|
+
ez-search-plus --> ez-icon
|
|
110
|
+
ez-search-plus --> ez-text-input
|
|
111
|
+
ez-search-plus --> ez-popover-plus
|
|
112
|
+
ez-search-plus --> ez-search-result-list
|
|
113
|
+
ez-search-result-list --> ez-card-item
|
|
114
|
+
ez-search-result-list --> ez-skeleton
|
|
102
115
|
ez-search --> ez-text-input
|
|
103
116
|
ez-search --> ez-icon
|
|
117
|
+
ez-search --> ez-popover-plus
|
|
118
|
+
ez-search --> search-list
|
|
119
|
+
search-list --> ez-card-item
|
|
104
120
|
style ez-form fill:#f9f,stroke:#333,stroke-width:4px
|
|
105
121
|
```
|
|
106
122
|
|