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

tab edit

This commit is contained in:
Andy Bunce 2018-03-22 22:59:07 +00:00
parent c2b65b4cee
commit cc6d3e6ed3
5 changed files with 143 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/vue-poc/components/vp-selectpath.vue
View File

@ -1,7 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<!-- <!--
display button that invokes a select path form display button that invokes a select path form
emits selectpath emits selectpath event
{ type:this.type,
name: "Newname",
text:"Some text"
}
--> -->
<template id="vp-selectpath"> <template id="vp-selectpath">
<v-menu :close-on-click="false" <v-menu :close-on-click="false"
@ -20,13 +24,12 @@ display button that invokes a select path form
<v-card-title> <v-card-title>
Add a new tab Add a new tab
</v-card-title> </v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
Content: Content:
<v-tabs icons-and-text centered > <v-tabs v-model="type" icons-and-text centered >
<v-tab > <v-tab >
Empty Empty
@ -60,16 +63,16 @@ display button that invokes a select path form
</v-card> </v-card>
</v-tab-item> </v-tab-item>
</v-tabs> </v-tabs>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="favorite(); set(false)">Add tab</v-btn> <v-btn color="primary" flat @click.stop="favorite(); set(false)">Add tab</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-menu></template> </v-menu>
</template>
<script>{ <script>{
props: { props: {
frmfav: Boolean frmfav: Boolean
@ -87,7 +90,11 @@ display button that invokes a select path form
}, },
favorite(){ favorite(){
this.$emit('selectpath', {type:this.type}) this.$emit('selectpath', {
type:this.type,
name: "doc" + moment().format("YYYY-MM-DDThh:mm:ss") ,
text:"Some text"
})
} }
} }
}</script> }</script>

6
src/vue-poc/features/collection/history.vue
View File

@ -2,8 +2,8 @@
<template id="history"> <template id="history">
<v-container > <v-container >
<v-card> <v-card>
<vcard-text> <v-card-title>History</v-card-title>
<v-card-title>History</v-card-title> <v-card-text>
<v-list> <v-list>
<v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar> <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar>
<v-list-tile-action> <v-list-tile-action>
@ -14,7 +14,7 @@
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</vcard-text> </v-card-text>
</v-card> </v-card>
</v-container> </v-container>
</template> </template>

78
src/vue-poc/features/edit/tabs.vue
View File

