@sankhyalabs/ezui-docs 0.0.0-bugfix-dev-KB-86600.1 → 0.0.0-bugfix-dev-kb-92739.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ez-avatar/readme.md +34 -0
- package/components/ez-double-list/readme.md +20 -21
- package/components/ez-filter-input/readme.md +2 -2
- package/components/ez-form/readme.md +13 -7
- package/components/ez-grid/readme.md +27 -22
- package/components/ez-icon/readme.md +3 -0
- package/components/ez-list/readme.md +0 -2
- package/components/ez-popover/readme.md +2 -0
- package/components/ez-scroller/readme.md +0 -2
- package/components/ez-search/readme.md +4 -0
- package/components/ez-search-plus/readme.md +26 -26
- package/components/ez-skeleton/readme.md +12 -8
- package/components/ez-sortable-list/readme.md +75 -0
- package/components/ez-split-button/readme.md +33 -11
- 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
|
+
|
|
@@ -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
|
|
@@ -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)
|
|
@@ -47,6 +49,7 @@
|
|
|
47
49
|
graph TD;
|
|
48
50
|
ez-actions-button --> ez-icon
|
|
49
51
|
ez-alert --> ez-icon
|
|
52
|
+
ez-avatar --> ez-icon
|
|
50
53
|
ez-badge --> ez-icon
|
|
51
54
|
ez-breadcrumb --> ez-icon
|
|
52
55
|
ez-button --> ez-icon
|
|
@@ -99,7 +99,6 @@ Type: `Promise<void>`
|
|
|
99
99
|
### Used by
|
|
100
100
|
|
|
101
101
|
- [ez-alert-list](../ez-alert-list)
|
|
102
|
-
- [ez-double-list](../ez-double-list)
|
|
103
102
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
104
103
|
|
|
105
104
|
### Depends on
|
|
@@ -111,7 +110,6 @@ Type: `Promise<void>`
|
|
|
111
110
|
graph TD;
|
|
112
111
|
ez-list --> ez-check
|
|
113
112
|
ez-alert-list --> ez-list
|
|
114
|
-
ez-double-list --> ez-list
|
|
115
113
|
ez-multi-selection-list --> ez-list
|
|
116
114
|
style ez-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
117
115
|
```
|
|
@@ -70,11 +70,13 @@ Type: `Promise<void>`
|
|
|
70
70
|
|
|
71
71
|
### Used by
|
|
72
72
|
|
|
73
|
+
- [ez-form](../ez-form)
|
|
73
74
|
- [ez-grid](../ez-grid)
|
|
74
75
|
|
|
75
76
|
### Graph
|
|
76
77
|
```mermaid
|
|
77
78
|
graph TD;
|
|
79
|
+
ez-form --> ez-popover
|
|
78
80
|
ez-grid --> ez-popover
|
|
79
81
|
style ez-popover fill:#f9f,stroke:#333,stroke-width:4px
|
|
80
82
|
```
|
|
@@ -18,14 +18,12 @@
|
|
|
18
18
|
|
|
19
19
|
### Used by
|
|
20
20
|
|
|
21
|
-
- [ez-double-list](../ez-double-list)
|
|
22
21
|
- [ez-guide-navigator](../ez-guide-navigator)
|
|
23
22
|
- [ez-sidebar-navigator](../ez-sidebar-navigator)
|
|
24
23
|
|
|
25
24
|
### Graph
|
|
26
25
|
```mermaid
|
|
27
26
|
graph TD;
|
|
28
|
-
ez-double-list --> ez-scroller
|
|
29
27
|
ez-guide-navigator --> ez-scroller
|
|
30
28
|
ez-sidebar-navigator --> ez-scroller
|
|
31
29
|
style ez-scroller fill:#f9f,stroke:#333,stroke-width:4px
|
|
@@ -97,7 +97,9 @@ Type: `Promise<void>`
|
|
|
97
97
|
|
|
98
98
|
### Used by
|
|
99
99
|
|
|
100
|
+
- [ez-form](../ez-form)
|
|
100
101
|
- [ez-form-view](../ez-form-view)
|
|
102
|
+
- [ez-grid](../ez-grid)
|
|
101
103
|
- [ez-multi-selection-list](../ez-multi-selection-list)
|
|
102
104
|
|
|
103
105
|
### Depends on
|
|
@@ -118,7 +120,9 @@ graph TD;
|
|
|
118
120
|
ez-text-input --> ez-icon
|
|
119
121
|
ez-popover-plus --> ez-popover-core
|
|
120
122
|
search-list --> ez-card-item
|
|
123
|
+
ez-form --> ez-search
|
|
121
124
|
ez-form-view --> ez-search
|
|
125
|
+
ez-grid --> ez-search
|
|
122
126
|
ez-multi-selection-list --> ez-search
|
|
123
127
|
style ez-search fill:#f9f,stroke:#333,stroke-width:4px
|
|
124
128
|
```
|
|
@@ -7,32 +7,32 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| ---------------------------- | -------------------------------- |
|
|
12
|
-
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado.
|
|
13
|
-
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo.
|
|
14
|
-
| `codLabel` | `cod-label` | Texto a ser apresentado no input de código.
|
|
15
|
-
| `contextProperties` | `context-properties` | Propriedades de contexto da aplicação.
|
|
16
|
-
| `disableCodeInput` | `disable-code-input` | Se true o campo de código ficara desabilitado.
|
|
17
|
-
| `disableDescriptionInput` | `disable-description-input` | Se true o campo de de apresentação ficara desabilitado.
|
|
18
|
-
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo.
|
|
19
|
-
| `ensureClearButtonVisible` | `ensure-clear-button-visible` | Garante que o botão de limpar pesquisa está sempre visível
|
|
20
|
-
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido.
|
|
21
|
-
| `hideDescriptionInput` | `hide-description-input` | Se true o campo de de apresentação não será exibido.
|
|
22
|
-
| `hideErrorOnFocusOut` | `hide-error-on-focus-out` |
|
|
23
|
-
| `ignoreLimitCharsToSearch` | `ignore-limit-chars-to-search` |
|
|
24
|
-
| `isTextSearch` | `is-text-search` |
|
|
25
|
-
| `label` | `label` | Texto a ser apresentado como título do campo.
|
|
26
|
-
| `listOptionsPosition` | -- |
|
|
27
|
-
| `mode` | `mode` | Define o tamanho do campo.
|
|
28
|
-
| `optionLoader` | -- | Carrega as opções dinamicamente.
|
|
29
|
-
| `showOptionValue` | `show-option-value` | Se false cada opção na lista deve exibir somente o `label`.
|
|
30
|
-
| `showSelectedValue` | `show-selected-value` |
|
|
31
|
-
| `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, interrompe a propagação do evento de KeyDown da tecla enter
|
|
32
|
-
| `suppressEmptyOption` | `suppress-empty-option` |
|
|
33
|
-
| `suppressPreLoad` | `suppress-pre-load` |
|
|
34
|
-
| `suppressSearch` | `suppress-search` |
|
|
35
|
-
| `value` | `value` | Define o valor do campo.
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ---------------------------- | -------------------------------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
|
|
12
|
+
| `autoFocus` | `auto-focus` | Se true o campo de texto receberá o foco ao ser renderizado. | `boolean` | `false` |
|
|
13
|
+
| `canShowError` | `can-show-error` | Se false deixa de exibir a mensagem de erro dentro do campo. | `boolean` | `true` |
|
|
14
|
+
| `codLabel` | `cod-label` | Texto a ser apresentado no input de código. | `string` | `undefined` |
|
|
15
|
+
| `contextProperties` | `context-properties` | Propriedades de contexto da aplicação. | `any` | `undefined` |
|
|
16
|
+
| `disableCodeInput` | `disable-code-input` | Se true o campo de código ficara desabilitado. | `boolean` | `false` |
|
|
17
|
+
| `disableDescriptionInput` | `disable-description-input` | Se true o campo de de apresentação ficara desabilitado. | `boolean` | `false` |
|
|
18
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o campo. | `boolean` | `true` |
|
|
19
|
+
| `ensureClearButtonVisible` | `ensure-clear-button-visible` | Garante que o botão de limpar pesquisa está sempre visível | `boolean` | `false` |
|
|
20
|
+
| `errorMessage` | `error-message` | Define uma mensagem de orientação ao usuário, colocando o campo em modo inválido. | `string` | `undefined` |
|
|
21
|
+
| `hideDescriptionInput` | `hide-description-input` | Se true o campo de de apresentação não será exibido. | `boolean` | `false` |
|
|
22
|
+
| `hideErrorOnFocusOut` | `hide-error-on-focus-out` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` |
|
|
23
|
+
| `ignoreLimitCharsToSearch` | `ignore-limit-chars-to-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` |
|
|
24
|
+
| `isTextSearch` | `is-text-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` |
|
|
25
|
+
| `label` | `label` | Texto a ser apresentado como título do campo. | `string` | `undefined` |
|
|
26
|
+
| `listOptionsPosition` | -- | Propriedade depreciada na nova versão do componente de pesquisa. | `IEzCheckBoxListPosition` | `undefined` |
|
|
27
|
+
| `mode` | `mode` | Define o tamanho do campo. | `"regular" \| "slim"` | `"regular"` |
|
|
28
|
+
| `optionLoader` | -- | Carrega as opções dinamicamente. | `(argument: ISearchArgument, ctxProperties?: any) => ISearchOption \| IOption \| (ISearchOption \| IOption)[] \| Promise<ISearchOption \| IOption \| (ISearchOption \| IOption)[]>` | `undefined` |
|
|
29
|
+
| `showOptionValue` | `show-option-value` | Se false cada opção na lista deve exibir somente o `label`. | `boolean` | `true` |
|
|
30
|
+
| `showSelectedValue` | `show-selected-value` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` |
|
|
31
|
+
| `stopPropagateEnterKeyEvent` | `stop-propagate-enter-key-event` | Se true, interrompe a propagação do evento de KeyDown da tecla enter | `boolean` | `false` |
|
|
32
|
+
| `suppressEmptyOption` | `suppress-empty-option` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` |
|
|
33
|
+
| `suppressPreLoad` | `suppress-pre-load` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `true` |
|
|
34
|
+
| `suppressSearch` | `suppress-search` | Propriedade depreciada na nova versão do componente de pesquisa. | `boolean` | `false` |
|
|
35
|
+
| `value` | `value` | Define o valor do campo. | `IOption \| string` | `undefined` |
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
## Events
|
|
@@ -7,14 +7,18 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property | Attribute | Description
|
|
11
|
-
| -------------- | --------------- |
|
|
12
|
-
| `animation` | `animation` | Animation type
|
|
13
|
-
| `count` | `count` | Number of rows of current skeleton type
|
|
14
|
-
| `height` | `height` | Height of the skeleton ex. 100px, 100%, auto etc.
|
|
15
|
-
| `marginBottom` | `margin-bottom` | MarginBottom of the skeleton ex. 10px, 0 etc.
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| -------------- | --------------- | ---------------------------------------------------------------------------- | ---------------------------------- | -------------------------- |
|
|
12
|
+
| `animation` | `animation` | Animation type | `"false" \| "progress" \| "pulse"` | `DEFAULT_VALUES.ANIMATION` |
|
|
13
|
+
| `count` | `count` | Number of rows of current skeleton type | `number` | `DEFAULT_VALUES.COUNT` |
|
|
14
|
+
| `height` | `height` | Height of the skeleton ex. 100px, 100%, auto etc. | `string` | `null` |
|
|
15
|
+
| `marginBottom` | `margin-bottom` | MarginBottom of the skeleton ex. 10px, 0 etc. | `string` | `null` |
|
|
16
|
+
| `marginLeft` | `margin-left` | MarginLeft of the skeleton ex. 10px, 0 etc. | `string` | `null` |
|
|
17
|
+
| `marginRight` | `margin-right` | MarginRight of the skeleton ex. 10px, 0 etc. | `string` | `null` |
|
|
18
|
+
| `marginTop` | `margin-top` | MarginTop of the skeleton ex. 10px, 0 etc. | `string` | `null` |
|
|
19
|
+
| `template` | `template` | The template to be used for the skeleton. Can be an HTMLElement or a string. | `HTMLElement \| string` | `undefined` |
|
|
20
|
+
| `variant` | `variant` | Variant of the skeleton - circle or row | `"circle" \| "rect" \| "text"` | `DEFAULT_VALUES.VARIANT` |
|
|
21
|
+
| `width` | `width` | Width of the skeleton ex. 100px, 100%, auto etc. | `string` | `null` |
|
|
18
22
|
|
|
19
23
|
|
|
20
24
|
## Dependencies
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# ez-sortable-list
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<!-- Auto Generated Below -->
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------ |
|
|
12
|
+
| `dataSource` | -- | Lista de itens para serem renderizados | `ListItem[]` | `[]` |
|
|
13
|
+
| `emptyMessage` | `empty-message` | Mensagem exibida quando a lista está vazia | `string` | `'Nenhum item na lista'` |
|
|
14
|
+
| `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' | `boolean` | `false` |
|
|
15
|
+
| `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `'item'` |
|
|
16
|
+
| `entityLabelPlural` | `entity-label-plural` | Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `'itens'` |
|
|
17
|
+
| `group` | `group` | Grupo ao qual o ez-sortable-list pertence | `string` | `'default'` |
|
|
18
|
+
| `hideHeader` | `hide-header` | Define se o cabeçalho deve ficar oculto. | `boolean` | `false` |
|
|
19
|
+
| `hideTotalizer` | `hide-totalizer` | Define se o totalizador deve ser escondido. | `boolean` | `false` |
|
|
20
|
+
| `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista | `boolean` | `true` |
|
|
21
|
+
| `idSortableList` | `id-sortable-list` | ID do sortable list | `string` | `'DEFAULT_LIST'` |
|
|
22
|
+
| `itemLeftSlotBuilder` | -- | Função builder que possibilita gerar conteúdo dinâmico à esquerda do item da lista. * Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
23
|
+
| `itemRightSlotBuilder` | -- | Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: ListItem, group?: ListGroup) => string \| HTMLElement` | `undefined` |
|
|
24
|
+
| `removeItensMoved` | `remove-itens-moved` | Remove itens arrastados de uma lista para outra | `boolean` | `false` |
|
|
25
|
+
| `title` | `title` | Define o título da lista. | `string` | `undefined` |
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Events
|
|
29
|
+
|
|
30
|
+
| Event | Description | Type |
|
|
31
|
+
| ---------------- | ----------------------------------------------------------------- | ------------------------------------- |
|
|
32
|
+
| `ezChoose` | Emitido quando ocorre a escolha de um item da lista | `CustomEvent<ListItem \| ListItem[]>` |
|
|
33
|
+
| `ezDoubleClick` | Emitido quando ocorre um duplo clique em um item da lista | `CustomEvent<ListItem>` |
|
|
34
|
+
| `ezSelectItens` | Emitido sempre que um ou vários itens da lista forem selecionados | `CustomEvent<ListItem \| ListItem[]>` |
|
|
35
|
+
| `itemsReordered` | Evento emitido quando a ordem dos itens muda | `CustomEvent<any>` |
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## Methods
|
|
39
|
+
|
|
40
|
+
### `clearSelection() => Promise<void>`
|
|
41
|
+
|
|
42
|
+
Remove a seleção de todos os itens da lista
|
|
43
|
+
|
|
44
|
+
#### Returns
|
|
45
|
+
|
|
46
|
+
Type: `Promise<void>`
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
## Dependencies
|
|
52
|
+
|
|
53
|
+
### Used by
|
|
54
|
+
|
|
55
|
+
- [ez-double-list](../ez-double-list)
|
|
56
|
+
|
|
57
|
+
### Depends on
|
|
58
|
+
|
|
59
|
+
- [ez-filter-input](../ez-filter-input)
|
|
60
|
+
|
|
61
|
+
### Graph
|
|
62
|
+
```mermaid
|
|
63
|
+
graph TD;
|
|
64
|
+
ez-sortable-list --> ez-filter-input
|
|
65
|
+
ez-filter-input --> ez-text-input
|
|
66
|
+
ez-filter-input --> ez-icon
|
|
67
|
+
ez-text-input --> ez-tooltip
|
|
68
|
+
ez-text-input --> ez-icon
|
|
69
|
+
ez-double-list --> ez-sortable-list
|
|
70
|
+
style ez-sortable-list fill:#f9f,stroke:#333,stroke-width:4px
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
----------------------------------------------
|
|
74
|
+
|
|
75
|
+
|
|
@@ -7,17 +7,19 @@
|
|
|
7
7
|
|
|
8
8
|
## Properties
|
|
9
9
|
|
|
10
|
-
| Property
|
|
11
|
-
|
|
|
12
|
-
| `enabled`
|
|
13
|
-
| `iconName`
|
|
14
|
-
| `image`
|
|
15
|
-
| `
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
10
|
+
| Property | Attribute | Description | Type | Default |
|
|
11
|
+
| ------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------- |
|
|
12
|
+
| `enabled` | `enabled` | Se false o usuário não pode interagir com o botão. | `boolean` | `true` |
|
|
13
|
+
| `iconName` | `icon-name` | Define o ícone a ser usado da biblioteca de ícones: [ez-icons](https://gilded-nasturtium-6b64dd.netlify.app/docs/components/layout-doc/icons/) | `string` | `undefined` |
|
|
14
|
+
| `image` | `image` | Define o caminho usado nos modos `icon-only` e `icon-left` para imagens não contempladas na biblioteca de ícones. | `string` | `undefined` |
|
|
15
|
+
| `itemBuilder` | -- | Função builder que possibilita alterar como o item da lista vai ser apresentado. Observação: No react ele se transforma em VNode e não como HTMLElement. | `(item: IDropdownItem, level: number) => string \| HTMLElement` | `undefined` |
|
|
16
|
+
| `items` | -- | Define o conteúdo do dropdown. | `IDropdownItem[]` | `undefined` |
|
|
17
|
+
| `label` | `label` | Texto a ser apresentado como label do botão. | `string` | `undefined` |
|
|
18
|
+
| `leftTitle` | `left-title` | Texto a ser apresentado como title do botão principal | `string` | `undefined` |
|
|
19
|
+
| `mode` | `mode` | Define o modo de uso do botão. | `"default" \| "icon-left" \| "icon-only"` | `'default'` |
|
|
20
|
+
| `rightTitle` | `right-title` | Texto a ser apresentado como title do botão dropdown | `string` | `'Mais opções'` |
|
|
21
|
+
| `show` | `show` | | `boolean` | `false` |
|
|
22
|
+
| `size` | `size` | Define o tamanho do ez-split-button. | `"large" \| "medium" \| "small"` | `'medium'` |
|
|
21
23
|
|
|
22
24
|
|
|
23
25
|
## Events
|
|
@@ -31,6 +33,16 @@
|
|
|
31
33
|
|
|
32
34
|
## Methods
|
|
33
35
|
|
|
36
|
+
### `isOpenedDropdown() => Promise<boolean>`
|
|
37
|
+
|
|
38
|
+
Informa se a lista de ações está aberta.
|
|
39
|
+
|
|
40
|
+
#### Returns
|
|
41
|
+
|
|
42
|
+
Type: `Promise<boolean>`
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
34
46
|
### `setBlur() => Promise<void>`
|
|
35
47
|
|
|
36
48
|
Remove o foco de ambos os botões.
|
|
@@ -61,6 +73,16 @@ Type: `Promise<void>`
|
|
|
61
73
|
|
|
62
74
|
|
|
63
75
|
|
|
76
|
+
### `toggleDropdown() => Promise<void>`
|
|
77
|
+
|
|
78
|
+
Abre ou Fecha o dropdown do Split Button.
|
|
79
|
+
|
|
80
|
+
#### Returns
|
|
81
|
+
|
|
82
|
+
Type: `Promise<void>`
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
64
86
|
|
|
65
87
|
## Dependencies
|
|
66
88
|
|