vuetify 2.2.6

This commit is contained in:
andy 2020-05-01 14:37:34 +01:00
parent cdeb4db1d2
commit f4c39d186d
14 changed files with 332 additions and 122 deletions

View file

@ -266,7 +266,7 @@
},
created(){
console.log("create-----------");
console.log("create-----------", this.items);
var that=this
window.addEventListener('error', function (err) {

View file

@ -1,4 +1,5 @@
// ace customisations
// ace customisations installs to $aceExtras
// rhymeCompleter, basexCompleter, snippets
const AceExtras={
rhymeCompleter: {
// test completer

View file

@ -0,0 +1,43 @@
# Installs
## $aceExtras ace customisations
```
{ rhymeCompleter,
basexCompleter,
snippets
}
```
## $auth
```
{ user: "guest",
role: null,
session: null,
created: null,
}
```
## $fullscreen
```
isInFullScreen()
toggle()
```
## $MimeTypes
```
contentType
mode
list
icon(mode)
```
## $notification
```
add()
```
# Filters
* fromNow
* readablizeBytes
* round
* pretty

View file

@ -12,20 +12,23 @@
</v-toolbar>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
:items="pack"
:items-per-page="100"
class="elevation-1"
></v-data-table>
<v-card-text> <pre>{{ pack | pretty }}</pre> </v-card-text>
</v-card>
</v-container>
</template>
<script>{
data: function(){
return {
pack: null,
pack: [],
fab: false,
showmenu: false
showmenu: false,
headers:[
{ text: 'name', value: 'name' },
{ text: 'version', value: 'version' }
],
}
},
methods:{
@ -33,7 +36,9 @@
HTTP.get("package.json")
.then(r=>{
console.log("status",r)
this.pack=r.data.dependencies
var m=r.data.dependencies
var d = Object.keys(m).map(function (v,i){return {"name": v ,"version": m[v]}});
this.pack=d.sort((a,b)=>a.name.localeCompare(b.name))
})
},
},

View file

@ -14,7 +14,7 @@
<v-data-table
:headers="headers"
:items="routes"
:items-per-page="20"
:items-per-page="100"
class="elevation-1"
></v-data-table>
<pre>{{ pack | pretty }}</pre> </v-card-text>
@ -31,19 +31,24 @@
headers:[
{ text: '#', value: 'index' },
{ text: 'Path', value: 'path' },
{ text: 'Title', value: 'title' }
{ text: 'Name', value: 'name' },
{ text: 'Title', value: 'title' },
{ text: 'Children', value: 'children' }
],
}
},
methods:{
refresh(){
var hits=this.$router.options.routes;
this.routes=hits.map(function(v,i){
hits=hits.map(function(v,i){
return {"index":i,
"path": v.path,
"name":"ww",
"title": v.meta && v.meta.title
"name": v.name,
"title": v.meta && v.meta.title,
"children": v.children && v.children.length
}});
hits.sort((a,b)=>a.path.localeCompare(b.path) )
this.routes=hits
console.log("routes: ",hits)
},
},

View file

@ -1,6 +1,6 @@
<!DOCTYPE html>
<template id="edit">
<v-container fluid>
<v-container >
<v-snackbar top color="error" v-model="snackbar">
{{ message }}
<v-btn text @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>

View file

@ -32,7 +32,7 @@
class="elevation-1"
>
<template v-slot:item.to="{ item }" >
<td ><router-link :to="'tasks/' + item.to" v-text="item.to"></router-link></td>
<td ><router-link :to="item.to" :append="true" v-text="item.to"></router-link></td>
</template>
<template slot="no-data">

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<template id="tasks1">
<v-container fluid>
<v-progress-linear v-if="loading" v-bind:indeterminate="true" ></v-progress-linear>
<v-card>
<v-toolbar>
<v-toolbar-title>
<qd-breadcrumbs
:crumbs="[{to: '/tasks', text:'Tasks'}, {text: task, disabled: true} ]"
>crumbs</qd-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<vp-entitylink entity="quodatum.task"></vp-entitylink>
</v-toolbar>
<v-card-text>
<h1>{{ task }} </h1>
<ul><li>
<router-link :to="{path: 'run', append:true }" > <v-icon>folder</v-icon>Run</router-link>
</li>
<li>
<router-link :to="{name: 'edit', query:{apple: task} }" > <v-icon>folder</v-icon>Edit</router-link>
</li>
<li>
<router-link :to="{name:'taskhistory', query:{task: task}}"><v-icon>history</v-icon>History</router-link>
</li>
</ul>
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
props:["task"],
data(){
return {
crumbs: [{to: "/tasks", text: "Tasks"},
{ text: this.task}],
items: [],
loading: false,
q: null,
headers: [
{ text: 'Task', value: 'to' },
{ text: 'Title', value: 'title' },
{ text: 'Description', value: 'description' },
]
}
},
methods:{
getTasks(){
this.loading= true;
HTTP.get("tasks")
.then(r=>{
this.items=r.data;
this.loading= false;
})
}
},
created(){
this.getTasks()
}
}
</script>

View file

@ -1,10 +1,10 @@
{
"name": "vue-poc",
"version": "0.5.2",
"version": "0.5.5",
"description": "Frontend vuetify, backend: basex",
"dependencies": {
"ace": "1.4.8",
"vuetify": "2.2.19",
"ace": "1.4.10",
"vuetify": "2.2.21",
"vue": "2.6.11",
"vuex": "3.1.0",
"vue-router": "3.1.6",

View file

@ -126,17 +126,21 @@ const router = new VueRouter({
{ path: '/logs', component: Log, meta:{title:"Server logs"} },
{ path: '/tasks', component: Tasks, meta:{title:"Runnable tasks"} },
{ path: '/tasks/model', component: Model, meta:{title:"build model"} },
{ path: '/tasks/vuecompile', component: Vuecompile, meta:{title:"vue compile"} },
{ path: '/tasks/:task', component: Runtask, props: true, meta:{title:"Run task"} },
{ path: '/tasks', component: { template: '<router-view/>' } , children:[
{ path: '', component: Tasks, meta:{title:"Runnable tasks"} },
{ path: 'model', component: Model, meta:{title:"build model"} },
{ path: 'vuecompile', component: Vuecompile, meta:{title:"vue compile"} },
{ path: ':task', props: true, component: { template: '<router-view/>' },
children:[
{path:"", props: true, component: Tasks1 },
{path: "run", component: Runtask, props: true, meta:{title:"Run task"} },
]}
]},
{ path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/about', component: { template: '<router-view/>' }
,children:[
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },

View file

@ -1,4 +1,4 @@
// generated 2020-04-06T22:33:30.222+01:00
// generated 2020-05-01T14:30:58.886+01:00
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-autoheight.vue
Vue.component('qd-autoheight',{template:`
@ -1185,7 +1185,8 @@ Vue.component('vue-ace',{template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/aceextras.js
// ace customisations
// ace customisations installs to $aceExtras
// rhymeCompleter, basexCompleter, snippets
const AceExtras={
rhymeCompleter: {
// test completer
@ -1703,17 +1704,20 @@ const Package=Vue.extend({template:`
</v-card-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1"></v-data-table>
<v-card-text> <pre>{{ pack | pretty }}</pre> </v-card-text>
<v-data-table :headers="headers" :items="pack" :items-per-page="100" class="elevation-1"></v-data-table>
</v-card>
</v-container>
`,
data: function(){
return {
pack: null,
pack: [],
fab: false,
showmenu: false
showmenu: false,
headers:[
{ text: 'name', value: 'name' },
{ text: 'version', value: 'version' }
],
}
},
methods:{
@ -1721,7 +1725,9 @@ const Package=Vue.extend({template:`
HTTP.get("package.json")
.then(r=>{
console.log("status",r)
this.pack=r.data.dependencies
var m=r.data.dependencies
var d = Object.keys(m).map(function (v,i){return {"name": v ,"version": m[v]}});
this.pack=d.sort((a,b)=>a.name.localeCompare(b.name))
})
},
},
@ -1742,7 +1748,7 @@ const Routes=Vue.extend({template:`
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-data-table :headers="headers" :items="routes" :items-per-page="20" class="elevation-1"></v-data-table>
<v-data-table :headers="headers" :items="routes" :items-per-page="100" class="elevation-1"></v-data-table>
<pre>{{ pack | pretty }}</pre> </v-card-text>
</v-card>
</v-container>
@ -1757,19 +1763,24 @@ const Routes=Vue.extend({template:`
headers:[
{ text: '#', value: 'index' },
{ text: 'Path', value: 'path' },
{ text: 'Title', value: 'title' }
{ text: 'Name', value: 'name' },
{ text: 'Title', value: 'title' },
{ text: 'Children', value: 'children' }
],
}
},
methods:{
refresh(){
var hits=this.$router.options.routes;
this.routes=hits.map(function(v,i){
hits=hits.map(function(v,i){
return {"index":i,
"path": v.path,
"name":"ww",
"title": v.meta && v.meta.title
"name": v.name,
"title": v.meta && v.meta.title,
"children": v.children && v.children.length
}});
hits.sort((a,b)=>a.path.localeCompare(b.path) )
this.routes=hits
console.log("routes: ",hits)
},
},
@ -3082,7 +3093,7 @@ created:function(){
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/edit/edit.vue
const Edit=Vue.extend({template:`
<v-container fluid>
<v-container>
<v-snackbar top color="error" v-model="snackbar">
{{ message }}
<v-btn text @click="snackbar = false"><v-icon>highlight_off</v-icon></v-btn>
@ -4123,74 +4134,6 @@ const Filehistory=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/history/taskhistory.vue
const Taskhistory=Vue.extend({template:`
<v-container fluid>
<v-progress-linear v-if="loading" v-bind:indeterminate="true"></v-progress-linear>
<v-card>
<v-toolbar>
<v-toolbar-title>
<v-breadcrumbs>
<v-breadcrumbs-item to="/tasks" :exact="true">
Tasks
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field prepend-icon="filter_list" label="Filter..." v-model="q" type="search" hide-details single-line @keyup.enter="setfilter" clearable></v-text-field>
<v-spacer></v-spacer>
<vp-entitylink entity="quodatum.task"></vp-entitylink>
</v-toolbar>
<v-card-text>
<v-data-table :headers="headers" :items="items" hide-default-footer :search="q" class="elevation-1">
<template slot="items" slot-scope="props">
<td>AA: <router-link :to="'tasks/' + props.item.to" v-text="props.item.title"></router-link></td>
<td>{{ props.item.description }}</td>
</template>
<template slot="no-data">
<v-alert :value="true" icon="warning">
No matching items.
</v-alert>
</template>
</v-data-table>
</v-card-text>
</v-card>
</v-container>
`,
data(){
return {
items: [],
loading: false,
q: null,
headers: [
{ text: 'Task', value: 'title' },
{ text: 'Description', value: 'description' },
]
}
},
methods:{
getTasks(){
this.loading= true;
HTTP.get("tasks")
.then(r=>{
this.items=r.data;
this.loading= false;
})
}
},
created(){
this.getTasks()
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/home.vue
const Home=Vue.extend({template:`
@ -7094,7 +7037,7 @@ const Model=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/task/runtask.vue
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/runtask.vue
const Runtask=Vue.extend({template:`
<v-container fluid>
<v-card>
@ -7185,6 +7128,74 @@ const Runtask=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/taskhistory.vue
const Taskhistory=Vue.extend({template:`
<v-container fluid>
<v-progress-linear v-if="loading" v-bind:indeterminate="true"></v-progress-linear>
<v-card>
<v-toolbar>
<v-toolbar-title>
<v-breadcrumbs>
<v-breadcrumbs-item to="/tasks" :exact="true">
Tasks
</v-breadcrumbs-item>
</v-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field prepend-icon="filter_list" label="Filter..." v-model="q" type="search" hide-details single-line @keyup.enter="setfilter" clearable></v-text-field>
<v-spacer></v-spacer>
<vp-entitylink entity="quodatum.task"></vp-entitylink>
</v-toolbar>
<v-card-text>
<v-data-table :headers="headers" :items="items" hide-default-footer :search="q" class="elevation-1">
<template slot="items" slot-scope="props">
<td>AA: <router-link :to="'tasks/' + props.item.to" v-text="props.item.title"></router-link></td>
<td>{{ props.item.description }}</td>
</template>
<template slot="no-data">
<v-alert :value="true" icon="warning">
No matching items.
</v-alert>
</template>
</v-data-table>
</v-card-text>
</v-card>
</v-container>
`,
data(){
return {
items: [],
loading: false,
q: null,
headers: [
{ text: 'Task', value: 'title' },
{ text: 'Description', value: 'description' },
]
}
},
methods:{
getTasks(){
this.loading= true;
HTTP.get("tasks")
.then(r=>{
this.items=r.data;
this.loading= false;
})
}
},
created(){
this.getTasks()
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/tasks.vue
const Tasks=Vue.extend({template:`
<v-container fluid>
@ -7211,7 +7222,7 @@ const Tasks=Vue.extend({template:`
<v-card-text>
<v-data-table :headers="headers" :items="items" hide-default-footer :search="q" class="elevation-1">
<template v-slot:item.to="{ item }">
<td><router-link :to="'tasks/' + item.to" v-text="item.to"></router-link></td>
<td><router-link :to="item.to" :append="true" v-text="item.to"></router-link></td>
</template>
<template slot="no-data">
@ -7258,6 +7269,74 @@ const Tasks=Vue.extend({template:`
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/tasks1.vue
const Tasks1=Vue.extend({template:`
<v-container fluid>
<v-progress-linear v-if="loading" v-bind:indeterminate="true"></v-progress-linear>
<v-card>
<v-toolbar>
<v-toolbar-title>
<qd-breadcrumbs :crumbs="[{to: '/tasks', text:'Tasks'}, {text: task, disabled: true} ]">crumbs</qd-breadcrumbs>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<vp-entitylink entity="quodatum.task"></vp-entitylink>
</v-toolbar>
<v-card-text>
<h1>{{ task }} </h1>
<ul><li>
<router-link :to="{path: 'run', append:true }"> <v-icon>folder</v-icon>Run</router-link>
</li>
<li>
<router-link :to="{name: 'edit', query:{apple: task} }"> <v-icon>folder</v-icon>Edit</router-link>
</li>
<li>
<router-link :to="{name:'taskhistory', query:{task: task}}"><v-icon>history</v-icon>History</router-link>
</li>
</ul>
</v-card-text>
</v-card>
</v-container>
`,
props:["task"],
data(){
return {
crumbs: [{to: "/tasks", text: "Tasks"},
{ text: this.task}],
items: [],
loading: false,
q: null,
headers: [
{ text: 'Task', value: 'to' },
{ text: 'Title', value: 'title' },
{ text: 'Description', value: 'description' },
]
}
},
methods:{
getTasks(){
this.loading= true;
HTTP.get("tasks")
.then(r=>{
this.items=r.data;
this.loading= false;
})
}
},
created(){
this.getTasks()
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tasks/vue-compile/vuecompile.vue
const Vuecompile=Vue.extend({template:`
<v-container fluid>
@ -7949,17 +8028,21 @@ const router = new VueRouter({
{ path: '/logs', component: Log, meta:{title:"Server logs"} },
{ path: '/tasks', component: Tasks, meta:{title:"Runnable tasks"} },
{ path: '/tasks/model', component: Model, meta:{title:"build model"} },
{ path: '/tasks/vuecompile', component: Vuecompile, meta:{title:"vue compile"} },
{ path: '/tasks/:task', component: Runtask, props: true, meta:{title:"Run task"} },
{ path: '/tasks', component: { template: '<router-view/>' } , children:[
{ path: '', component: Tasks, meta:{title:"Runnable tasks"} },
{ path: 'model', component: Model, meta:{title:"build model"} },
{ path: 'vuecompile', component: Vuecompile, meta:{title:"vue compile"} },
{ path: ':task', props: true, component: { template: '<router-view/>' },
children:[
{path:"", props: true, component: Tasks1 },
{path: "run", component: Runtask, props: true, meta:{title:"Run task"} },
]}
]},
{ path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/about', component: { template: '<router-view/>' }
,children:[
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },
@ -8213,7 +8296,7 @@ const Vuepoc=Vue.extend({template:`
{href: '/labs/markdown',text: 'Markdown',icon: 'receipt'},
]},
{href: '/settings',text: 'Settings',icon: 'settings' },
{href: '/about',text: 'About Vue-poc' , icon: 'help' },
{href: '/about',text: 'About' , icon: 'help' },
]
}},
@ -8247,7 +8330,7 @@ const Vuepoc=Vue.extend({template:`
},
created(){
console.log("create-----------");
console.log("create-----------", this.items);
var that=this
window.addEventListener('error', function (err) {

View file

@ -11,7 +11,7 @@
<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="//cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" >
<link rel="stylesheet" href="//unpkg.com/vuetify@2.2.19/dist/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/vuetify@2.2.26/dist/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.css"/>
<link rel="stylesheet" href="/vue-poc/ui/prism/prism.css" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
@ -40,10 +40,10 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js" crossorigin="anonymous"></script>
<script src="//unpkg.com/vuex@3.1.0/dist/vuex.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
<script src="//unpkg.com/vuetify@2.2.19/dist/vuetify.min.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ace.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ext-language_tools.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.8/ext-linking.js" crossorigin="anonymous" charset="utf-8"></script>
<script src="//unpkg.com/vuetify@2.2.26/dist/vuetify.min.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ace.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-language_tools.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.4.10/ext-linking.js" crossorigin="anonymous" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.9.0/beautify.js" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.9.0/beautify-css.js" crossorigin="anonymous"></script>