# ez-sortable-list ## Properties | Property | Attribute | Description | Type | Default | | ------------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ---------------- | | `dataSource` | -- | Lista de itens para serem renderizados | `ListItem[]` | `[]` | | `emptyMessage` | `empty-message` | Mensagem exibida quando a lista está vazia | `string` | `undefined` | | `enableMultipleSelection` | `enable-multiple-selection` | Habilita seleção de múltiplos itens utilizando as teclas 'Ctrl/Command' ou 'Shift' | `boolean` | `false` | | `entityLabel` | `entity-label` | Nome da entidade listada. Exemplo: "Campo", "Item", "Empresa". | `string` | `undefined` | | `entityLabelPlural` | `entity-label-plural` | Variação plural do nome da entidade listada. Exemplo: "Campos", "Itens", "Empresas". | `string` | `undefined` | | `group` | `group` | Grupo ao qual o ez-sortable-list pertence | `string` | `'default'` | | `hideHeader` | `hide-header` | Define se o cabeçalho deve ficar oculto. | `boolean` | `false` | | `hideTotalizer` | `hide-totalizer` | Define se o totalizador deve ser escondido. | `boolean` | `false` | | `hoverFeedback` | `hover-feedback` | Quando verdadeiro, ativa o feedback visual ao efetuar hover nos itens da lista | `boolean` | `true` | | `idSortableList` | `id-sortable-list` | ID do sortable list | `string` | `'DEFAULT_LIST'` | | `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` | | `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` | | `removeItensMoved` | `remove-itens-moved` | Remove itens arrastados de uma lista para outra | `boolean` | `false` | | `title` | `title` | Define o título da lista. | `string` | `undefined` | ## Events | Event | Description | Type | | ---------------- | ----------------------------------------------------------------- | ------------------------------------- | | `ezChoose` | Emitido quando ocorre a escolha de um item da lista | `CustomEvent` | | `ezDoubleClick` | Emitido quando ocorre um duplo clique em um item da lista | `CustomEvent` | | `ezSelectItens` | Emitido sempre que um ou vários itens da lista forem selecionados | `CustomEvent` | | `itemsReordered` | Evento emitido quando a ordem dos itens muda | `CustomEvent` | ## Methods ### `clearSelection() => Promise` Remove a seleção de todos os itens da lista #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-double-list](../ez-double-list) ### Depends on - [ez-filter-input](../ez-filter-input) ### Graph ```mermaid graph TD; ez-sortable-list --> ez-filter-input ez-filter-input --> ez-text-input ez-filter-input --> ez-icon ez-text-input --> ez-tooltip ez-text-input --> ez-icon ez-double-list --> ez-sortable-list style ez-sortable-list fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-sortable-list\_\_selected-item--border-radius | Define o raio da borda de items selecionados. | | --ez-sortable-list\_\_selected-item--background-color | Define a cor de fundo de items selecionados. | | --ez-sortable-list\_\_selectable--padding-right | Define o espaçamento lateral direito para items selecionados. | | --ez-sortable-list\_\_selectable--padding-left | Define o espaçamento lateral esquerdo para items selecionados. | | --ez-sortable-list\_\_icon--color | Define a cor do ícone de arrasto do item da lista. | | --ez-sortable-list\_\_scrollbar--color-default | Define a cor da barra de rolagem do componente. | | --ez-sortable-list--color-background | Define a cor de fundo da barra de rolagem do componente. | | --ez-sortable-list\_\_scrollbar--color-clicked | Define a cor do active na barra de rolagem do componente. | | --ez-sortable-list\_\_scrollbar--color-hover | Define a cor do hover na barra de rolagem do componente. | | --ez-sortable-list--border-radius | Define o raio da borda da barra de rolagem do componente. | | --ez-sortable-list\_\_scrollbar--width | Define a largura da barra de rolagem do componente. |