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

vuetify 0.15.6

Browse source
This commit is contained in:
andy bunce 2017-09-14 22:53:46 +02:00
parent d23694ceb0
commit cd248f1de5
8 changed files with 184 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/vue-poc/features/collection/files.vue
View file

@ -4,7 +4,7 @@
<v-card> <v-card>
<v-toolbar light> <v-toolbar >
<v-btn icon :to="{query: { url: '/' }}"> <v-btn icon :to="{query: { url: '/' }}">
<v-icon >{{icon}}</v-icon> <v-icon >{{icon}}</v-icon>
</v-btn> </v-btn>
@ -15,17 +15,22 @@
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items>
<v-btn @click="search"><v-icon>search</v-icon></v-btn>
<v-btn @click="search"><v-icon>search</v-icon></v-btn>
</v-toolbar-items>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-toolbar-items v-if="!selected">
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" <v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search"
hide-details single-line @keyup.enter="setfilter"></v-text-field> hide-details single-line @keyup.enter="setfilter"></v-text-field>
<v-btn icon v-for="b in buttons" :key="b.icon" @click="action(b)">
<v-btn icon @click="alert('todo')"> <v-icon v-text="b.icon"></v-icon>
<v-icon>view_module</v-icon>
</v-btn> </v-btn>
</v-toolbar-items>
<v-toolbar-items v-if="selected">
<v-btn icon v-for="b in selopts" :key="b.icon" @click="action(b)">
<v-icon v-text="b.icon"></v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar> </v-toolbar>
@ -46,7 +51,7 @@
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon ripple @click.stop="info(item)"> <v-btn icon @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
@ -96,7 +101,7 @@
<script>{ <script>{
props:["protocol"], props:["protocol"],
data: function(){ data(){
return { return {
url: "", url: "",
folders: [], folders: [],
@ -104,7 +109,22 @@
q: "", q: "",
busy: false, busy: false,
showInfo: false, showInfo: false,
selected: null selected: null,
buttons: [
{method: this.todo, icon: "view_quilt"},
{method: this.add, icon: "add"},
{method: this.todo, icon: "refresh"},
{method: this.todo, icon: "sort"},
{method: this.todo, icon: "select_all"}
],
selopts: [
{method: this.todo, icon: "delete"},
{method: this.todo, icon: "content_copy"},
{method: this.todo, icon: "content_cut"},
{method: this.todo, icon: "text_format"},
{method: this.todo, icon: "info"},
{method: this.todo, icon: "share"}
]
} }
}, },
methods:{ methods:{
@ -130,7 +150,13 @@
}); });
}, },
action(b){
alert(b.icon)
b.method()
},
add(){
alert("add")
},
setfilter(){ setfilter(){
console.log("TODO",this.q) console.log("TODO",this.q)
this.$router.push({ query: {url:this.url,q:this.q }}) this.$router.push({ query: {url:this.url,q:this.q }})
@ -147,8 +173,8 @@
this.$router.push({ name: 'jobShow', params: {job:job }}) this.$router.push({ name: 'jobShow', params: {job:job }})
}) })
}, },
search(){ todo(){
alert("search") alert("todo")
} }
}, },
computed: { computed: {

3
src/vue-poc/features/home.vue
View file

@ -29,11 +29,12 @@
</p> </p>
<ul> <ul>
<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li> <li><router-link :to="{path:'files', query:{url:'/vue-poc/'}}">vue-poc files</router-link></li>
<li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li> <li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li> <li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
<li><a href="/dba" target="new">DBA app</a></li> <li><a href="/dba" target="new">DBA app</a></li>
<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li> <li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
</ul> </ul>
<v-btn floating="floating"> <v-icon>add</v-icon> <v-btn floating="floating"> <v-icon>add</v-icon>

4
src/vue-poc/features/tasks/model.build/model.vue
View file

@ -17,13 +17,13 @@
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs6> <v-flex xs12>
<v-text-field v-model="params.efolder" <v-text-field v-model="params.efolder"
label="Folder containing model definitions as xml" label="Folder containing model definitions as xml"
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs6> <v-flex xs12>
<v-text-field v-model="params.target" <v-text-field v-model="params.target"
label="Path to xqm file to generate" label="Path to xqm file to generate"
></v-text-field> ></v-text-field>

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

@ -1,27 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<template id="task"> <template id="task">
<v-container fluid> <v-container fluid>
<h3>Tasks</h3> <h3>Available Tasks</h3>
<ul> <ul>
<li> <li v-for="task in tasks" :key="task.to">
<router-link to="tasks/model">model</router-link> <router-link :to="task.to" v-text="task.text"></router-link>
</li>
<li>
<router-link to="tasks/xqdoc">xqdoc</router-link>
</li>
<li>
<router-link to="tasks/vuecompile">vue compile</router-link>
</li> </li>
</ul> </ul>
</v-container> </v-container>
</template> </template>
<script>{ <script>{
data: function(){ data(){
return { return {
message: 'Hello Vue.js!', tasks: [
q:this.$route.query.q {to: "tasks/model", text: "model"},
{to: "tasks/xqdoc", text: "xqdoc"},
{to: "tasks/vuecompile", text: "vue compile"}
]
} }
},
methods:{
getTasks(){
alert("get tasks")
}
},
created(){
this.getTasks()
} }
} }
</script> </script>

2
src/vue-poc/features/tasks/vue-compile/vuecompile.vue
View file

@ -16,7 +16,7 @@
<v-card-text> <v-card-text>
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs6> <v-flex xs12>
<v-text-field v-model="params.proj" <v-text-field v-model="params.proj"
label="vue project to compile" label="vue project to compile"
></v-text-field> ></v-text-field>

4
src/vue-poc/features/tasks/xqdoc/xqdoc.vue
View file

@ -17,13 +17,13 @@
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs6> <v-flex xs12>
<v-text-field v-model="params.efolder" <v-text-field v-model="params.efolder"
label="Root Folder containing xq files" label="Root Folder containing xq files"
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex xs6> <v-flex xs12>
<v-text-field v-model="params.target" <v-text-field v-model="params.target"
label="Path for xqdoc files" label="Path for xqdoc files"
></v-text-field> ></v-text-field>

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

@ -1,4 +1,4 @@
// generated 2017-09-13T16:57:35.141+01:00 // generated 2017-09-14T21:51:22.679+01:00
Vue.component('qd-fullscreen',{template:` Vue.component('qd-fullscreen',{template:`
<a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle"> <a @click="toggle()" href="javascript:void(0);" title="Fullscreen toggle">
<v-icon>{{ fullscreenIcon }}</v-icon> <v-icon>{{ fullscreenIcon }}</v-icon>
@ -626,11 +626,11 @@ Vue.filter('round', function(value, decimals) {
<v-container fluid=""> <v-container fluid="">
<v-layout row="" wrap=""> <v-layout row="" wrap="">
<v-flex xs6=""> <v-flex xs12="">
<v-text-field v-model="params.efolder" label="Folder containing model definitions as xml"></v-text-field> <v-text-field v-model="params.efolder" label="Folder containing model definitions as xml"></v-text-field>
</v-flex> </v-flex>
<v-flex xs6=""> <v-flex xs12="">
<v-text-field v-model="params.target" label="Path to xqm file to generate"></v-text-field> <v-text-field v-model="params.target" label="Path to xqm file to generate"></v-text-field>
</v-flex> </v-flex>
<v-flex xs12=""> <v-flex xs12="">
@ -698,11 +698,11 @@ Vue.filter('round', function(value, decimals) {
<v-container fluid=""> <v-container fluid="">
<v-layout row="" wrap=""> <v-layout row="" wrap="">
<v-flex xs6=""> <v-flex xs12="">
<v-text-field v-model="params.efolder" label="Root Folder containing xq files"></v-text-field> <v-text-field v-model="params.efolder" label="Root Folder containing xq files"></v-text-field>
</v-flex> </v-flex>
<v-flex xs6=""> <v-flex xs12="">
<v-text-field v-model="params.target" label="Path for xqdoc files"></v-text-field> <v-text-field v-model="params.target" label="Path for xqdoc files"></v-text-field>
</v-flex> </v-flex>
@ -781,7 +781,7 @@ Vue.filter('round', function(value, decimals) {
<v-card-text> <v-card-text>
<v-container fluid=""> <v-container fluid="">
<v-layout row="" wrap=""> <v-layout row="" wrap="">
<v-flex xs6=""> <v-flex xs12="">
<v-text-field v-model="params.proj" label="vue project to compile"></v-text-field> <v-text-field v-model="params.proj" label="vue project to compile"></v-text-field>
</v-flex> </v-flex>
</v-layout> </v-layout>
@ -835,26 +835,31 @@ Vue.filter('round', function(value, decimals) {
); );
const Task=Vue.extend({template:` const Task=Vue.extend({template:`
<v-container fluid=""> <v-container fluid="">
<h3>Tasks</h3> <h3>Available Tasks</h3>
<ul> <ul>
<li> <li v-for="task in tasks" :key="task.to">
<router-link to="tasks/model">model</router-link> <router-link :to="task.to" v-text="task.text"></router-link>
</li>
<li>
<router-link to="tasks/xqdoc">xqdoc</router-link>
</li>
<li>
<router-link to="tasks/vuecompile">vue compile</router-link>
</li> </li>
</ul> </ul>
</v-container> </v-container>
`, `,
data: function(){ data(){
return { return {
message: 'Hello Vue.js!', tasks: [
q:this.$route.query.q {to: "tasks/model", text: "model"},
{to: "tasks/xqdoc", text: "xqdoc"},
{to: "tasks/vuecompile", text: "vue compile"}
]
} }
},
methods:{
getTasks(){
alert("get tasks")
}
},
created(){
this.getTasks()
} }
} }
@ -1479,6 +1484,59 @@ created(){
} }
} }
);
const Home=Vue.extend({template:`
<v-card hover="" raised="">
<v-card-title class="pa-5 indigo">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
<v-spacer></v-spacer>
<v-speed-dial v-model="fab" hover="" right="" direction="bottom" transition="slide-y-reverse-transition">
<v-btn slot="activator" class="blue darken-2" dark="" fab="" hover="" v-model="fab">
<v-icon>account_circle</v-icon>
<v-icon>close</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="green">
<v-icon>edit</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="indigo">
<v-icon>add</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="red">
<v-icon>delete</v-icon>
</v-btn>
</v-speed-dial>
</v-card-title>
<v-card-text>
<p>
links
</p>
<ul>
<li><router-link :to="{path:'files', query:{url:'/vue-poc/'}}">vue-poc files</router-link></li>
<li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
<li><a href="/dba" target="new">DBA app</a></li>
<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
</ul>
<v-btn floating="floating"> <v-icon>add</v-icon>
</v-btn> <qd-link href="/dba">REPLACED</qd-link>
</v-card-text>
</v-card>
`,
data: function(){
return {
fab: false
}
}
}
); );
const Tabs=Vue.extend({template:` const Tabs=Vue.extend({template:`
<v-tabs scroll-bars=""> <v-tabs scroll-bars="">
@ -2519,7 +2577,7 @@ created(){
<v-card> <v-card>
<v-toolbar light=""> <v-toolbar>
<v-btn icon="" :to="{query: { url: '/' }}"> <v-btn icon="" :to="{query: { url: '/' }}">
<v-icon>{{icon}}</v-icon> <v-icon>{{icon}}</v-icon>
</v-btn> </v-btn>
@ -2530,16 +2588,21 @@ created(){
</v-breadcrumbs-item> </v-breadcrumbs-item>
</v-breadcrumbs> </v-breadcrumbs>
</v-toolbar-title> </v-toolbar-title>
<v-toolbar-items>
<v-btn @click="search"><v-icon>search</v-icon></v-btn>
<v-btn @click="search"><v-icon>search</v-icon></v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
<v-btn icon="" @click="alert('todo')"> <v-spacer></v-spacer>
<v-icon>view_module</v-icon>
<v-toolbar-items v-if="!selected">
<v-text-field prepend-icon="search" label="Filter..." v-model="q" type="search" hide-details="" single-line="" @keyup.enter="setfilter"></v-text-field>
<v-btn icon="" v-for="b in buttons" :key="b.icon" @click="action(b)">
<v-icon v-text="b.icon"></v-icon>
</v-btn> </v-btn>
</v-toolbar-items>
<v-toolbar-items v-if="selected">
<v-btn icon="" v-for="b in selopts" :key="b.icon" @click="action(b)">
<v-icon v-text="b.icon"></v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar> </v-toolbar>
@ -2560,7 +2623,7 @@ created(){
<v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title> <v-list-tile-sub-title>modified: {{ item.modified | formatDate}} size: {{ item.size | readablizeBytes}}</v-list-tile-sub-title>
</v-list-tile-content> </v-list-tile-content>
<v-list-tile-action> <v-list-tile-action>
<v-btn icon="" ripple="" @click.stop="info(item)"> <v-btn icon="" @click.stop="info(item)">
<v-icon class="grey--text text--lighten-1">info</v-icon> <v-icon class="grey--text text--lighten-1">info</v-icon>
</v-btn> </v-btn>
</v-list-tile-action> </v-list-tile-action>
@ -2609,7 +2672,7 @@ created(){
props:["protocol"], props:["protocol"],
data: function(){ data(){
return { return {
url: "", url: "",
folders: [], folders: [],
@ -2617,7 +2680,22 @@ created(){
q: "", q: "",
busy: false, busy: false,
showInfo: false, showInfo: false,
selected: null selected: null,
buttons: [
{method: this.todo, icon: "view_quilt"},
{method: this.add, icon: "add"},
{method: this.todo, icon: "refresh"},
{method: this.todo, icon: "sort"},
{method: this.todo, icon: "select_all"}
],
selopts: [
{method: this.todo, icon: "delete"},
{method: this.todo, icon: "content_copy"},
{method: this.todo, icon: "content_cut"},
{method: this.todo, icon: "text_format"},
{method: this.todo, icon: "info"},
{method: this.todo, icon: "share"}
]
} }
}, },
methods:{ methods:{
@ -2643,7 +2721,13 @@ created(){
}); });
}, },
action(b){
alert(b.icon)
b.method()
},
add(){
alert("add")
},
setfilter(){ setfilter(){
console.log("TODO",this.q) console.log("TODO",this.q)
this.$router.push({ query: {url:this.url,q:this.q }}) this.$router.push({ query: {url:this.url,q:this.q }})
@ -2660,8 +2744,8 @@ created(){
this.$router.push({ name: 'jobShow', params: {job:job }}) this.$router.push({ name: 'jobShow', params: {job:job }})
}) })
}, },
search(){ todo(){
alert("search") alert("todo")
} }
}, },
computed: { computed: {
@ -2737,58 +2821,6 @@ created(){
} }
} }
);
const Home=Vue.extend({template:`
<v-card hover="" raised="">
<v-card-title class="pa-5 indigo">
<div class="display-1 white--text text-xs-center">VUE-POC</div>
<v-spacer></v-spacer>
<v-speed-dial v-model="fab" hover="" right="" direction="bottom" transition="slide-y-reverse-transition">
<v-btn slot="activator" class="blue darken-2" dark="" fab="" hover="" v-model="fab">
<v-icon>account_circle</v-icon>
<v-icon>close</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="green">
<v-icon>edit</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="indigo">
<v-icon>add</v-icon>
</v-btn>
<v-btn fab="" dark="" small="" class="red">
<v-icon>delete</v-icon>
</v-btn>
</v-speed-dial>
</v-card-title>
<v-card-text>
<p>
links
</p>
<ul>
<li><router-link :to="{path:'files', query:{url:'/vue-poc/features/images/'}}">vue-poc image tasks</router-link></li>
<li><router-link :to="{path:'database', query:{url:'/vue-poc/'}}">vue-poc db</router-link></li>
<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
<li><a href="/dba" target="new">DBA app</a></li>
<li><a href="/vue-poc/ui/database?url=%2Fvue-poc%2F" target="new">db</a></li>
</ul>
<v-btn floating="floating"> <v-icon>add</v-icon>
</v-btn> <qd-link href="/dba">REPLACED</qd-link>
</v-card-text>
</v-card>
`,
data: function(){
return {
fab: false
}
}
}
); );
const About=Vue.extend({template:` const About=Vue.extend({template:`
<v-container> <v-container>

4
src/vue-poc/static/app.html
View file

@ -9,7 +9,7 @@
<title>Vue Router Test</title> <title>Vue Router Test</title>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://unpkg.com/vuetify@0.15.6/dist/vuetify.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"> <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css">
@ -35,7 +35,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="https://unpkg.com/vuetify@0.15.6/dist/vuetify.min.js"></script> <script src="https://unpkg.com/vuetify@0.15.7/dist/vuetify.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script> <script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.7/ext-language_tools.js"></script>