@outlinestudio/wiz-tree v1.0.15

: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

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

Outros parâmetros

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