apb/vue-poc
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed navbar

Browse source
This commit is contained in:
Andy Bunce 2018-02-12 11:37:16 +00:00
parent 20f496617b
commit 1c5a066589
7 changed files with 159 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/vue-poc/app.vue
View file

@ -39,7 +39,7 @@
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-navigation-drawer> </v-navigation-drawer>
<v-navigation-drawer app :mini-variant.sync="mini" v-model="drawer" absolute <v-navigation-drawer app :mini-variant.sync="mini" v-model="drawer"
:disable-route-watcher="true" :enable-resize-watcher="true"> :disable-route-watcher="true" :enable-resize-watcher="true">
<v-list class="pa-0"> <v-list class="pa-0">
@ -78,14 +78,15 @@
<v-icon>star_border</v-icon> <v-icon>star_border</v-icon>
</v-btn> </v-btn>
<v-card style="width:400px;"> <v-card style="width:400px;">
<v-toolbar class="amber"> <v-toolbar class="amber">
<v-card-title> <v-card-title>
Bookmark this page Bookmark this page
</v-card-title> </v-card-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<h6>{{$route.meta.title}}</h6> <h6>{{$route.meta.title}}</h6>
<v-select <v-select
v-model="tags" v-model="tags"
label="tags" label="tags"
@ -93,8 +94,9 @@
tags tags
:items="taglist" :items="taglist"
></v-select> ></v-select>
</v-card-text> </v-card-text>
<v-card-actions>
<v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn> <v-btn color="primary" flat @click.stop="frmFav=false">Cancel</v-btn>
<v-btn color="primary" flat @click.stop="favorite();frmFav=false">Save</v-btn> <v-btn color="primary" flat @click.stop="favorite();frmFav=false">Save</v-btn>
@ -247,7 +249,7 @@
]}, ]},
{href: '/settings',text: 'Settings',icon: 'settings' }, {href: '/settings',text: 'Settings',icon: 'settings' },
{href: '/about',text: 'About (v1.1.3)' , icon: 'help' }, {href: '/about',text: 'About (v0.2.1)' , icon: 'help' },
] ]
}}, }},

2
src/vue-poc/features/images/images.xqm
View file

@ -27,7 +27,7 @@ function vue-api:id( $id as xs:integer)
}; };
(:~ (:~
: get report : generate html report
:) :)
declare declare
%rest:GET %rest:path("/vue-poc/api/images/report") %rest:GET %rest:path("/vue-poc/api/images/report")

8
src/vue-poc/features/model/entity.vue
View file

