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

tab edit

Browse source
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>
<!--
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">
<v-menu :close-on-click="false"
@ -20,13 +24,12 @@ display button that invokes a select path form
<v-card-title>
Add a new tab
</v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
</v-toolbar>
<v-card-text>
Content:
<v-tabs icons-and-text centered >
<v-tabs v-model="type" icons-and-text centered >
<v-tab >
Empty
@ -60,16 +63,16 @@ display button that invokes a select path form
</v-card>
</v-tab-item>
</v-tabs>
</v-card-text>
<v-card-actions>
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="favorite(); set(false)">Add tab</v-btn>
</v-card-actions>
</v-card>
</v-menu></template>
</v-menu>
</template>
<script>{
props: {
frmfav: Boolean
@ -87,7 +90,11 @@ display button that invokes a select path form
},
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>

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

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

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

@ -2,11 +2,12 @@
<template id="tabs">
<div>
<v-toolbar tabs>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>{{ currentItem }}</v-toolbar-title>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-spacer></v-spacer>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }} : {{ active && active.name }}</v-toolbar-title>
<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 >
<a class="tabs__item" slot="activator">
{{ items.length }}
@ -16,6 +17,7 @@
<v-card-actions>
<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>
@ -27,13 +29,13 @@
<v-tab
v-for="item in items"
:key="item.id"
:href="'#tab-' + item.id" ripple
: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 style="text-transform: none;">{{ item.name }}</span>
<span >{{ item.name }}</span>
<v-spacer></v-spacer>
<v-btn icon @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -49,12 +51,13 @@
<v-tab-item
v-for="item in items"
:key="item.id"
:id="'tab-' + item.id"
:id="'T' + item.id"
>
<v-card flat >
<div style="height:200px" ref="ace" v-resize="onResize" >
<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>
</div>
</v-card>
@ -69,59 +72,84 @@
showadd: false,
nextId:4,
a1:"",
currentItem: null,
currentItem: null, //href of current
active: null,
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."},
{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."},
{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."},
],
wrap: true,
mode: "xquery",
aceSettings: {}
}
},
methods:{
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){
//alert(v);
this.currentItem=v;
this.currentItem="T"+v;
},
addItem(){
var tab={name: "AA"+this.nextId,
addItem(tab){
console.log("TABS: ",tab);
var def={name: "AA"+this.nextId,
id: ""+this.nextId,
contentType: "text/xml",
mode: "xml",
text: "New text" +this.nextId
};
this.items.push (tab);
this.currentItem="tab-" + this.nextId
var etab = Object.assign(def,tab);
this.items.push (etab);
this.currentItem="T" + 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(){
var el=this.$refs["ace"];
for (e of el){
console.log("top",e.offsetTop)
//console.log("top",e.offsetTop)
var h=Math.max(1,window.innerHeight - e.offsetTop -200)
console.log("h",h)
// console.log("h",h)
e.style.height=h +"px";
}
},
},
watch:{
currentItem: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
computed:{
sorted(){
return this.items.slice(0).sort()
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
}
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.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
Vue.component('qd-confirm',{template:`
@ -468,13 +468,12 @@ Vue.component('vp-selectpath',{template:`
<v-card-title>
Add a new tab
</v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
</v-toolbar>
<v-card-text>
Content:
<v-tabs icons-and-text="" centered="">
<v-tabs v-model="type" icons-and-text="" centered="">
<v-tab>
Empty
@ -508,16 +507,16 @@ Vue.component('vp-selectpath',{template:`
</v-card>
</v-tab-item>
</v-tabs>
</v-card-text>
<v-card-actions>
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
<v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="favorite(); set(false)">Add tab</v-btn>
</v-card-actions>
</v-card>
</v-menu> `,
</v-menu>
`,
props: {
frmfav: Boolean
@ -535,7 +534,11 @@ Vue.component('vp-selectpath',{template:`
},
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:`
<v-container>
<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-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar="">
<v-list-tile-action>
@ -1153,7 +1156,7 @@ const History=Vue.extend({template:`
</v-list-tile-content>
</v-list-tile>
</v-list>
</vcard-text>
</v-card-text>
</v-card>
</v-container>
`,
@ -1494,11 +1497,12 @@ const Edit=Vue.extend({template:`
const Tabs=Vue.extend({template:`
<div>
<v-toolbar tabs="">
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>{{ currentItem }}</v-toolbar-title>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-spacer></v-spacer>
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
<v-toolbar-title>{{ currentItem }} : {{ active &amp;&amp; active.name }}</v-toolbar-title>
<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="">
<a class="tabs__item" slot="activator">
{{ items.length }}
@ -1506,18 +1510,18 @@ const Tabs=Vue.extend({template:`
</a>
<v-card>
<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>
</v-menu>
<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-icon size="16px">insert_drive_file</v-icon>
</v-avatar>
<span style="text-transform: none;">{{ item.name }}</span>
<span>{{ item.name }}</span>
<v-spacer></v-spacer>
<v-btn icon="" @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -1530,11 +1534,11 @@ const Tabs=Vue.extend({template:`
</v-toolbar>
<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="">
<div style="height:200px" ref="ace" v-resize="onResize">
<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>
</div>
</v-card>
@ -1548,59 +1552,84 @@ const Tabs=Vue.extend({template:`
showadd: false,
nextId:4,
a1:"",
currentItem: null,
currentItem: null, //href of current
active: null,
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."},
{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."},
{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."},
],
wrap: true,
mode: "xquery",
aceSettings: {}
}
},
methods:{
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){
//alert(v);
this.currentItem=v;
this.currentItem="T"+v;
},
addItem(){
var tab={name: "AA"+this.nextId,
addItem(tab){
console.log("TABS: ",tab);
var def={name: "AA"+this.nextId,
id: ""+this.nextId,
contentType: "text/xml",
mode: "xml",
text: "New text" +this.nextId
};
this.items.push (tab);
this.currentItem="tab-" + this.nextId
var etab = Object.assign(def,tab);
this.items.push (etab);
this.currentItem="T" + 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(){
var el=this.$refs["ace"];
for (e of el){
console.log("top",e.offsetTop)
//console.log("top",e.offsetTop)
var h=Math.max(1,window.innerHeight - e.offsetTop -200)
console.log("h",h)
// console.log("h",h)
e.style.height=h +"px";
}
},
},
watch:{
currentItem: function (val) {
this.active = this.items.find(e=> val=="T"+e.id)
}
},
computed:{
sorted(){
return this.items.slice(0).sort()
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
}
},
beforeRouteEnter (to, from, next) {
settings.getItem('settings/ace')
.then( v =>{

10
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/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.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 href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
@ -21,7 +21,7 @@
</head>
<body>
<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="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/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.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/ext-language_tools.js"></script>
<script src="//d3js.org/d3.v4.min.js"></script>
@ -47,10 +47,12 @@
<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/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-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/perf-stat.js"></script>
<script src="/vue-poc/ui/app-gen.js"></script>