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

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

@ -19,7 +19,6 @@ display button that invokes a select path form
<v-card-title> <v-card-title>
Content of new tab {{type}} Content of new tab {{type}}
</v-card-title> </v-card-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>

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

@ -13,7 +13,7 @@ event fired cmd outline
'mode', 'mode',
'wrap', 'wrap',
'readOnly', 'readOnly',
'events', 'events', // event bus if set handles "eventFired",cmd
'settings', 'settings',
'minLines', 'minLines',
], ],
@ -124,7 +124,7 @@ event fired cmd outline
editor.showKeyboardShortcuts() editor.showKeyboardShortcuts()
}) })
} }
}) });
this.editor.on('change', () => { this.editor.on('change', () => {
this.beforeContent = this.editor.getValue() this.beforeContent = this.editor.getValue()
this.$emit('change-content', this.beforeContent) this.$emit('change-content', this.beforeContent)
@ -142,6 +142,14 @@ event fired cmd outline
//console.log(this.annots) //console.log(this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0}) 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){ if(this.events){
this.events.$on('eventFired', (cmd) => { this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){ if(cmd=="outline"){

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

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

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

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

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

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

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-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'; module namespace entity = 'quodatum.models.generated';

80
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 // 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:`
@ -468,7 +468,6 @@ Vue.component('vp-selectpath',{template:`
<v-card-title> <v-card-title>
Content of new tab {{type}} Content of new tab {{type}}
</v-card-title> </v-card-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
@ -542,7 +541,7 @@ Vue.component('vue-ace',{template:`
'mode', 'mode',
'wrap', 'wrap',
'readOnly', 'readOnly',
'events', 'events', // event bus if set handles "eventFired",cmd
'settings', 'settings',
'minLines', 'minLines',
], ],
@ -653,7 +652,7 @@ Vue.component('vue-ace',{template:`
editor.showKeyboardShortcuts() editor.showKeyboardShortcuts()
}) })
} }
}) });
this.editor.on('change', () => { this.editor.on('change', () => {
this.beforeContent = this.editor.getValue() this.beforeContent = this.editor.getValue()
this.$emit('change-content', this.beforeContent) this.$emit('change-content', this.beforeContent)
@ -671,6 +670,14 @@ Vue.component('vue-ace',{template:`
//console.log(this.annots) //console.log(this.annots)
this.$emit('annotation',{error: this.annots["error"]+0, warning: this.annots["warning"]+0}) 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){ if(this.events){
this.events.$on('eventFired', (cmd) => { this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){ if(cmd=="outline"){
@ -1491,17 +1498,30 @@ const Edit=Vue.extend({template:`
const Tabs=Vue.extend({template:` const Tabs=Vue.extend({template:`
<div> <div>
<v-toolbar tabs="" dense=""> <v-toolbar tabs="" dense="">
<v-toolbar-items>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath> <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-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-menu v-if="active" left="" transition="v-fade-transition">
<v-chip label="" small="" slot="activator">{{ active &amp;&amp; active.mode }}</v-chip> <v-chip label="" small="" slot="activator">{{ active.mode }}</v-chip>
<v-list dense=""> <v-list dense="">
<v-list-tile v-for="type in mimeTypes" :key="type.name"> <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-title v-text="type.name" @click="alert('todo')"></v-list-tile-title>
</v-list-tile> </v-list-tile>
</v-list> </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-spacer></v-spacer>
<v-btn @click="showInfo = !showInfo" icon=""> <v-btn @click="showInfo = !showInfo" icon="">
<v-icon v-if="showInfo">info</v-icon> <v-icon v-if="showInfo">info</v-icon>
@ -1520,12 +1540,13 @@ const Tabs=Vue.extend({template:`
</v-card> </v-card>
</v-menu> </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-tab v-for="item in items" :key="item.id" :href="'#T' + item.id" ripple="" style="text-transform: none;text-align:left">
<v-avatar> <v-avatar>
<v-icon size="16px">insert_drive_file</v-icon> <v-icon size="16px">insert_drive_file</v-icon>
</v-avatar> </v-avatar>
<span>{{ item.name + (item.dirty?"*":"") }}</span> <span>{{ item.name }}</span>
<span>{{ (item.dirty?"*":"") }}</span>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon="" @click.stop="tabClose(item)"> <v-btn icon="" @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon> <v-icon size="16px">close</v-icon>
@ -1535,11 +1556,11 @@ const Tabs=Vue.extend({template:`
</v-toolbar> </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-tab-item v-for="item in items" :key="item.id" :id="'T' + item.id">
<v-card flat="" v-if="showInfo"> <v-card flat="" v-if="showInfo">
<v-card-actions> <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-spacer></v-spacer>
<v-btn flat=""> <v-icon>highlight_off</v-icon>todo</v-btn> <v-btn flat=""> <v-icon>highlight_off</v-icon>todo</v-btn>
</v-card-actions> </v-card-actions>
@ -1575,7 +1596,7 @@ const Tabs=Vue.extend({template:`
showInfo: false, // showing info showInfo: false, // showing info
nextId:4, nextId:4,
a1:"", a1:"",
currentItem: null, //href of current currentId: null, //href of current
active: null, active: null,
items: [], items: [],
wrap: true, wrap: true,
@ -1593,14 +1614,19 @@ const Tabs=Vue.extend({template:`
if (index > -1) { if (index > -1) {
this.items.splice(index, 1); this.items.splice(index, 1);
index=(index==0)?0: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){ 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){ addItem(tab){
console.log("new: ",tab); console.log("new: ",tab);
var def={name: "AA"+this.nextId, var def={name: "AA"+this.nextId,
@ -1611,7 +1637,7 @@ const Tabs=Vue.extend({template:`
}; };
var etab = Object.assign(def,tab); var etab = Object.assign(def,tab);
this.items.push (etab); this.items.push (etab);
this.currentItem="T" + this.nextId this.currentId="T" + this.nextId
this.nextId++; this.nextId++;
}, },
changeContent(val){ changeContent(val){
@ -1635,7 +1661,7 @@ const Tabs=Vue.extend({template:`
}, },
watch:{ watch:{
currentItem: function (val) { currentId: function (val) {
this.active = this.items.find(e=> val=="T"+e.id) this.active = this.items.find(e=> val=="T"+e.id)
} }
}, },
@ -1650,13 +1676,17 @@ const Tabs=Vue.extend({template:`
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') Promise.all([settings.getItem('settings/ace'),
.then( v =>{ settings.getItem('edit/items'),
next(vm => {vm.aceSettings = v;}) 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);
}) })
settings.getItem('edit/items')
.then( v =>{
next(vm => {vm.items = v;})
}) })
}, },
@ -1665,6 +1695,7 @@ const Tabs=Vue.extend({template:`
// be navigated away from. // be navigated away from.
// has access to `this` component instance. // has access to `this` component instance.
settings.setItem('edit/items',this.items); settings.setItem('edit/items',this.items);
settings.setItem('edit/currentId',this.currentId);
next(true); next(true);
} }
@ -5613,7 +5644,8 @@ return $a `},
text:`<foo version="1.0"> text:`<foo version="1.0">
<node>hello</node> <node>hello</node>
</foo>`} </foo>`}
] ],
"edit/currentId": "?"
}, },
getItem (key) { getItem (key) {
if (this.debug) console.log('getItem',key); if (this.debug) console.log('getItem',key);

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

@ -1,4 +1,8 @@
/* app.css */ /* app.css */
/* page scroll bar off */
html { overflow-y: auto }
pre { pre {
white-space: pre-wrap; /* css-3 */ white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 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/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="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <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 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.25/dist/vue-treeselect.min.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 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/app.css" rel="stylesheet" type="text/css"/>
<link href="/vue-poc/ui/svg/d3-svg.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/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/axios/0.17.1/axios.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.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/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-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="//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.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/1.6.12/beautify-css.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="//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/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-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> <script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js"></script>