v-treeview | Component Implementation

andregsobral commented 3 years ago

Added the component "v-treeview" to the other already available components in the library.

Implemented as a VueElement since it does not contain any nested elements.

To be defined correctly, it only needs the items attribute to have data in the tree format. ex: Parent nodes -> id, name, children

ex: Leaf nodes -> id, name <img src="https://user-images.githubusercontent.com/5843446/114725242-4071eb80-9d34-11eb-937d-347547f3cde7.png" width=55% height=55%>

Ex: Rendering - with more options

Ex: Rendering - expecting icons

Each node may have a new field specified by the "prepend-icon-field" attribute, where the icon information is stored. If it doesn't have it, it is considered a folder (eases file explorer rendering)

Code added to Update_validation.jl

charlieIT commented 3 years ago

kwarg prepend-icon-field poderia ser só preprend-icon ou icon?

EDIT: prepend-icon-field define um campo do modelo de dados onde está o valor a aplicar do icon.

Mantendo esta feature, faria também sentido conseguir definir o icon default a utilizar. Para que não seja obrigatório utilizar apenas mdi-folder, nem seja necessário definir um icon igual/repetidamente em todos os elementos da árvore.

EDIT 2

prepend-icon-field também poderia ter um valor padrão. Por exemplo, se nada for dito, assumir que aparecerá na key = icon dos dados.

items = [Dict("name"=>"Folder", "icon"=>"mdi-open-outline"), Dict("name"=>"No icon folder")]

Nos casos em que é definido prepend-icon-field, pesquisar essa key nos items. Neste caso key = fille

@el(tree, "v-treeview", items=[Dict("name"=>"Folder", "file"=>"mdi-icon"), ...], prepend-icon-field="file")

EDIT 3

Comportamento possível

prepend-icon-field - define um campo do Dict de dados onde está definido o icon. Quando utilizado, os icons de todos os elementos devem estar definidos neste campo. Valor padrão = "icon"

icon - define icon padrão a aplicar. Quando utilizado, todos os elementos da árvore sem icon próprio utilizam este. Valor padrão = "mdi-folder". Se icon = nothing removeria icon padrão e permitiria elementos sem icon. (Maybe ? Poderá ser melhor assumir default = nothing e forçar o utilizador a definir um icon padrão.)

Quando construída com icon=nothing e sem prepend-icon-field, elementos da árvore com icon próprio definido na key icon do Dict items são apresentados com icon, todos os outros sem icon.

AntonioLoureiro commented 3 years ago

Depois de definido, coloquem pf exemplos na doc string

andregsobral commented 3 years ago

Bom dia! Tendo em conta o teu feedback @charlieIT implementei da seguinte forma:

Caso não se passe o atributo prepend-icon , a tree não faz prepend, portanto, segue o comportamento de uma tree básica como definido no vuetify.

Caso se passe o prepend-icon = true é realizado o prepend com base nos defaults :

icon -> campo com o icon;
caso não exista icon no nó da tree coloca {{ open ? mdi-folder-open : mdi-folder }} , ou seja, fica fácil de utilizar para o prepend mais comum de file-explorer

Caso se passe o prepend-icon como dicionário podes manipular tanto o default como o icon-field com base nas keys "default-icon" e "custom-icon-field".

Assim parece-me que facilitamos a utilização do slot de prepend, e omitindo este atributo temos o comportamento igual à referência do vuetify.

@AntonioLoureiro , doc string adicionada :+1:

AntonioLoureiro / VueJS.jl

v-treeview | Component Implementation #75