@sankhyalabs/ezui-docs 6.0.1 → 6.1.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 +34 -0
- package/components/ez-card-item/readme.md +2 -0
- package/components/ez-check/readme.md +9 -8
- package/components/ez-combo-box/readme.md +22 -20
- package/components/ez-date-input/readme.md +10 -9
- package/components/ez-date-time-input/readme.md +11 -10
- package/components/ez-double-list/readme.md +20 -21
- package/components/ez-filter-input/readme.md +2 -2
- package/components/ez-form/readme.md +21 -8
- package/components/ez-form-view/readme.md +15 -6
- package/components/ez-grid/readme.md +27 -22
- package/components/ez-icon/readme.md +5 -0
- package/components/ez-list/readme.md +0 -2
- package/components/ez-number-input/readme.md +13 -12
- package/components/ez-popover/readme.md +2 -0
- package/components/ez-popover-plus/readme.md +2 -0
- package/components/ez-scroller/readme.md +0 -2
- package/components/ez-search/readme.md +5 -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 +14 -8
- package/components/ez-sortable-list/readme.md +75 -0
- package/components/ez-split-button/readme.md +33 -11
- package/components/ez-text-area/readme.md +13 -12
- package/components/ez-text-input/readme.md +18 -14
- package/components/ez-time-input/readme.md +11 -10
- package/components/ez-tooltip/readme.md +11 -17
- package/package.json +1 -1
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# ez-avatar
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `imageSrc` | `image-src` | URL da imagem do Avatar. | `string` | `undefined` |
|
|
13
|
+
| `isInteractive` | `is-interactive` | Se true, o Avatar será interativo. Caso contrário, será estático. | `boolean` | `false` |
|
|
14
|
+
| `name` | `name` | Nome do usuário para exibição da inicial. | `string` | `undefined` |
|
|
15
|
+
| `shape` | `shape` | Define o formato do Avatar: 'circle' ou 'square'. | `"circle" \| "square"` | `'circle'` |
|
|
16
|
+
| `size` | `size` | Tamanho do Avatar (valores permitidos): '320x320', '300x300', '280x280', '260x260', '240x240', '220x220', '200x200', '180x180', '160x160', '140x140', '120x120', '100x100', '80x80', '60x60'. | `"100" \| "120" \| "140" \| "160" \| "180" \| "200" \| "220" \| "240" \| "260" \| "280" \| "300" \| "320" \| "60" \| "80"` | `'100'` |
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## Dependencies
|
|
20
|
+
|
|
21
|
+
### Depends on
|
|
22
|
+
|
|
23
|
+
- [ez-icon](../ez-icon)
|
|
24
|
+
|
|
25
|
+
### Graph
|
|
26
|
+
```mermaid
|
|
27
|
+
graph TD;
|
|
28
|
+
ez-avatar --> ez-icon
|
|
29
|
+
style ez-avatar fill:#f9f,stroke:#333,stroke-width:4px
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
----------------------------------------------
|
|
33
|
+
|
|
34
|
+
|
|
@@ -25,11 +25,13 @@
|
|
|
25
25
|
|
|
26
26
|
### Used by
|
|
27
27
|
|
|
28
|
+
- [ez-search-result-list](../ez-search-plus/subcomponent/ez-search-result-list)
|
|
28
29
|
- [search-list](../ez-search/subcomponent/search-list)
|
|
29
30
|
|
|
30
31
|
### Graph
|
|
31
32
|
```mermaid
|
|
32
33
|
graph TD;
|
|
34
|
+
ez-search-result-list --> ez-card-item
|
|
33
35
|
search-list --> ez-card-item
|
|
34
36
|
style ez-card-item fill:#f9f,stroke:#333,stroke-width:4px
|
|
35
37
|
```
|
|
@@ -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
|
|
@@ -7,26 +7,28 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ---------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
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
|
+
| `textEmptyOption` | `text-empty-option` | Texto a ser apresentado na opção de valor nulo. | `string` | `"Selecione um item"` |
|
|
31
|
+
| `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` |
|
|
30
32
|
|
|
31
33
|
|
|
32
34
|
## Events
|
|
@@ -7,15 +7,16 @@
|
|
|
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
|
+
| `value` | -- | Define o valor do campo. | `Date` | `undefined` |
|
|
19
20
|
|
|
20
21
|
|
|
21
22
|
## Events
|
|
@@ -7,16 +7,17 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
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` |
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
## Events
|
|
@@ -7,24 +7,27 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| ------------------- | --------------------- |
|
|
12
|
-
| `
|
|
13
|
-
| `
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ---------------- |
|
|
12
|
+
| `emptyMessage` | -- | Objeto que define as mensagens a serem exibidas quando a lista está vazia Exemplo: { LEFT_LIST?: "Lista lado esquerdo vazia.", RIGHT_LIST?: "Lista lado direito vazia."; } | `EmptyMessage` | `undefined` |
|
|
13
|
+
| `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `'item'` |
|
|
14
|
+
| `entityLabelPlural` | `entity-label-plural` | Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `'itens'` |
|
|
15
|
+
| `leftList` | -- | Define a lista origem. | `ListItem[]` | `[]` |
|
|
16
|
+
| `leftListLabel` | `left-list-label` | Rótulo da lista esquerda. | `string` | `'disponíveis'` |
|
|
17
|
+
| `leftTitle` | `left-title` | Define o título da lista origem. | `string` | `undefined` |
|
|
18
|
+
| `rightList` | -- | Define a lista destino. | `ListItem[]` | `[]` |
|
|
19
|
+
| `rightListLabel` | `right-list-label` | Rótulo da lista direita. | `string` | `'selecionados'` |
|
|
20
|
+
| `rightTitle` | `right-title` | Define o título da lista destino. | `string` | `undefined` |
|
|
21
|
+
| `slotsListBuilder` | -- | Objeto que define os métodos de construção dos elementos visuais para os itens de cada lista. Este objeto permite configurar dinamicamente os elementos HTML que serão exibidos ao lado esquerdo e direito dos itens em ambas as listas (`LEFT_LIST` e `RIGHT_LIST`). | `DoubleListSlots` | `undefined` |
|
|
22
|
+
| `useOnlyRightList` | `use-only-right-list` | Define se irá exibir apenas a lista da direita. | `boolean` | `false` |
|
|
20
23
|
|
|
21
24
|
|
|
22
25
|
## Events
|
|
23
26
|
|
|
24
|
-
| Event | Description
|
|
25
|
-
| -------------------- |
|
|
26
|
-
| `ezLeftListChanged` |
|
|
27
|
-
| `ezRightListChanged` |
|
|
27
|
+
| Event | Description | Type |
|
|
28
|
+
| -------------------- | ------------------------------------------------------------------ | ------------------------- |
|
|
29
|
+
| `ezLeftListChanged` | Emitido ao realizar uma alteração na lista esquerda do componente. | `CustomEvent<ListItem[]>` |
|
|
30
|
+
| `ezRightListChanged` | Emitido ao realizar uma alteração na lista direita do componente. | `CustomEvent<ListItem[]>` |
|
|
28
31
|
|
|
29
32
|
|
|
30
33
|
## Methods
|
|
@@ -44,19 +47,15 @@ Type: `Promise<void>`
|
|
|
44
47
|
|
|
45
48
|
### Depends on
|
|
46
49
|
|
|
47
|
-
- [ez-
|
|
48
|
-
- [ez-list](../ez-list)
|
|
49
|
-
- [ez-filter-input](../ez-filter-input)
|
|
50
|
+
- [ez-sortable-list](../ez-sortable-list)
|
|
50
51
|
- [ez-button](../ez-button)
|
|
51
52
|
|
|
52
53
|
### Graph
|
|
53
54
|
```mermaid
|
|
54
55
|
graph TD;
|
|
55
|
-
ez-double-list --> ez-
|
|
56
|
-
ez-double-list --> ez-list
|
|
57
|
-
ez-double-list --> ez-filter-input
|
|
56
|
+
ez-double-list --> ez-sortable-list
|
|
58
57
|
ez-double-list --> ez-button
|
|
59
|
-
ez-list --> ez-
|
|
58
|
+
ez-sortable-list --> ez-filter-input
|
|
60
59
|
ez-filter-input --> ez-text-input
|
|
61
60
|
ez-filter-input --> ez-icon
|
|
62
61
|
ez-text-input --> ez-tooltip
|
|
@@ -86,9 +86,9 @@ Type: `Promise<void>`
|
|
|
86
86
|
|
|
87
87
|
### Used by
|
|
88
88
|
|
|
89
|
-
- [ez-double-list](../ez-double-list)
|
|
90
89
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
91
90
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
91
|
+
- [ez-sortable-list](../ez-sortable-list)
|
|
92
92
|
|
|
93
93
|
### Depends on
|
|
94
94
|
|
|
@@ -102,9 +102,9 @@ graph TD;
|
|
|
102
102
|
ez-filter-input --> ez-icon
|
|
103
103
|
ez-text-input --> ez-tooltip
|
|
104
104
|
ez-text-input --> ez-icon
|
|
105
|
-
ez-double-list --> ez-filter-input
|
|
106
105
|
ez-guide-navigator --> ez-filter-input
|
|
107
106
|
ez-multi-selection-list --> ez-filter-input
|
|
107
|
+
ez-sortable-list --> ez-filter-input
|
|
108
108
|
style ez-filter-input fill:#f9f,stroke:#333,stroke-width:4px
|
|
109
109
|
```
|
|
110
110
|
|
|
@@ -7,13 +7,15 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `config`
|
|
13
|
-
| `dataUnit`
|
|
14
|
-
| `
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
|
|
12
|
+
| `config` | -- | Configuração do formulário. | `IFormConfig` | `undefined` |
|
|
13
|
+
| `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined` |
|
|
14
|
+
| `elementFocusSearchField` | -- | Define uma ancoragem | `HTMLElement` | `undefined` |
|
|
15
|
+
| `fieldToFocus` | `field-to-focus` | Determina o campo que deve ficar em evidência. | `string` | `undefined` |
|
|
16
|
+
| `onlyStaticFields` | `only-static-fields` | Define se os campos que serão apresentados são todos estáticos. Quando verdadeira, ocorrerá no DataBinder o bind dos campos com o DataUnit. | `boolean` | `false` |
|
|
17
|
+
| `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` |
|
|
18
|
+
| `useSearchField` | `use-search-field` | Define se o formulario deve exibir um buscador de coluna com uso do Ctrl+F | `boolean` | `true` |
|
|
17
19
|
|
|
18
20
|
|
|
19
21
|
## Events
|
|
@@ -64,13 +66,17 @@ Type: `Promise<void>`
|
|
|
64
66
|
### Depends on
|
|
65
67
|
|
|
66
68
|
- [ez-tabselector](../ez-tabselector)
|
|
69
|
+
- [ez-popover](../ez-popover)
|
|
67
70
|
- [ez-form-view](../ez-form-view)
|
|
71
|
+
- [ez-search](../ez-search)
|
|
68
72
|
|
|
69
73
|
### Graph
|
|
70
74
|
```mermaid
|
|
71
75
|
graph TD;
|
|
72
76
|
ez-form --> ez-tabselector
|
|
77
|
+
ez-form --> ez-popover
|
|
73
78
|
ez-form --> ez-form-view
|
|
79
|
+
ez-form --> ez-search
|
|
74
80
|
ez-tabselector --> ez-icon
|
|
75
81
|
ez-form-view --> ez-custom-form-input
|
|
76
82
|
ez-form-view --> ez-collapsible-box
|
|
@@ -81,9 +87,10 @@ graph TD;
|
|
|
81
87
|
ez-form-view --> ez-date-time-input
|
|
82
88
|
ez-form-view --> ez-upload
|
|
83
89
|
ez-form-view --> ez-number-input
|
|
84
|
-
ez-form-view --> ez-search
|
|
85
90
|
ez-form-view --> ez-text-area
|
|
86
91
|
ez-form-view --> ez-text-input
|
|
92
|
+
ez-form-view --> ez-search-plus
|
|
93
|
+
ez-form-view --> ez-search
|
|
87
94
|
ez-collapsible-box --> ez-icon
|
|
88
95
|
ez-collapsible-box --> ez-text-edit
|
|
89
96
|
ez-text-edit --> ez-text-input
|
|
@@ -105,6 +112,12 @@ graph TD;
|
|
|
105
112
|
ez-date-time-input --> ez-popover-plus
|
|
106
113
|
ez-date-time-input --> ez-calendar
|
|
107
114
|
ez-number-input --> ez-text-input
|
|
115
|
+
ez-search-plus --> ez-icon
|
|
116
|
+
ez-search-plus --> ez-text-input
|
|
117
|
+
ez-search-plus --> ez-popover-plus
|
|
118
|
+
ez-search-plus --> ez-search-result-list
|
|
119
|
+
ez-search-result-list --> ez-card-item
|
|
120
|
+
ez-search-result-list --> ez-skeleton
|
|
108
121
|
ez-search --> ez-text-input
|
|
109
122
|
ez-search --> ez-icon
|
|
110
123
|
ez-search --> ez-popover-plus
|
|
@@ -7,10 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute
|
|
11
|
-
| ---------------- |
|
|
12
|
-
| `fields` | --
|
|
13
|
-
| `selectedRecord` | --
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------- | --------------- | ------------------------------------------------------------------------- | ------------------ | ----------- |
|
|
12
|
+
| `fields` | -- | Define a lista de metadados usada para criar os campos de user interface. | `IFormViewField[]` | `undefined` |
|
|
13
|
+
| `selectedRecord` | -- | Define os registros da linha selecionada. | `Record` | `undefined` |
|
|
14
|
+
| `singleColumn` | `single-column` | Define se o formulario deve possuir apenas 1 coluna. | `boolean` | `true` |
|
|
14
15
|
|
|
15
16
|
|
|
16
17
|
## Events
|
|
@@ -71,9 +72,10 @@ Type: `Promise<void>`
|
|
|
71
72
|
- [ez-date-time-input](../ez-date-time-input)
|
|
72
73
|
- [ez-upload](../ez-upload)
|
|
73
74
|
- [ez-number-input](../ez-number-input)
|
|
74
|
-
- [ez-search](../ez-search)
|
|
75
75
|
- [ez-text-area](../ez-text-area)
|
|
76
76
|
- [ez-text-input](../ez-text-input)
|
|
77
|
+
- [ez-search-plus](../ez-search-plus)
|
|
78
|
+
- [ez-search](../ez-search)
|
|
77
79
|
|
|
78
80
|
### Graph
|
|
79
81
|
```mermaid
|
|
@@ -87,9 +89,10 @@ graph TD;
|
|
|
87
89
|
ez-form-view --> ez-date-time-input
|
|
88
90
|
ez-form-view --> ez-upload
|
|
89
91
|
ez-form-view --> ez-number-input
|
|
90
|
-
ez-form-view --> ez-search
|
|
91
92
|
ez-form-view --> ez-text-area
|
|
92
93
|
ez-form-view --> ez-text-input
|
|
94
|
+
ez-form-view --> ez-search-plus
|
|
95
|
+
ez-form-view --> ez-search
|
|
93
96
|
ez-collapsible-box --> ez-icon
|
|
94
97
|
ez-collapsible-box --> ez-text-edit
|
|
95
98
|
ez-text-edit --> ez-text-input
|
|
@@ -111,6 +114,12 @@ graph TD;
|
|
|
111
114
|
ez-date-time-input --> ez-popover-plus
|
|
112
115
|
ez-date-time-input --> ez-calendar
|
|
113
116
|
ez-number-input --> ez-text-input
|
|
117
|
+
ez-search-plus --> ez-icon
|
|
118
|
+
ez-search-plus --> ez-text-input
|
|
119
|
+
ez-search-plus --> ez-popover-plus
|
|
120
|
+
ez-search-plus --> ez-search-result-list
|
|
121
|
+
ez-search-result-list --> ez-card-item
|
|
122
|
+
ez-search-result-list --> ez-skeleton
|
|
114
123
|
ez-search --> ez-text-input
|
|
115
124
|
ez-search --> ez-icon
|
|
116
125
|
ez-search --> ez-popover-plus
|
|
@@ -7,28 +7,31 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description | Type | Default
|
|
11
|
-
| ------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
|
|
12
|
-
| `autoFocus` | `auto-focus` | Define se a grid será focada ao ser carregada. | `boolean` | `true`
|
|
13
|
-
| `canEdit` | `can-edit` | Define se a edição está habilitada na grid. | `boolean` | `true`
|
|
14
|
-
| `columnfilterDataSource` | -- | Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas. | `IMultiSelectionListDataSource` | `undefined`
|
|
15
|
-
| `compact` | `compact` | Define se a grade deve ser exibida em modo compacto | `boolean` | `false`
|
|
16
|
-
| `config` | -- | Configuração de exibição da grade. | `IGridConfig` | `undefined`
|
|
17
|
-
| `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined`
|
|
18
|
-
| `enableContinuousInsert` | `enable-continuous-insert` | Ativa/desativa a inserção continua na grade Só funciona quando a prop enableGridInsert está ativa | `boolean` | `true`
|
|
19
|
-
| `enableGridInsert` | `enable-grid-insert` | Ativa inserção de registros no modo grade. | `boolean` | `false`
|
|
20
|
-
| `enableLockManagerLoadingComp` | `enable-lock-manager-loading-comp` | Define se o componente deve usar o LockManager para controle de carregamento da aplicação | `boolean` | `false`
|
|
21
|
-
| `enableLockManagerTaskbarClick` | `enable-lock-manager-taskbar-click` | Ativa inserção de registros no modo grade pela Taskbar. | `boolean` | `true`
|
|
22
|
-
| `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true`
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------ |
|
|
12
|
+
| `autoFocus` | `auto-focus` | Define se a grid será focada ao ser carregada. | `boolean` | `true` |
|
|
13
|
+
| `canEdit` | `can-edit` | Define se a edição está habilitada na grid. | `boolean` | `true` |
|
|
14
|
+
| `columnfilterDataSource` | -- | Define um `IMultiSelectionListDataSource` responsável por alimentar o filtro de colunas. | `IMultiSelectionListDataSource` | `undefined` |
|
|
15
|
+
| `compact` | `compact` | Define se a grade deve ser exibida em modo compacto | `boolean` | `false` |
|
|
16
|
+
| `config` | -- | Configuração de exibição da grade. | `IGridConfig` | `undefined` |
|
|
17
|
+
| `dataUnit` | -- | Unidade de dados. Responsável pelo controle de edição de registros e informações pertinentes aos campos. | `DataUnit` | `undefined` |
|
|
18
|
+
| `enableContinuousInsert` | `enable-continuous-insert` | Ativa/desativa a inserção continua na grade Só funciona quando a prop enableGridInsert está ativa | `boolean` | `true` |
|
|
19
|
+
| `enableGridInsert` | `enable-grid-insert` | Ativa inserção de registros no modo grade. | `boolean` | `false` |
|
|
20
|
+
| `enableLockManagerLoadingComp` | `enable-lock-manager-loading-comp` | Define se o componente deve usar o LockManager para controle de carregamento da aplicação | `boolean` | `false` |
|
|
21
|
+
| `enableLockManagerTaskbarClick` | `enable-lock-manager-taskbar-click` | Ativa inserção de registros no modo grade pela Taskbar. | `boolean` | `true` |
|
|
22
|
+
| `enableRowTableStriped` | `enable-row-table-striped` | Ativa modo de linhas com cores alternadas. | `boolean` | `true` |
|
|
23
|
+
| `mode` | `mode` | Define o modo de uso da grade | `"complete" \| "simple"` | `"complete"` |
|
|
24
|
+
| `multipleSelection` | `multiple-selection` | Habilita a seleção de várias linhas. | `boolean` | `undefined` |
|
|
25
|
+
| `outlineMode` | `outline-mode` | Altera visualmente as sombras e bordas do componente Quando false, aplica o padrão de sombras ao componente (Utilizar quando for o elemento principal do layout) Quando true, aplica o padrão de outline ao componente (Utilizar quando estiver contido em outro elemento como um painel ou pop-up) | `boolean` | `false` |
|
|
26
|
+
| `paginationCounterMode` | `pagination-counter-mode` | Define se a grid será focada ao ser carregada. | `"auto" \| "hidden" \| "show"` | `'auto'` |
|
|
27
|
+
| `recordsValidator` | -- | Define um validador responsável pela integridade dos registros. | `IRecordValidator` | `undefined` |
|
|
28
|
+
| `selectionToastConfig` | -- | Configuração da seleção de grade no toast. | `ISelectionToastConfig` | `undefined` |
|
|
29
|
+
| `serverUrl` | `server-url` | Endereço do servidor para obtenção dos dados. | `string` | `undefined` |
|
|
30
|
+
| `statusResolver` | -- | Define um `IStatusResolver` responsável pelo estado da coluna de status. | `((data: object) => string) \| IStatusResolver` | `undefined` |
|
|
31
|
+
| `suppressCheckboxColumn` | `suppress-checkbox-column` | Informa se a coluna de chechbox deve ser suprimida | `boolean` | `false` |
|
|
32
|
+
| `suppressHorizontalScroll` | `suppress-horizontal-scroll` | Define se a grade deve suprimir o scroll horizontal. | `boolean` | `false` |
|
|
33
|
+
| `useEnterLikeTab` | `use-enter-like-tab` | Quando verdadeiro, o ENTER fará a navegação como se fosse a tecla TAB na grade. | `boolean` | `false` |
|
|
34
|
+
| `useSearchColumn` | `use-search-column` | Define se a grade deve exibir um buscador de coluna com uso do Ctrl+F | `boolean` | `true` |
|
|
32
35
|
|
|
33
36
|
|
|
34
37
|
## Events
|
|
@@ -243,6 +246,7 @@ Type: `Promise<void>`
|
|
|
243
246
|
- [ez-icon](../ez-icon)
|
|
244
247
|
- [ez-button](../ez-button)
|
|
245
248
|
- [filter-column](subcomponents)
|
|
249
|
+
- [ez-search](../ez-search)
|
|
246
250
|
|
|
247
251
|
### Graph
|
|
248
252
|
```mermaid
|
|
@@ -251,6 +255,7 @@ graph TD;
|
|
|
251
255
|
ez-grid --> ez-icon
|
|
252
256
|
ez-grid --> ez-button
|
|
253
257
|
ez-grid --> filter-column
|
|
258
|
+
ez-grid --> ez-search
|
|
254
259
|
ez-button --> ez-icon
|
|
255
260
|
filter-column --> ez-popover-plus
|
|
256
261
|
filter-column --> ez-button
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
| Property | Attribute | Description | Type | Default |
|
|
11
11
|
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- |
|
|
12
|
+
| `fontSize` | `font-size` | Define o tamanho da fonte. | `number \| string` | `undefined` |
|
|
12
13
|
| `href` | `href` | Define o endereço da imagem quando não contempladas na biblioteca de ícones. | `string` | `undefined` |
|
|
13
14
|
| `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
15
|
| `size` | `size` | Define o tamanho do ícone. | `"large" \| "medium" \| "small" \| "x-large" \| "x-small"` | `"medium"` |
|
|
@@ -20,6 +21,7 @@
|
|
|
20
21
|
|
|
21
22
|
- [ez-actions-button](../ez-actions-button)
|
|
22
23
|
- [ez-alert](../ez-alert)
|
|
24
|
+
- [ez-avatar](../ez-avatar)
|
|
23
25
|
- [ez-badge](../ez-badge)
|
|
24
26
|
- [ez-breadcrumb](../ez-breadcrumb)
|
|
25
27
|
- [ez-button](../ez-button)
|
|
@@ -34,6 +36,7 @@
|
|
|
34
36
|
- [ez-modal-container](../ez-modal-container)
|
|
35
37
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
36
38
|
- [ez-search](../ez-search)
|
|
39
|
+
- [ez-search-plus](../ez-search-plus)
|
|
37
40
|
- [ez-sidebar-button](../ez-sidebar-button)
|
|
38
41
|
- [ez-split-button](../ez-split-button)
|
|
39
42
|
- [ez-tabselector](../ez-tabselector)
|
|
@@ -46,6 +49,7 @@
|
|
|
46
49
|
graph TD;
|
|
47
50
|
ez-actions-button --> ez-icon
|
|
48
51
|
ez-alert --> ez-icon
|
|
52
|
+
ez-avatar --> ez-icon
|
|
49
53
|
ez-badge --> ez-icon
|
|
50
54
|
ez-breadcrumb --> ez-icon
|
|
51
55
|
ez-button --> ez-icon
|
|
@@ -60,6 +64,7 @@ graph TD;
|
|
|
60
64
|
ez-modal-container --> ez-icon
|
|
61
65
|
ez-multi-selection-list --> ez-icon
|
|
62
66
|
ez-search --> ez-icon
|
|
67
|
+
ez-search-plus --> ez-icon
|
|
63
68
|
ez-sidebar-button --> ez-icon
|
|
64
69
|
ez-split-button --> ez-icon
|
|
65
70
|
ez-tabselector --> ez-icon
|