@sankhyalabs/ezui-docs 5.22.0-dev.140 → 5.22.0-dev.142
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-double-list/readme.md +20 -21
- package/components/ez-filter-input/readme.md +2 -2
- package/components/ez-grid/readme.md +25 -24
- package/components/ez-list/readme.md +0 -2
- package/components/ez-scroller/readme.md +0 -2
- package/components/ez-sortable-list/readme.md +75 -0
- package/package.json +1 -1
|
@@ -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,30 +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
|
-
| `
|
|
32
|
-
| `
|
|
33
|
-
| `
|
|
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` |
|
|
34
35
|
|
|
35
36
|
|
|
36
37
|
## Events
|
|
@@ -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
|
```
|
|
@@ -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
|
|
@@ -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
|
+
|