Test/improve support for tabs component #173

AbhimanyuAryan · 2023-02-07T04:58:39Z

@essenciary @hhaensel UMD version doesn't have vue router included in it. So we can't really use things like tabs in quasar and it keeps coming back(many users have asked for it)

Now the real problem here. Some people would like use tabs with backend routing and some people don't care as long as the application have illusion of multi tabs setting

The benefits of frontend routing is however it's fast and don't need to dependency on genie router

I was thinking we could add support for vue-router like vue-integration

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Router Demo</title>
    <link rel="stylesheet" href="">
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <p>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </p>
        
        <input type="text" v-on:input="changeTitle">
        <p>{{title}}</p>

        <router-view></router-view>
    </div>
</body>

<script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    const routes = [
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar }
    ]

    const router = new VueRouter({
        routes // short for `routes: routes`
    })

    new Vue({
        router,
        el: '#app',
        data: {
            title: 'Hello bonbonpa'
        },
        methods: {
            changeTitle: function(event) {
                this.title = event.target.value;
                // access to data
            }
        }
    });
</script>

</html>

we can define component i.e. route(to="/foo", title="Go to Foo") analogous to <router-link to="/foo">Go to Foo</router-link> which user can define in their app.jl's ui

function ui()
    p("app")
    route(to="/foo", title="Go to Foo")
end

and user can define define a template with same name foo.jl which is rendered on route click

We can use Genie env for configuration variables that enables router in Stipple App. Then we read/parse all route() defined by user in function ui and dynamically create the js for it which is to be injected along with vue_integration

<script>
   for route in routes
     const $route.name = { template: '<div>foo/bar</div>' } # render foo.jl/bar.jl
   end

    const routes = [
      loop
        { path: '/$(route.link)', component: $route.name},
      end
    ]

    const router = new VueRouter({
        routes // short for `routes: routes`
    })

The text was updated successfully, but these errors were encountered:

AbhimanyuAryan assigned hhaensel Feb 7, 2023

essenciary unassigned hhaensel Sep 5, 2023

essenciary added the feature-request label Sep 5, 2023

essenciary changed the title ~~proposal to add vue router~~ Test/improve support for tabs component Sep 5, 2023

essenciary self-assigned this Sep 5, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Test/improve support for tabs component #173

Test/improve support for tabs component #173

AbhimanyuAryan commented Feb 7, 2023 •

edited

Loading

Test/improve support for tabs component #173

Test/improve support for tabs component #173

Comments

AbhimanyuAryan commented Feb 7, 2023 • edited Loading

AbhimanyuAryan commented Feb 7, 2023 •

edited

Loading