# ez-tree ## Properties | Property | Attribute | Description | Type | Default | | -------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------- | | `enableHierarchicalFilter` | `enable-hierarchical-filter` | Define se a árvore deve permitir a filtragem hierárquica. | `boolean` | `true` | | `iconResolver` | -- | Define uma função que vai resolver o ícone daquele item. Retorna o nome do ícone da lib de icones do DS. | `(item: ITreeItem, expanded: boolean, level: number) => string` | `defaultIconResolver` | | `items` | -- | Define os itens apresentados na árvore. | `ITreeItem[]` | `[]` | | `selectable` | `selectable` | Define se os itens da árvore são selecionáveis. | `boolean` | `true` | | `selectedId` | `selected-id` | Forma alternativa para atribuir o item selecionado por seu ID. | `string` | `undefined` | | `tooltipResolver` | -- | Define uma função que vai resolver o `tooltip` ou `title` daquele item. | `(item: ITreeItem, enabled: boolean, level: number) => string` | `undefined` | | `value` | -- | Define o item selecionado na árvore. | `ITreeItem` | `undefined` | ## Events | Event | Description | Type | | --------------- | ------------------------------------------------- | ------------------------ | | `ezChange` | Emitido quando um item é selecionado na árvore. | `CustomEvent` | | `ezDbClickItem` | Emitido ao dar clique duplo em um item da árvore. | `CustomEvent` | | `ezOpenItem` | Emitido quando um item é aberto na árvore. | `CustomEvent` | | `ezRemoveItem` | Emitido ao remover um item da árvore. | `CustomEvent` | ## Methods ### `addChild(item: ITreeItem, parentId?: string) => Promise` Adiciona um ou mais itens. Opcionalmente pode-se determinar a qual item da árvore será anexado o item. Caso não informado parentId, adiciona no item selecionado. Observação para carga dinâmica (Lazyload): O parentId deve ser um item carregado atualmente na árvore. #### Returns Type: `Promise` --- ### `applyFilter(pattern: string) => Promise` Efetua a seleção de um item. #### Returns Type: `Promise` --- ### `collapseAll() => Promise` Recolhe todos os itens da árvore. #### Returns Type: `Promise` --- ### `disableItem(id: string | Array) => Promise` Desabilita um ou mais itens. #### Returns Type: `Promise` --- ### `enableItem(id: string | Array) => Promise` Habilita um ou mais itens. #### Returns Type: `Promise` --- ### `expandAll() => Promise` Expande todos os itens da árvore. #### Returns Type: `Promise` --- ### `getCurrentPath() => Promise>` Obtem um array do caminho de itens da seleção atual. #### Returns Type: `Promise` Retorna um array do caminho de itens da seleção atual. --- ### `getItem(id: string) => Promise` Obtem um item pelo id #### Returns Type: `Promise` --- ### `getParent(id: string) => Promise` Obtem o item pai a partir de um id #### Returns Type: `Promise` --- ### `openItem(id: string) => Promise` Realiza a abertura de um item, incluindo a hieraquia acima. Observação para carga dinâmica (Lazyload): O item solicitado já deve estar carregado na lista. Nos casos onde o item ainda não esteja carregado o id pode ser uma string no formato "id1>>id2>>id3", tornando possível a carga a partir de um ponto já carregado. #### Returns Type: `Promise` --- ### `removeItem(id?: string) => Promise` Remove um item da árvore pelo seu ID. Se o item removido estiver selecionado, a seleção será limpa. #### Returns Type: `Promise` --- ### `selectItem(id: string) => Promise` Efetua a seleção de um item. #### Returns Type: `Promise` --- ### `updateItem(item: ITreeItem | ITreeItem[], config?: Partial) => Promise` Atualiza um item #### Returns Type: `Promise` ## Dependencies ### Used by - [ez-guide-navigator](../ez-guide-navigator) ### Depends on - [ez-icon](../ez-icon) ### Graph ```mermaid graph TD; ez-tree --> ez-icon ez-guide-navigator --> ez-tree style ez-tree fill:#f9f,stroke:#333,stroke-width:4px ``` ---------------------------------------------- ## CSS Variables | Variable | Description | |-|-| | --ez-tree--border-radius | Define o arredondamento dos retangulos. | | --ez-tree--padding-inline-start | Define a largura da identação de cada nível. | | --ez-tree--margin | Define a margem do componente. | | --ez-tree--margin-right | Define a margem da direita do componente. | | --ez-tree--user-select | Define se o texto dos itens pode ser selecionado pelo usuário. | | --ez-tree--font-family | Define a família da fonte. | | --ez-tree--font-size | Define o tamanho da fonte. | | --ez-tree--selected--font-weight | Define o peso da fonte. | | --ez-tree--font-weight | Define o peso da fonte. | | --ez-tree--color | Define a cor da fonte e do ícone. | | --ez-tree--selected--color | Define a cor da fonte e do ícone quando selecionado. | | --ez-tree--disabled--color | Define a cor da fonte e do ícone quando desabilitado. | | --ez-tree--font-weight--bold | Usado em fontes com peso maior (bold) | | --ez-tree\_\_tree-item--height | Define a altura de cada item. | | --ez-tree\_\_tree-item--padding | Define o espaçamento interno do item. | | --ez-tree\_\_tree-item--background-color | Define a cor de background. | | --ez-tree\_\_tree-item--selected--background-color | Define a cor de background quando selecionado. | | --ez-tree\_\_tree-item--hover--background-color | Define a cor de background com o mouse sobre o item. | | --ez-tree\_\_tree-item--disabled--background-color | Define a cor de background quando deabilitado. | | --ez-tree\_\_item-icon-box--height | Define a altura do box do ícone. | | --ez-tree\_\_item-icon-box--width | Define a largura do box do ícone. | | --ez-tree\_\_item-icon-box--padding | Define o espaçamento interno do ícone. | | --ez-tree\_\_badge--icon-color--default | Cor de ícone de badge padrão. | | --ez-tree\_\_badge--icon-color--error | Cor de ícone de badge de erro. | | --ez-tree\_\_badge--icon-color--success | Cor de ícone de badge sucesso. | | --ez-tree\_\_badge--icon-color--warning | Cor de ícone de badge de aviso. | | --ez-tree\_\_badge--icon-color--disabled | Cor de ícone de badge desabilitado. |