@ -2,11 +2,12 @@
<template id="tabs"> <template id="tabs">
<div> <div>
<v-toolbar tabs> <v-toolbar tabs>
<v-toolbar-side-icon></v-toolbar-side-icon> <vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }}</v-toolbar-title> <v-toolbar-title>{{ currentItem }} : {{ active && active.name }}</v-toolbar-title>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath> <v-spacer></v-spacer>
<v-spacer></v-spacer> <v-btn>unused</v-btn>
<v-btn>{{ active && active.mode }}</v-btn>
<v-btn>{{ active && active.dirty }}</v-btn>
<v-menu left bottom > <v-menu left bottom >
<a class="tabs__item" slot="activator"> <a class="tabs__item" slot="activator">
{{ items.length }} {{ items.length }}
@ -16,6 +17,7 @@
<v-card-actions> <v-card-actions>
<v-select :items="sorted" v-model="a1" <v-select :items="sorted" v-model="a1"
label="File" class="input-group--focused" label="File" class="input-group--focused"
item-text="name" item-value="id"
autocomplete @change="setItem" autocomplete @change="setItem"
></v-select> ></v-select>
</v-card-actions> </v-card-actions>
@ -27,13 +29,13 @@
<v-tab <v-tab
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
:href="'#tab-' + item.id" ripple :href="'#T' + item.id" ripple
style="text-transform: none;text-align:left" 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 style="text-transform: none;">{{ item.name }}</span> <span >{{ item.name }}</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>
@ -49,12 +51,13 @@
<v-tab-item <v-tab-item
v-for="item in items" v-for="item in items"
:key="item.id" :key="item.id"
:id="'tab-' + item.id" :id="'T' + item.id"
> >
<v-card flat > <v-card flat >
<div style="height:200px" ref="ace" v-resize="onResize" > <div style="height:200px" ref="ace" v-resize="onResize" >
<v-flex xs12 fill-height > <v-flex xs12 fill-height >
<vue-ace :content="item.text" :mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace> <vue-ace :content="item.text" v-on:change-content="changeContent"
:mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
</v-flex> </v-flex>
</div> </div>
</v-card> </v-card>
@ -69,59 +72,84 @@
showadd: false, showadd: false,
nextId:4, nextId:4,
a1:"", a1:"",
currentItem: null, currentItem: null, //href of current
active: null,
items: [ items: [
{name:"web.txt", id:"1", mode:"text", {name:"web.txt", id:"1", mode:"text", dirty: false,
text:"1 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:"1 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."},
{name:"Shopping.xq", id:"2", mode: "xquery" , {name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
text:"2 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:"2 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."},
{name:"videos.xml", id:"3", mode:"xml", {name:"videos.xml", id:"3", mode:"xml",dirty: false,
text:"2 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:"2 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."},
], ],
wrap: true, wrap: true,
mode: "xquery",
aceSettings: {} aceSettings: {}
} }
}, },
methods:{ methods:{
tabClose(item){ tabClose(item){
alert("close:"+ item.id); if(item.dirty){
alert("save first")
}else{
var index=this.items.indexOf(item);
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;
}
}
}, },
setItem(v){ setItem(v){
//alert(v); this.currentItem="T"+v;
this.currentItem=v;
}, },
addItem(){ addItem(tab){
var tab={name: "AA"+this.nextId, console.log("TABS: ",tab);
var def={name: "AA"+this.nextId,
id: ""+this.nextId, id: ""+this.nextId,
contentType: "text/xml",
mode: "xml", mode: "xml",
text: "New text" +this.nextId text: "New text" +this.nextId
}; };
this.items.push (tab); var etab = Object.assign(def,tab);
this.currentItem="tab-" + this.nextId this.items.push (etab);
this.currentItem="T" + this.nextId
this.nextId++; this.nextId++;
}, },
changeContent(val){
var item=this.active;
//console.log("change",val);
if (item.text !== val) {
item.text = val;
item.dirty=true;
}
},
onResize(){ onResize(){
var el=this.$refs["ace"]; var el=this.$refs["ace"];
for (e of el){ for (e of el){
console.log("top",e.offsetTop) //console.log("top",e.offsetTop)
var h=Math.max(1,window.innerHeight - e.offsetTop -200) var h=Math.max(1,window.innerHeight - e.offsetTop -200)
console.log("h",h) // console.log("h",h)
e.style.height=h +"px"; e.style.height=h +"px";
} }
}, },
}, },
watch:{
currentItem: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
computed:{ computed:{
sorted(){ sorted(){
return this.items.slice(0).sort() return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
} }
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{

103
src/vue-poc/static/app-gen.js
View File

@ -1,4 +1,4 @@
// generated 2018-03-18T22:12:38.816Z // generated 2018-03-22T22:55:38.143Z
// 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,13 +468,12 @@ Vue.component('vp-selectpath',{template:`
<v-card-title> <v-card-title>
Add a new tab Add a new tab
</v-card-title> </v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
Content: Content:
<v-tabs icons-and-text="" centered=""> <v-tabs v-model="type" icons-and-text="" centered="">
<v-tab> <v-tab>
Empty Empty
@ -508,16 +507,16 @@ Vue.component('vp-selectpath',{template:`
</v-card> </v-card>
</v-tab-item> </v-tab-item>
</v-tabs> </v-tabs>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Add tab</v-btn> <v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Add tab</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-menu> `, </v-menu>
`,
props: { props: {
frmfav: Boolean frmfav: Boolean
@ -535,7 +534,11 @@ Vue.component('vp-selectpath',{template:`
}, },
favorite(){ favorite(){
this.$emit('selectpath', {type:this.type}) this.$emit('selectpath', {
type:this.type,
name: "doc" + moment().format("YYYY-MM-DDThh:mm:ss") ,
text:"Some text"
})
} }
} }
} }
@ -1141,8 +1144,8 @@ const Files=Vue.extend({template:`
const History=Vue.extend({template:` const History=Vue.extend({template:`
<v-container> <v-container>
<v-card> <v-card>
<vcard-text> <v-card-title>History</v-card-title>
<v-card-title>History</v-card-title> <v-card-text>
<v-list> <v-list>
<v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar=""> <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar="">
<v-list-tile-action> <v-list-tile-action>
@ -1153,7 +1156,7 @@ const History=Vue.extend({template:`
</v-list-tile-content> </v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</vcard-text> </v-card-text>
</v-card> </v-card>
</v-container> </v-container>
`, `,
@ -1494,11 +1497,12 @@ const Edit=Vue.extend({template:`
const Tabs=Vue.extend({template:` const Tabs=Vue.extend({template:`
<div> <div>
<v-toolbar tabs=""> <v-toolbar tabs="">
<v-toolbar-side-icon></v-toolbar-side-icon> <vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }}</v-toolbar-title> <v-toolbar-title>{{ currentItem }} : {{ active &amp;&amp; active.name }}</v-toolbar-title>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath> <v-spacer></v-spacer>
<v-spacer></v-spacer> <v-btn>unused</v-btn>
<v-btn>{{ active &amp;&amp; active.mode }}</v-btn>
<v-btn>{{ active &amp;&amp; active.dirty }}</v-btn>
<v-menu left="" bottom=""> <v-menu left="" bottom="">
<a class="tabs__item" slot="activator"> <a class="tabs__item" slot="activator">
{{ items.length }} {{ items.length }}
@ -1506,18 +1510,18 @@ const Tabs=Vue.extend({template:`
</a> </a>
<v-card> <v-card>
<v-card-actions> <v-card-actions>
<v-select :items="sorted" v-model="a1" label="File" class="input-group--focused" autocomplete="" @change="setItem"></v-select> <v-select :items="sorted" v-model="a1" label="File" class="input-group--focused" item-text="name" item-value="id" autocomplete="" @change="setItem"></v-select>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-menu> </v-menu>
<v-tabs v-model="currentItem" slot="extension"> <v-tabs v-model="currentItem" slot="extension">
<v-tab v-for="item in items" :key="item.id" :href="'#tab-' + 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 style="text-transform: none;">{{ item.name }}</span> <span>{{ item.name }}</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>
@ -1530,11 +1534,11 @@ const Tabs=Vue.extend({template:`
</v-toolbar> </v-toolbar>
<v-tabs-items v-model="currentItem"> <v-tabs-items v-model="currentItem">
<v-tab-item v-for="item in items" :key="item.id" :id="'tab-' + item.id"> <v-tab-item v-for="item in items" :key="item.id" :id="'T' + item.id">
<v-card flat=""> <v-card flat="">
<div style="height:200px" ref="ace" v-resize="onResize"> <div style="height:200px" ref="ace" v-resize="onResize">
<v-flex xs12="" fill-height=""> <v-flex xs12="" fill-height="">
<vue-ace :content="item.text" :mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace> <vue-ace :content="item.text" v-on:change-content="changeContent" :mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
</v-flex> </v-flex>
</div> </div>
</v-card> </v-card>
@ -1548,59 +1552,84 @@ const Tabs=Vue.extend({template:`
showadd: false, showadd: false,
nextId:4, nextId:4,
a1:"", a1:"",
currentItem: null, currentItem: null, //href of current
active: null,
items: [ items: [
{name:"web.txt", id:"1", mode:"text", {name:"web.txt", id:"1", mode:"text", dirty: false,
text:"1 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:"1 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."},
{name:"Shopping.xq", id:"2", mode: "xquery" , {name:"Shopping.xq", id:"2", mode: "xquery" ,dirty: false,
text:"2 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:"2 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."},
{name:"videos.xml", id:"3", mode:"xml", {name:"videos.xml", id:"3", mode:"xml",dirty: false,
text:"2 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:"2 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."},
], ],
wrap: true, wrap: true,
mode: "xquery",
aceSettings: {} aceSettings: {}
} }
}, },
methods:{ methods:{
tabClose(item){ tabClose(item){
alert("close:"+ item.id); if(item.dirty){
alert("save first")
}else{
var index=this.items.indexOf(item);
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;
}
}
}, },
setItem(v){ setItem(v){
//alert(v); this.currentItem="T"+v;
this.currentItem=v;
}, },
addItem(){ addItem(tab){
var tab={name: "AA"+this.nextId, console.log("TABS: ",tab);
var def={name: "AA"+this.nextId,
id: ""+this.nextId, id: ""+this.nextId,
contentType: "text/xml",
mode: "xml", mode: "xml",
text: "New text" +this.nextId text: "New text" +this.nextId
}; };
this.items.push (tab); var etab = Object.assign(def,tab);
this.currentItem="tab-" + this.nextId this.items.push (etab);
this.currentItem="T" + this.nextId
this.nextId++; this.nextId++;
}, },
changeContent(val){
var item=this.active;
//console.log("change",val);
if (item.text !== val) {
item.text = val;
item.dirty=true;
}
},
onResize(){ onResize(){
var el=this.$refs["ace"]; var el=this.$refs["ace"];
for (e of el){ for (e of el){
console.log("top",e.offsetTop) //console.log("top",e.offsetTop)
var h=Math.max(1,window.innerHeight - e.offsetTop -200) var h=Math.max(1,window.innerHeight - e.offsetTop -200)
console.log("h",h) // console.log("h",h)
e.style.height=h +"px"; e.style.height=h +"px";
} }
}, },
}, },
watch:{
currentItem: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
computed:{ computed:{
sorted(){ sorted(){
return this.items.slice(0).sort() return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
} }
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace') settings.getItem('settings/ace')
.then( v =>{ .then( v =>{

8
src/vue-poc/static/app.html
View File

@ -10,7 +10,7 @@
<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.8/dist/vuetify.min.css" rel="stylesheet" type="text/css"/> <link href="//unpkg.com/vuetify@1.0.10/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/dist/vfg-core.css"/> <link rel="stylesheet" href="//unpkg.com/vue-form-generator@2.2.1/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"/>
@ -21,7 +21,7 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<h3><code>vue-poc</code> <small>(v0.3.3)</small> </h3> <h3><code>vue-poc</code> <small>(v0.3.4)</small> </h3>
<div class="spinner"> <div class="spinner">
<div class="rect1"></div> <div class="rect1"></div>
@ -37,7 +37,7 @@
<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.8/dist/vuetify.min.js"></script> <script src="//unpkg.com/vuetify@1.0.10/dist/vuetify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script> <script src="//d3js.org/d3.v4.min.js"></script>
@ -47,9 +47,11 @@
<script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/localforage/1.5.1/localforage.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<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-form-generator@2.2.1/dist/vfg-core.js"></script> <script src="//unpkg.com/vue-form-generator@2.2.1/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>
<script src="//unpkg.com/vue-form-json-schema@1.13.1/dist/vue-form-json-schema.umd.js"></script>
<script src="/vue-poc/ui/svg-pan-zoom.js"></script> <script src="/vue-poc/ui/svg-pan-zoom.js"></script>
<script src="/vue-poc/ui/perf-stat.js"></script> <script src="/vue-poc/ui/perf-stat.js"></script>