Adding QTab support With Stipple Routing Support

[TheCedarPrince]

Currently, I had a conversation with @AbhimanyuAryan about adding QTab support.
I had started work on this in PR #44 but it had to reverted as QTab support is tricky as it relies on the Vue Router.
In that PR, Abhi said we could do something like this:

@TheCedarPrince you can solve this with a hacky solution i.e. redirect. Where you can redirect to a route on tab click which \about let's say renders a different stipple view. But as I said this is hacky

The best way to solve this is add support for frontend routing and let vue-router/stipple-router handle it which doesn't trigger Genie routing. That will also be faster and more efficient

However, I have no idea how to do this so I am turning it over to you Abhi to add additional thoughts here.
I opened a PR #46 to add in code ideas for our discussion.

[AbhimanyuAryan]

cool I'll discuss the best possible approach with Adrian and follow will follow up on this

[TheCedarPrince]

got it!
Thank you!
let me know if I can help out here.
Looking forward to what you and @essenciary come up with!

[essenciary]

Thanks @TheCedarPrince - this is not trivial as the UDM version of quasar does not support Vue Router. We'll check if we can add it or if there is some other router/routing option.

[TheCedarPrince]

Thanks @TheCedarPrince - this is not trivial as the UDM version of quasar does not support Vue Router. We'll check if we can add it or if there is some other router/routing option.

Oh I didn't realize that...
@essenciary and @AbhimanyuAryan , there were two alternatives I was also considering given the fact that the Vue Router is more complicated than I expected:

1. I noticed while looking through the Quasar Tab documentation for QRouteTab, there seems to be a field called href which does something similar to what I wanted in that it can connect to another webpage. Although it doesn't use routing, I could use it as a stopgap perhaps.
2. Could buttons in StippleUI work where each button hooks into the router for routing to another webpage?

In terms of routing, I really do not care about the Vue Router but would be happy to take advantage of the Stipple/Genie routing provided by the GenieFramework.
Is it possible to override the to statement in QRouteTab with a custom function that, on tab click , routes you to another page on the website?

I realize I am a bit out of my depth here but just seeing if these ideas are at all feasible.
Thanks for all the support!

[AbhimanyuAryan]

@TheCedarPrince have you tried using href with QRouteTab I have a strong felling this should serve your use case

[AbhimanyuAryan]

I'm not sure about this QRouteTab won’t and cannot work with the UMD version because in that environment you don’t have Vue Router in Warning. Also, not sure if entire component will work in isolation if you don't need vue-router functionality and only want to use href. I need to clarify this maybe create an issue on Quasar repo

[TheCedarPrince]

Hey @AbhimanyuAryan ,
I have tried using href before but couldn't get it working.
So, not sure what else to do here.

[AbhimanyuAryan]

Ok let me create a MWP

[AbhimanyuAryan]

https://github.com/AbhimanyuAryan/MultiRoute

[AbhimanyuAryan]

You can also use buttons in Stipple for routing @TheCedarPrince try this example

using Stipple, StippleUI

@reactive! mutable struct ButtonModel <: ReactiveModel
  press_btn::R{Bool} = false
end

function handlers(button_model)
  on(button_model.press_btn) do press_btn
    press_btn || return
    @info "pressed"
    button_model.press_btn[] = false
  end
  button_model
end

function ui(button_model)
  page(
    button_model,
    title = "Button Components",
    class = "q-pa-md q-gutter-sm",
    [
      btn("On Left", color = "primary", icon = "mail", @click("press_btn = true")),
      btn("Go to Hello World", color = "red", type = "a", href = "hello", icon = "map", iconright = "send")
    ]
  )
end

route("/") do
  init(ButtonModel) |> handlers |> ui |> html
end

route("/hello") do
  "Hello World"
end

up()

use property href and type= "a" for button navigation

[hhaensel]

There is a function on button which manages the true false stuff, so simply put

onbutton(button_model.press_btn) do
    @info "pressed"
end

[AbhimanyuAryan]

Thanks @hhaensel much cleaner