@ -4,7 +4,10 @@
<v-toolbar > <v-toolbar >
<v-toolbar-title>Entities</v-toolbar-title> <v-toolbar-title>Entities</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click="reset()">Reset</v-btn> <v-btn @click="getItems"
:loading="loading"
:disabled="loading"
>Refresh</v-btn>
</v-toolbar> </v-toolbar>
<v-container fluid grid-list-md> <v-container fluid grid-list-md>
@ -16,6 +19,8 @@
:items="items" :items="items"
:rows-per-page-items="rowsPerPageItems" :rows-per-page-items="rowsPerPageItems"
:pagination.sync="pagination" :pagination.sync="pagination"
select-all
:value="selected"
> >
<v-flex <v-flex
slot="item" slot="item"
@ -61,6 +66,7 @@
pagination: { pagination: {
rowsPerPage: 20 rowsPerPage: 20
}, },
selected:[]
} }
}, },
methods:{ methods:{

103
src/vue-poc/features/tabs.vue
View file

@ -1,59 +1,84 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="tabs"> <template id="tabs">
<v-tabs scroll-bars fixed> <div>
<v-toolbar tabs>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>{{ currentItem }}</v-toolbar-title>
<v-spacer></v-spacer>
<qd-fullscreen></qd-fullscreen>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
<v-tabs fixed-tabs
v-model="currentItem"
slot="extension">
<v-tabs-bar class="grey lighten-3" dense> <v-tab
<v-tabs-item v-for="i in items"
v-for="i in 13"
:key="i" :key="i"
:href="'#mobile-tabs-6-' + i" :href="'#tab-' + i"
> >
<v-avatar :tile="tile"
size="20px">
<v-icon>favorite</v-icon> <v-icon>favorite</v-icon>
<span>Item {{ i }} more</span> </v-avatar>
<span>{{ i }}</span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn small icon class="grey"> <v-btn icon>
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
</v-tabs-item> </v-tab>
<v-btn icon >
<v-icon>menu</v-icon> <v-menu left bottom class="tabs__div" >
</v-btn> <a class="tabs__item" slot="activator">
<v-tabs-slider class="primary"></v-tabs-slider> More
</v-tabs-bar> <v-icon>arrow_drop_down</v-icon>
<v-card > </a>
<v-card-actions> <v-list class="grey lighten-3">
<v-btn icon > <v-list-tile avatar
<v-icon>menu</v-icon> v-for="item in items"
</v-btn> :key="item"
<v-card-title>Page Title</v-card-title> @click="currentItem = 'tab-' +item"
<v-spacer></v-spacer> >
<v-btn icon > <v-list-tile-avatar>
<v-icon>search</v-icon> <v-icon v-if="currentItem === ('tab-' + item)">close</v-icon>
</v-btn> </v-list-tile-avatar>
<v-btn icon > <v-list-tile-content>
<v-icon>more_vert</v-icon> {{ item }}
</v-btn> </v-list-tile-content>
</v-card-actions> </v-list-tile>
</v-card> </v-list>
<v-tabs-items> </v-menu>
<v-tabs-content v-for="i in 13" </v-tabs>
:key="i" </v-toolbar>
:id="'mobile-tabs-6-' + i">
<v-tabs-items v-model="currentItem">
<v-tab-item
v-for="item in items"
:key="item"
:id="'tab-' + item"
>
<v-card flat > <v-card flat >
<v-card-text>{{i}} - {{ text }}</v-card-text> <v-card-text>{{ item }} - {{ text }}</v-card-text>
</v-card> </v-card>
</v-tabs-content> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</v-tabs> </div>
</template> </template>
<script>{ <script>{
data () { data () {
return { return {
currentItem: 'tab-News',
items: [
'Web', 'Shopping', 'Videos', 'Images', 'News', 'Maps', 'Books', 'Flights', 'Apps'
],
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
}
} }
} }
</script> }</script>

9
src/vue-poc/features/tasks/tasks.vue
View file

@ -2,7 +2,7 @@
<template id="task"> <template id="task">
<v-container fluid> <v-container fluid>
<h3>Available Tasks</h3> <h3>Available Tasks</h3>
<v-progress-linear v-if="loading" v-bind:indeterminate="true" height="2"></v-progress-linear>
<ul> <ul>
<li v-for="task in tasks" :key="task.to"> <li v-for="task in tasks" :key="task.to">
<router-link :to="task.to" v-text="task.text"></router-link> <router-link :to="task.to" v-text="task.text"></router-link>
@ -14,14 +14,17 @@
<script>{ <script>{
data(){ data(){
return { return {
tasks: [] tasks: [],
loading: false
} }
}, },
methods:{ methods:{
getTasks(){ getTasks(){
this.loading= true;
HTTP.get("tasks") HTTP.get("tasks")
.then(r=>{ .then(r=>{
this.tasks=r.data this.tasks=r.data;
this.loading= false;
}) })
} }
}, },

2
src/vue-poc/models.gen.xqm
View file

@ -1,5 +1,5 @@
(: entity access maps (: entity access maps
: auto generated from xml files in entities folder at: 2018-02-05T23:02:18.036Z : auto generated from xml files in entities folder at: 2018-02-12T09:42:15.78Z
:) :)
module namespace entity = 'quodatum.models.generated'; module namespace entity = 'quodatum.models.generated';

117
src/vue-poc/static/app-gen.js
View file

@ -1,4 +1,4 @@
// generated 2018-02-07T09:51:14.046Z // generated 2018-02-12T11:07:53.063Z
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
Vue.component('qd-confirm',{template:` Vue.component('qd-confirm',{template:`
@ -2426,12 +2426,12 @@ const Entity=Vue.extend({template:`
<v-toolbar> <v-toolbar>
<v-toolbar-title>Entities</v-toolbar-title> <v-toolbar-title>Entities</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn @click="reset()">Reset</v-btn> <v-btn @click="getItems" :loading="loading" :disabled="loading">Refresh</v-btn>
</v-toolbar> </v-toolbar>
<v-container fluid="" grid-list-md=""> <v-container fluid="" grid-list-md="">
<v-data-iterator content-tag="v-layout" row="" wrap="" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination"> <v-data-iterator content-tag="v-layout" row="" wrap="" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
<v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3=""> <v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3="">
<v-card> <v-card>
@ -2468,6 +2468,7 @@ const Entity=Vue.extend({template:`
pagination: { pagination: {
rowsPerPage: 20 rowsPerPage: 20
}, },
selected:[]
} }
}, },
methods:{ methods:{
@ -3253,56 +3254,71 @@ const Svg=Vue.extend({template:`
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tabs.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tabs.vue
const Tabs=Vue.extend({template:` const Tabs=Vue.extend({template:`
<v-tabs scroll-bars="" fixed=""> <div>
<v-toolbar tabs="">
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-tabs-bar class="grey lighten-3" dense=""> <v-toolbar-title>{{ currentItem }}</v-toolbar-title>
<v-tabs-item v-for="i in 13" :key="i" :href="'#mobile-tabs-6-' + i"> <v-spacer></v-spacer>
<qd-fullscreen></qd-fullscreen>
<v-btn icon="">
<v-icon>search</v-icon>
</v-btn>
<v-btn icon="">
<v-icon>more_vert</v-icon>
</v-btn>
<v-tabs fixed-tabs="" v-model="currentItem" slot="extension">
<v-tab v-for="i in items" :key="i" :href="'#tab-' + i">
<v-avatar :tile="tile" size="20px">
<v-icon>favorite</v-icon> <v-icon>favorite</v-icon>
<span>Item {{ i }} more</span> </v-avatar>
<span>{{ i }}</span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn small="" icon="" class="grey"> <v-btn icon="">
<v-icon>close</v-icon> <v-icon>close</v-icon>
</v-btn> </v-btn>
</v-tabs-item> </v-tab>
<v-btn icon="">
<v-icon>menu</v-icon> <v-menu left="" bottom="" class="tabs__div">
</v-btn> <a class="tabs__item" slot="activator">
<v-tabs-slider class="primary"></v-tabs-slider> More
</v-tabs-bar> <v-icon>arrow_drop_down</v-icon>
<v-card> </a>
<v-card-actions> <v-list class="grey lighten-3">
<v-btn icon=""> <v-list-tile avatar="" v-for="item in items" :key="item" @click="currentItem = 'tab-' +item">
<v-icon>menu</v-icon> <v-list-tile-avatar>
</v-btn> <v-icon v-if="currentItem === ('tab-' + item)">close</v-icon>
<v-card-title>Page Title</v-card-title> </v-list-tile-avatar>
<v-spacer></v-spacer> <v-list-tile-content>
<v-btn icon=""> {{ item }}
<v-icon>search</v-icon> </v-list-tile-content>
</v-btn> </v-list-tile>
<v-btn icon=""> </v-list>
<v-icon>more_vert</v-icon> </v-menu>
</v-btn> </v-tabs>
</v-card-actions> </v-toolbar>
</v-card>
<v-tabs-items> <v-tabs-items v-model="currentItem">
<v-tabs-content v-for="i in 13" :key="i" :id="'mobile-tabs-6-' + i"> <v-tab-item v-for="item in items" :key="item" :id="'tab-' + item">
<v-card flat=""> <v-card flat="">
<v-card-text>{{i}} - {{ text }}</v-card-text> <v-card-text>{{ item }} - {{ text }}</v-card-text>
</v-card> </v-card>
</v-tabs-content> </v-tab-item>
</v-tabs-items> </v-tabs-items>
</v-tabs> </div>
`, `,
data () { data () {
return { return {
currentItem: 'tab-News',
items: [
'Web', 'Shopping', 'Videos', 'Images', 'News', 'Maps', 'Books', 'Flights', 'Apps'
],
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
}
} }
} }
}
); );
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/model.build/model.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/model.build/model.vue
@ -3463,7 +3479,7 @@ const Runtask=Vue.extend({template:`
const Task=Vue.extend({template:` const Task=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<h3>Available Tasks</h3> <h3>Available Tasks</h3>
<v-progress-linear v-if="loading" v-bind:indeterminate="true" height="2"></v-progress-linear>
<ul> <ul>
<li v-for="task in tasks" :key="task.to"> <li v-for="task in tasks" :key="task.to">
<router-link :to="task.to" v-text="task.text"></router-link> <router-link :to="task.to" v-text="task.text"></router-link>
@ -3474,14 +3490,17 @@ const Task=Vue.extend({template:`
data(){ data(){
return { return {
tasks: [] tasks: [],
loading: false
} }
}, },
methods:{ methods:{
getTasks(){ getTasks(){
this.loading= true;
HTTP.get("tasks") HTTP.get("tasks")
.then(r=>{ .then(r=>{
this.tasks=r.data this.tasks=r.data;
this.loading= false;
}) })
} }
}, },
@ -4129,7 +4148,7 @@ const Vuepoc=Vue.extend({template:`
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-navigation-drawer> </v-navigation-drawer>
<v-navigation-drawer app="" :mini-variant.sync="mini" v-model="drawer" absolute="" :disable-route-watcher="true" :enable-resize-watcher="true"> <v-navigation-drawer app="" :mini-variant.sync="mini" v-model="drawer" :disable-route-watcher="true" :enable-resize-watcher="true">
<v-list class="pa-0"> <v-list class="pa-0">
<v-list-tile avatar="" tag="div"> <v-list-tile avatar="" tag="div">
@ -4162,17 +4181,19 @@ const Vuepoc=Vue.extend({template:`
<v-icon>star_border</v-icon> <v-icon>star_border</v-icon>
</v-btn> </v-btn>
<v-card style="width:400px;"> <v-card style="width:400px;">
<v-toolbar class="amber"> <v-toolbar class="amber">
<v-card-title> <v-card-title>
Bookmark this page Bookmark this page
</v-card-title> </v-card-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<h6>{{$route.meta.title}}</h6> <h6>{{$route.meta.title}}</h6>
<v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select> <v-select v-model="tags" label="tags" chips="" tags="" :items="taglist"></v-select>
</v-card-text> </v-card-text>
<v-card-actions>
<v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn> <v-btn color="primary" flat="" @click.stop="frmFav=false">Cancel</v-btn>
<v-btn color="primary" flat="" @click.stop="favorite();frmFav=false">Save</v-btn> <v-btn color="primary" flat="" @click.stop="favorite();frmFav=false">Save</v-btn>
@ -4313,7 +4334,7 @@ const Vuepoc=Vue.extend({template:`
]}, ]},
{href: '/settings',text: 'Settings',icon: 'settings' }, {href: '/settings',text: 'Settings',icon: 'settings' },
{href: '/about',text: 'About (v1.1.3)' , icon: 'help' }, {href: '/about',text: 'About (v0.2.1)' , icon: 'help' },
] ]
}}, }},