AntonioLoureiro / VueJS.jl

Julia web app builder using Vue.js
Other
12 stars 3 forks source link

Navigation | v-navigation-drawer #38

Open charlieIT opened 4 years ago

charlieIT commented 4 years ago

expand-on-hover and permanent props not being applied on nav initialization. Most likely only being applied to the internal v-list.

<v-navigation-drawer clipped app width="300" >
<v-list :width="navigation.width"  permanent v-for="item in navigation.value"  @change="navigation.value= $event"  v-bind:key="item.id"  expand-on-hover :items="navigation.value" ><v-list-item dense link @click="open(item.href)">

Solutions:

  1. Expand whitelist of attributes that must be applied to v-navigation-drawer and not the internal list, maintaining current implementation of UPDATE_VALIDATION["v-navigation-drawer"] .

  2. Add some prefix to attributes that should be applied to the internal list, eg. list-prop= some prop value, instead of just prop=prop_value. Or vice-versa, a nav prefix for attributes that should be applied to navigation-drawer, e.g: @el(navigation,"v-navigation-drawer",width=300, nav-expand-on-hover=true, nav-permanent=true (...) )


Update: whitelisting "expand-on-hover" and "permanent"

x.render_func=y->begin

        dom_nav=dom(y,prevent_render_func=true)

        nav_attrs=Dict()

        for (k,v) in Dict("clipped"=>true,"width"=>200, "expand-on-hover"=>true, "permanent"=>true)
            haskey(y.attrs,k) ? nav_attrs[k]=y.attrs[k] : nav_attrs[k]=v
        end

        HtmlElement("v-navigation-drawer",nav_attrs,12,dom_nav)
    end
charlieIT commented 4 years ago

First proposed solution works, though it requires maintenance of the whitelist. Some z-index conflicts arise when drawer needs to expand above an Handsontable.

Possible css fix (z-index can be any from 1 to 4)

.handsontable {
    z-index: 2 !important;
}

Also solves another UI bug where the table's first row would always stay above the page's top menu

charlieIT commented 4 years ago

commit a86c092cc02a6eec13e2977681c35daf95eaa221