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

vuetify 1.0.18

Browse source
This commit is contained in:
Andy Bunce 2018-05-16 23:20:30 +01:00
parent b9d2a81b98
commit 68cc85267b
10 changed files with 183 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/vue-poc/components/vp-selectpath.vue
View file

@ -3,9 +3,9 @@
display button that invokes a select path form
emits selectpath event
{ type:this.type,
name: "Newname",
text:"Some text"
}
name: "Newname",
text:"Some text"
}
-->
<template id="vp-selectpath">
<v-dialog v-model="frmfav" persistent max-width="600">
@ -15,31 +15,30 @@ display button that invokes a select path form
</slot>
</v-btn>
<v-card >
<v-toolbar >
<v-card-title>
Content of new tab {{type}}
</v-card-title>
<v-toolbar >
<v-card-title>
Content of new tab {{type}}
</v-card-title>
</v-toolbar>
<v-card-text>
Content:
<v-tabs v-model="type" icons-and-text centered >
<v-tab v-for="item in protocols" :key="item.name">
{{item.name}}
<v-icon>{{item.icon}}</v-icon>
</v-tab>
<v-tab v-for="item in protocols" :key="item.name">
{{item.name}}
<v-icon>{{item.icon}}</v-icon>
</v-tab>
<v-tab-item v-for="item in protocols" :key="item.name">
<v-card flat>
<v-card-text>
<v-text-field v-for="f in item.fields" :key="f.model"
:label="f.label" :v-model="f.model"></v-text-field>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item v-for="item in protocols" :key="item.name">
<v-card flat>
<v-card-text>
<v-text-field v-for="f in item.fields" :key="f.model"
:label="f.label" :v-model="f.model"></v-text-field>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-card-text>

12
src/vue-poc/components/vue-ace.vue
View file

