:sparkles: Wiz Tree

Um simples e flexível componente de visualização de pastas ou hierarquia, trazendo funcionalidade dinâmicas.

Como usar

npm i @outlinestudio/wiz-tree

|Frameworks| Link| |--|--| |Angular| Link| |React | Link| | Vue | Link| outros

Componente html

<wiz-tree list="list"></wiz-tree>

Exemplo parametros listagem

Para mostrar a árvore de arquivos deve seguir o seguinte exemplo.

const list = [{
	label: 'Julieta Pena Rocha',
	selected: false, 
	disabledChild: false,
	open: false,
	child: [
		{label: 'Paula Domingues', selected: false, disabledChild: true, open: false, child: []},
		{label: 'Joaquin Corona', selected: false, disabledChild: false, open: false, child: []},
	]
}]

Parâmetros da listagem

| Parâmetro | tipagem | Obrigatório | Descrição | | -- | -- | -- | -- |
| Label | string | Sim | Esse parâmetro é o que mostra no front para selecionar. | selected | boolean | Não | Esse parâmetro corresponde se o item já vem selecionado. | disabledChild | boolean | Não | Esse parâmetro sinaliza se existe valores abaixo dele. | open | boolean | Não | Esse parâmetro define se há árvore abaixo já deve vim aberta. | child | Array | Não | Deve passar os elementos filhos com os mesmo parâmetro acima.

Outros parâmetros

| Atributo | tipagem | obrigatório | Descrição |
| -- | -- | -- | -- | | list | itemTreeModel[] | Sim | Listagem da pasta ou de hierarquia | | fetchdata | Boolean | Não | Passe o valor true para informa que os valores abaixo da lista é dinâmico.

Eventos

Existe 2 tipos de eventos do componente para emitir para o componente pai ou página responsável pelo web componente, handleSelected e requestData.

O web componente não suporta o evento de emitir do web componente para o componente pai. No entanto, o stencilJS fornece uma API para especificar os evento que um componente pode emitir para o componente pai, usando os Event()e Listen() Saiba mais nos links abaixo: Mozilla web componentes eventos Eventos com stencilJS

nos exemplos abaixo estaremos mostrando com javascript puro, deixaremos os links abaixo com o exemplo de frameworks populares.

Link React Link Vue Link Angular

Evento: handleSelected

Esse evento emite os items selecionados da listagem do web componente.

Exemplo:

Html

<wiz-tree id="view"></wiz-tree>

Javascript

// declare componente
var wizTree = document.getElementById('view');

// recebendo valores selecionados
wizTree.addEventListener('handleSelected', event  => {
	console.log('items selecionados --> ', event)
});

Evento: requestData

Esse evento é chamado quando o parâmetro fetchdata é passado como true , esse evento acontecerá apos o clique da hierarquia abaixo, esperando um retorno para o carregamento dos novos items.

Esse evento aciona o loading da hierarquia, esperando o retorno dos novos items, caso não há novos items deve retorna vazio para desabilitar o loading.

Exemplo:

Html

<wiz-tree id="view"></wiz-tree>

Javascript

// declare componente
var wizTree = document.getElementById('view');

// recebendo valores selecionados da requisição
wizTree.addEventListener('requestData', event  => {
	const itemSelected =  event.detail 
	/// Exemplo de requisição 
	Axios.get(`exemplo/requisicao/${itemSelected.id}`)
	.then( data => {
	
	  itemSelected.child = data // Adiciona os novos valores no parametro child.
		//ABAIXO RETORNA PARA O COMPONENTE OS NOVOS VALORES 
		wizTree.setchild = itemSelected
	})
});

Customização

Você pode customizar o web componente usando variáveis CSS, saber mais sobre CSS variaveis

| Variável | valor padrão | Descrição |
| - | - | - | | --colorSelected | #00AA9B | Cor do checkbox selecionado | | --sizeCheck | 12px | Tamanho do quadrado indicando checkbox | | --sizeArrow | 15px | Tamanho da seta indicadora em pixel. | | --textSize | 16px | Tamanho do texto padrão em pixel | | --colorText | #AFAEAE | Cor da label descrição do item. | | --colorArrow | #00AA9B | Cor da seta indicando hierarquia. | | --fontFamily | 'Roboto', sans-serif; | Fonte web para visualizar label. | | --textLoading | Aguarde | Texto do seletor ::before no estado de loading. |