Now Playing Mathcore

    @outlinestudio/wiz-tree
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.15 • Public • Published

    Wiz solucoes

    Built With Stencil

    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.

    Install

    npm i @outlinestudio/wiz-tree

    DownloadsWeekly Downloads

    0

    Version

    1.0.15

    License

    MIT

    Unpacked Size

    340 kB

    Total Files

    43

    Last publish

    Collaborators

    • raulmelo