function exemplo_toolbar(req)
title_template(dialog) = "{{$dialog.mockup_select.value !== null && $dialog.mockup_select.value.length > 0 ? String($dialog.mockup_select.value.length) + ' selected ' : 'Dynamic title'}}"
generic_title(x) = toolbartitle(x, align="left", cols=4)
@el(mockup_close, "v-btn", value="<v-icon>mdi-close</v-icon>", icon=true, dark=true, large=true, cols=1)
@el(dialog_close, "v-btn", value="<v-icon>mdi-close</v-icon>", icon=true, dark=true, large=true, cols=1, click="toggledialog(this.app['active'])")
@el(mockup_submit, "v-btn", value="Save", click="this.app['active'].mockup_alert.value = true", style=Dict("padding-top"=>"1%"), text=true, color="white", large=true)
@el(mockup_input, "v-text-field", label="Mockup", cols=4)
@el(mockup_select, "v-select", label="Select stuff", items=["A","B","C","D"], multiple=true, cols=6)
@el(mockup_switch, "v-switch", hint="Show sub form", persistent-hint=true, cols=4)
@el(mockup_area, "v-textarea", label="Mockup", cols=2)
@el(mockup_alert, "v-alert", type="info", content="Saved!", value=false)
@el(mockup_search, "v-btn", value="<v-icon>mdi-magnify<v-icon>", icon=true, color="white", cols=1)
# menu
mockup_actions = [Dict("title"=>"Clear", "val"=>Dict("what"=>"clear")), Dict("title"=>"Toggle", "val"=>Dict("what"=>"toggle"))]
@el(mockup_menu, "v-menu", items=mockup_actions)
@el(mockup_menu_btn, "v-btn", menu=mockup_menu,
content="<v-icon>mdi-dots-vertical</v-icon>",
click="side_actions(item.val.what)",
icon=true, color="white", cols=1)
@el(mockup_hamburger, "v-btn", menu=mockup_menu, click="side_actions(item.val.what)", value="<v-icon>mdi-menu</v-icon>", icon=true, color="white", cols=1)
##
#= Page components =#
# a simple toolbar in a card with a title and an action button
c1 = card([
toolbar([toolbartitle("Toolbar", align="left"), spacer(cols=7), mockup_hamburger]),
spacer(rows=1), # spacer here because toolbar will have an absolute position, thus the card content would get slightly behind the toolbar
[card(["Content"], cols=6)] ], cols=6)
# card where content is placed over the toolbar
c2 = card([
toolbar([toolbartitle("Toolbar extended", align="left"), spacer(cols=7), mockup_menu_btn], extended=true),
card([html("h3", "Content", Dict(), cols=4), html("v-divider", "", Dict(), cols=2), mockup_area], cols=4)
], cols=6)
# card with nested toolbars
@el(smaller_close, "v-btn", icon=true, small=true, color="white", value="<v-icon>mdi-close</v-icon>", cols=1) #using dense requires some resizing of elements so that they do not extend past the bar
c3 = card([
toolbar([toolbartitle("Toolbar #3", align="left"), spacer(cols=7), mockup_menu_btn]),
spacer(rows=1),
card([
toolbar([toolbartitle("Inner toolbar (nav=true & dense=true)", style=Dict("padding"=>0), align="left"), spacer(cols=7), smaller_close], dense=true),
spacer(rows=1),
[card([html("h3", "Content", Dict("align"=>"left"), cols=6), html("v-divider", "", Dict(), cols=6)]),
card([html("h3", "Content", Dict("align"=>"left"), cols=6), html("h3", "More content", Dict("align"=>"left"), cols=6)])]
], cols=12)
], cols=12)
# simple dialog
@el(toggle_d1, "v-btn", value="Open simple dialog", click="toggledialog(d1)", cols=2, text=true, outlined=true)
d1 = dialog("d1",
[
toolbar([generic_title(title_template("d1")), spacer(cols=7), dialog_close]),
spacer(rows=1),
card([mockup_select], cols=12)
], width="50vw", active=false)
# Using toolbar for form actions
@el(toggle_d2, "v-btn", value="Open form dialog", click="toggledialog(d2)", cols=2, text=true, outlined=true)
d2 = dialog("d2",
[toolbar(
[generic_title("Save placed in the toolbar"),
spacer(cols=6),
mockup_submit,
mockup_menu_btn
]),
spacer(rows=1),
card([[mockup_input, mockup_input], mockup_select], cols=12),
mockup_alert
], width="50vw", active=false)
# Toolbar where nav = false
@el(toggle_d3, "v-btn", value="Open form dialog #2", click="toggledialog(d3)", cols=2, text=true, outlined=true)
@dialog(d3,
[toolbar(
[generic_title("Toolbar nav = false #1"),
spacer(cols=7),
mockup_menu_btn
], nav=false),
html("h4", "When nav=false, the toolbar is not placed in the container edges", Dict(), cols=12),
card([
[mockup_input, mockup_input],
mockup_select,
toolbar([generic_title("Toolbar nav = false #2"), spacer(cols=7), dialog_close], nav=false, dense=true, color="black")],
cols=12),
], width="50vw", active=false)
# Card with more interactions
@el(toggle_d4, "v-btn", value="Open form dialog #3", click="toggledialog(d4)", text=true, outlined=true, cols=2)
@el(mockup_date_input, "v-text-field", type="date", label="Birthday", cols=6)
@el(mockup_input_2, "v-text-field", label="Name", cols=6)
subform = card([
toolbar([toolbartitle("Sub form", cols=4, align="left"), spacer(cols=6), mockup_search, mockup_menu_btn], nav=true),
spacer(rows=1),
[mockup_input_2, mockup_date_input]
], hover=true, tile=true, cols=8)
subform.attrs["v-show"] = "d4.mockup_switch.value == true"
@dialog(d4,
[toolbar(
[generic_title(title_template("d4")),
spacer(cols=6),
mockup_search,
mockup_menu_btn
], nav=true),
mockup_alert,
card([toolbar([mockup_search], collapse=true), spacer(rows=1),
[mockup_input, mockup_input], mockup_select, mockup_switch], cols=12),
subform #sub form
], width="50vw", active=false)
bottom_toolbar = toolbar([toolbartitle("Bottom Toolbar", style=Dict("color"=>"black"), cols=2), toggle_d1, toggle_d2, toggle_d3, toggle_d4], color="white", outlined=true, bottom=true, cols=12)
#= =#
return response(page(
[
[c1, c2], c3,
d1,d2,d3,d4,
bottom_toolbar
],
methods=Dict(
"rand_dialog"=>"function(){dialogs = ['d1','d2','d3','d4']; return app[dialogs[Math.floor(Math.random() * dialogs.length)]]}",
"toggledialog"=>"function(dialog){
if (!dialog) {dialog = this.rand_dialog()}
app['active'] = dialog;
dialog.active.value = !dialog.active.value;
}",
"side_actions"=>"
function(what){
if (what == 'toggle') { this.toggledialog(app['active']) }
else if (what == 'clear') {
for (let key in app['active']) { if (key !== 'active' && app['active'][key].hasOwnProperty('value')) { app['active'][key].value = null;} }
}
}"
)))
end