@ -13,7 +13,7 @@ event fired cmd outline
'mode',
'wrap',
'readOnly',
'events',
'events', // event bus if set handles "eventFired",cmd
'settings',
'minLines',
],
@ -124,7 +124,7 @@ event fired cmd outline
editor.showKeyboardShortcuts()
})
}
})
});
this.editor.on('change', () => {
this.beforeContent = this.editor.getValue()
this.$emit('change-content', this.beforeContent)
@ -142,6 +142,14 @@ event fired cmd outline
//console.log(this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0})
});
this.editor.getSession().selection.on('changeCursor', (e) => {
var position = this.editor.selection.cursor;
var token = this.editor.getSession().getTokenAt(position.row, position.column);
console.log("token",token);
this.$emit('token', token);
});
if(this.events){
this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){

3
src/vue-poc/core.js
View file

@ -127,7 +127,8 @@ return $a `},
text:`<foo version="1.0">
<node>hello</node>
</foo>`}
]
],
"edit/currentId": "?"
},
getItem (key) {
if (this.debug) console.log('getItem',key);

34
src/vue-poc/data/vue-poc/mimetypes.xml
View file

@ -1,20 +1,20 @@
<mimetypes xmlns="urn:quodatum:vue-poc.mimetypes">
<type name="css">
<mime type="css" ext="css" />
</type>
<type name="html">
<mime type="text/html" ext="htm html" />
</type>
<type name="css">
<mime type="css" ext="css" />
</type>
<type name="html">
<mime type="text/html" ext="htm html" />
</type>
<type name="javascript">
<mime type="text/ecmascript" ext="js" />
</type>
<type name="xml">
<mime type="text/xml" ext="xml xsd" />
</type>
<type name="sparql">
<mime type="application/sparql-query" ext="rq" />
</type>
<type name="xquery">
<mime type="application/xquery" ext="xq xqm" />
</type>
<mime type="text/ecmascript" ext="js" />
</type>
<type name="xml">
<mime type="text/xml" ext="xml xsd" />
</type>
<type name="sparql">
<mime type="application/sparql-query" ext="rq" />
</type>
<type name="xquery">
<mime type="application/xquery" ext="xq xqm" />
</type>
</mimetypes>

2
src/vue-poc/features/collection/collections.xqm
View file

@ -56,7 +56,7 @@ as element(json)
"webfile":ufile:webfile#1,
"xmldb":ufile:xmldb#1
}
let $items:=$reader($protocol)($url)
let $items:=$reader($protocol=>trace("PROTO"))($url)
return vue-api:items($items)
};

72
src/vue-poc/features/edit/tabs.vue
View file

@ -2,17 +2,30 @@
<template id="tabs">
<div>
<v-toolbar tabs dense>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }} : {{ active && active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
<v-toolbar-items>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-btn icon @click="openUri"><v-icon>insert_drive_file</v-icon></v-btn>
</v-toolbar-items>
<v-toolbar-title>{{ currentId }} </v-toolbar-title>
<v-menu left transition="v-fade-transition" >
<v-chip label small slot="activator" >{{ active && active.mode }}</v-chip>
<v-menu v-if="active" left transition="v-fade-transition" >
<v-chip label small slot="activator" >{{ active.mode }}</v-chip>
<v-list dense>
<v-list-tile v-for="type in mimeTypes" :key="type.name">
<v-list-tile-title v-text="type.name" @click="alert('todo')"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-menu>
<v-menu v-if="active" left transition="v-fade-transition" >
<v-btn icon slot="activator" ><v-icon>lightbulb_outline</v-icon></v-btn>
<v-list dense>
<v-list-tile v-for="type in mimeTypes" :key="type.name">
<v-list-tile-title v-text="type.name" @click="lightbulb(type.name)"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-spacer></v-spacer>
<v-btn @click="showInfo = !showInfo" icon>
<v-icon v-if="showInfo">info</v-icon>
@ -36,7 +49,7 @@
</v-card>
</v-menu>
<v-tabs v-model="currentItem" slot="extension">
<v-tabs v-model="currentId" slot="extension">
<v-tab
v-for="item in items"
:key="item.id"
@ -46,7 +59,8 @@
<v-avatar >
<v-icon size="16px">insert_drive_file</v-icon>
</v-avatar>
<span >{{ item.name + (item.dirty?"*":"") }}</span>
<span >{{ item.name }}</span>
<span >{{ (item.dirty?"*":"") }}</span>
<v-spacer></v-spacer>
<v-btn icon @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -56,7 +70,7 @@
</v-toolbar>
<v-tabs-items slot="body" v-model="currentItem">
<v-tabs-items slot="body" v-model="currentId">
<v-tab-item
v-for="item in items"
:key="item.id"
@ -64,7 +78,7 @@
>
<v-card flat v-if="showInfo" >
<v-card-actions >
<v-toolbar-title >Metadata for tab id: '{{ currentItem }}'</v-toolbar-title>
<v-toolbar-title >Metadata for tab id: '{{ currentId }}'</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat > <v-icon>highlight_off</v-icon>todo</v-btn>
</v-card-actions>
@ -107,7 +121,7 @@
showInfo: false, // showing info
nextId:4,
a1:"",
currentItem: null, //href of current
currentId: null, //href of current
active: null,
items: [],
wrap: true,
@ -125,14 +139,19 @@
if (index > -1) {
this.items.splice(index, 1);
index=(index==0)?0:index-1;
this.currentItem=(this.items.length)?"T"+this.items[index].id : null;
this.currentId=(this.items.length)?"T"+this.items[index].id : null;
}
}
},
setItem(v){
if(v) this.currentItem="T"+v;
if(v) this.currentId="T"+v;
},
openUri(){
alert("openUri TODO")
},
lightbulb(d){
alert("lightbulb TODO: " + d)
},
addItem(tab){
console.log("new: ",tab);
var def={name: "AA"+this.nextId,
@ -143,7 +162,7 @@
};
var etab = Object.assign(def,tab);
this.items.push (etab);
this.currentItem="T" + this.nextId
this.currentId="T" + this.nextId
this.nextId++;
},
changeContent(val){
@ -167,7 +186,7 @@
},
watch:{
currentItem: function (val) {
currentId: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
@ -182,21 +201,26 @@
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{
next(vm => {vm.aceSettings = v;})
})
settings.getItem('edit/items')
.then( v =>{
next(vm => {vm.items = v;})
})
},
Promise.all([settings.getItem('settings/ace'),
settings.getItem('edit/items'),
settings.getItem('edit/currentId'),
])
.then(function(values) {
next(vm => {
vm.aceSettings = values[0];
vm.items = values[1];
vm.currentId = values[2];
//console.log("done all",values);
})
})
},
beforeRouteLeave (to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
settings.setItem('edit/items',this.items);
settings.setItem('edit/currentId',this.currentId);
next(true);
}

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

@ -1,5 +1,5 @@
(: entity access maps
: auto generated from xml files in entities folder at: 2018-03-25T22:09:48.189+01:00
: auto generated from xml files in entities folder at: 2018-05-16T23:18:57.393+01:00
:)
module namespace entity = 'quodatum.models.generated';

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

@ -1,4 +1,4 @@
// generated 2018-05-07T22:46:00.067+01:00
// generated 2018-05-16T22:38:13.701+01:00
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
Vue.component('qd-confirm',{template:`
@ -464,30 +464,29 @@ Vue.component('vp-selectpath',{template:`
</slot>
</v-btn>
<v-card>
<v-toolbar>
<v-card-title>
Content of new tab {{type}}
</v-card-title>
<v-toolbar>
<v-card-title>
Content of new tab {{type}}
</v-card-title>
</v-toolbar>
<v-card-text>
Content:
<v-tabs v-model="type" icons-and-text="" centered="">
<v-tab v-for="item in protocols" :key="item.name">
{{item.name}}
<v-icon>{{item.icon}}</v-icon>
</v-tab>
<v-tab v-for="item in protocols" :key="item.name">
{{item.name}}
<v-icon>{{item.icon}}</v-icon>
</v-tab>
<v-tab-item v-for="item in protocols" :key="item.name">
<v-card flat="">
<v-card-text>
<v-text-field v-for="f in item.fields" :key="f.model" :label="f.label" :v-model="f.model"></v-text-field>
</v-card-text>
</v-card>
</v-tab-item>
<v-tab-item v-for="item in protocols" :key="item.name">
<v-card flat="">
<v-card-text>
<v-text-field v-for="f in item.fields" :key="f.model" :label="f.label" :v-model="f.model"></v-text-field>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-card-text>
@ -542,7 +541,7 @@ Vue.component('vue-ace',{template:`
'mode',
'wrap',
'readOnly',
'events',
'events', // event bus if set handles "eventFired",cmd
'settings',
'minLines',
],
@ -653,7 +652,7 @@ Vue.component('vue-ace',{template:`
editor.showKeyboardShortcuts()
})
}
})
});
this.editor.on('change', () => {
this.beforeContent = this.editor.getValue()
this.$emit('change-content', this.beforeContent)
@ -671,6 +670,14 @@ Vue.component('vue-ace',{template:`
//console.log(this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0})
});
this.editor.getSession().selection.on('changeCursor', (e) => {
var position = this.editor.selection.cursor;
var token = this.editor.getSession().getTokenAt(position.row, position.column);
console.log("token",token);
this.$emit('token', token);
});
if(this.events){
this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){
@ -1491,17 +1498,30 @@ const Edit=Vue.extend({template:`
const Tabs=Vue.extend({template:`
<div>
<v-toolbar tabs="" dense="">
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }} : {{ active &amp;&amp; active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
<v-toolbar-items>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-btn icon="" @click="openUri"><v-icon>insert_drive_file</v-icon></v-btn>
</v-toolbar-items>
<v-toolbar-title>{{ currentId }} </v-toolbar-title>
<v-menu left="" transition="v-fade-transition">
<v-chip label="" small="" slot="activator">{{ active &amp;&amp; active.mode }}</v-chip>
<v-menu v-if="active" left="" transition="v-fade-transition">
<v-chip label="" small="" slot="activator">{{ active.mode }}</v-chip>
<v-list dense="">
<v-list-tile v-for="type in mimeTypes" :key="type.name">
<v-list-tile-title v-text="type.name" @click="alert('todo')"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-menu>
<v-menu v-if="active" left="" transition="v-fade-transition">
<v-btn icon="" slot="activator"><v-icon>lightbulb_outline</v-icon></v-btn>
<v-list dense="">
<v-list-tile v-for="type in mimeTypes" :key="type.name">
<v-list-tile-title v-text="type.name" @click="lightbulb(type.name)"></v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
<v-spacer></v-spacer>
<v-btn @click="showInfo = !showInfo" icon="">
<v-icon v-if="showInfo">info</v-icon>
@ -1520,12 +1540,13 @@ const Tabs=Vue.extend({template:`
</v-card>
</v-menu>
<v-tabs v-model="currentItem" slot="extension">
<v-tabs v-model="currentId" slot="extension">
<v-tab v-for="item in items" :key="item.id" :href="'#T' + item.id" ripple="" style="text-transform: none;text-align:left">
<v-avatar>
<v-icon size="16px">insert_drive_file</v-icon>
</v-avatar>
<span>{{ item.name + (item.dirty?"*":"") }}</span>
<span>{{ item.name }}</span>
<span>{{ (item.dirty?"*":"") }}</span>
<v-spacer></v-spacer>
<v-btn icon="" @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -1535,11 +1556,11 @@ const Tabs=Vue.extend({template:`
</v-toolbar>
<v-tabs-items slot="body" v-model="currentItem">
<v-tabs-items slot="body" v-model="currentId">
<v-tab-item v-for="item in items" :key="item.id" :id="'T' + item.id">
<v-card flat="" v-if="showInfo">
<v-card-actions>
<v-toolbar-title>Metadata for tab id: '{{ currentItem }}'</v-toolbar-title>
<v-toolbar-title>Metadata for tab id: '{{ currentId }}'</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat=""> <v-icon>highlight_off</v-icon>todo</v-btn>
</v-card-actions>
@ -1575,7 +1596,7 @@ const Tabs=Vue.extend({template:`
showInfo: false, // showing info
nextId:4,
a1:"",
currentItem: null, //href of current
currentId: null, //href of current
active: null,
items: [],
wrap: true,
@ -1593,14 +1614,19 @@ const Tabs=Vue.extend({template:`
if (index > -1) {
this.items.splice(index, 1);
index=(index==0)?0:index-1;
this.currentItem=(this.items.length)?"T"+this.items[index].id : null;
this.currentId=(this.items.length)?"T"+this.items[index].id : null;
}
}
},
setItem(v){
if(v) this.currentItem="T"+v;
if(v) this.currentId="T"+v;
},
openUri(){
alert("openUri TODO")
},
lightbulb(d){
alert("lightbulb TODO: " + d)
},
addItem(tab){
console.log("new: ",tab);
var def={name: "AA"+this.nextId,
@ -1611,7 +1637,7 @@ const Tabs=Vue.extend({template:`
};
var etab = Object.assign(def,tab);
this.items.push (etab);
this.currentItem="T" + this.nextId
this.currentId="T" + this.nextId
this.nextId++;
},
changeContent(val){
@ -1635,7 +1661,7 @@ const Tabs=Vue.extend({template:`
},
watch:{
currentItem: function (val) {
currentId: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
@ -1650,21 +1676,26 @@ const Tabs=Vue.extend({template:`
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{
next(vm => {vm.aceSettings = v;})
})
settings.getItem('edit/items')
.then( v =>{
next(vm => {vm.items = v;})
})
},
Promise.all([settings.getItem('settings/ace'),
settings.getItem('edit/items'),
settings.getItem('edit/currentId'),
])
.then(function(values) {
next(vm => {
vm.aceSettings = values[0];
vm.items = values[1];
vm.currentId = values[2];
//console.log("done all",values);
})
})
},
beforeRouteLeave (to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
settings.setItem('edit/items',this.items);
settings.setItem('edit/currentId',this.currentId);
next(true);
}
@ -5613,7 +5644,8 @@ return $a `},
text:`<foo version="1.0">
<node>hello</node>
</foo>`}
]
],
"edit/currentId": "?"
},
getItem (key) {
if (this.debug) console.log('getItem',key);

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

@ -1,4 +1,8 @@
/* app.css */
/* page scroll bar off */
html { overflow-y: auto }
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */

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

@ -11,8 +11,8 @@
<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 href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="//unpkg.com/vuetify@1.0.17/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.25/dist/vue-treeselect.min.css">
<link href="//unpkg.com/vuetify@1.0.18/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/@riophae/vue-treeselect@0.0.28/dist/vue-treeselect.min.css">
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.css"/>
<link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
<link href="/vue-poc/ui/svg/d3-svg.css" rel="stylesheet" type="text/css"/>
@ -38,9 +38,10 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
<script src="//unpkg.com/vuetify@1.0.17/dist/vuetify.min.js"></script>
<script src="//unpkg.com/vuetify@1.0.18/dist/vuetify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-linking.js" type="text/javascript" charset="utf-8"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.js"></script>
@ -50,7 +51,7 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
<script src="//unpkg.com/vue-jstree@1.0.11/dist/vue-jstree.js"></script>
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.25/dist/vue-treeselect.min.js"></script>
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.28/dist/vue-treeselect.min.js"></script>
<script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js"></script>
<script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js"></script>