Stipple.jl
Stipple.jl copied to clipboard
GenieFramework
Test/improve support for tabs component
@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`
})
