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

tabs

Browse source
This commit is contained in:
Andy Bunce 2018-04-10 23:09:32 +01:00
parent e8f05314ba
commit 4ab14f41bb
11 changed files with 269 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/vue-poc/app.vue
View file

@ -188,7 +188,8 @@
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/svg',text: 'SVG',icon: 'extension'}
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/tree',text: 'Tree',icon: 'nature'}
]},
{href: '/settings',text: 'Settings',icon: 'settings' },

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

@ -21,10 +21,11 @@ display button that invokes a select path form
</v-btn>
<v-card >
<v-toolbar >
<v-card-title>
Add a new tab
</v-card-title>
<v-card-title>
Add a new tab {{type}}
</v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click.stop="set(false)">Cancel</v-btn>
</v-toolbar>
<v-card-text>
@ -92,6 +93,7 @@ display button that invokes a select path form
favorite(){
this.$emit('selectpath', {
type:this.type,
uri: this.xmldb,
name: "doc" + moment().format("YYYY-MM-DDThh:mm:ss") ,
text:"Some text"
})

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

@ -3,22 +3,25 @@
<div>
<v-toolbar tabs>
<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-toolbar-title>{{ currentItem }} : {{ active && active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
<v-btn @click="showInfo = !showInfo" icon><v-icon>info</v-icon></v-btn>
<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 :close-on-content-click="false" >
<a class="tabs__item" slot="activator">
{{ items.length }}
<v-icon>arrow_drop_down</v-icon>
</a>
<v-card>
<v-card-title>Select Tab</v-card-title>
<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"
clearable open-on-clear
></v-select>
</v-card-actions>
</v-card>
@ -35,7 +38,7 @@
<v-avatar >
<v-icon size="16px">insert_drive_file</v-icon>
</v-avatar>
<span >{{ item.name }}</span>
<span >{{ item.name + (item.dirty?"*":"") }}</span>
<v-spacer></v-spacer>
<v-btn icon @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -46,8 +49,9 @@
</v-toolbar>
<v-tabs-items v-model="currentItem">
<qd-panel :show="showInfo">
<v-tabs-items slot="body" v-model="currentItem">
<v-tab-item
v-for="item in items"
:key="item.id"
@ -63,6 +67,15 @@
</v-card>
</v-tab-item>
</v-tabs-items>
<v-card slot="aside" flat>
<v-card-actions >
<v-toolbar-title >test</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat icon @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-card-actions>
<v-card-text> blah blah protocol: </v-card-text>
</v-card>
</qd-panel>
</div>
</template>
@ -70,6 +83,7 @@
data () {
return {
showadd: false,
showInfo: false,
nextId:4,
a1:"",
currentItem: null, //href of current
@ -104,7 +118,7 @@
}
},
setItem(v){
this.currentItem="T"+v;
if(v) this.currentItem="T"+v;
},
addItem(tab){
@ -147,6 +161,9 @@
computed:{
sorted(){
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
},
dirty(){
return this.active && this.active.dirty
}
},

5
src/vue-poc/features/select.vue
View file

@ -11,8 +11,8 @@
</v-toolbar>
<qd-panel :show="showInfo">
<v-flex slot="body">
<v-layout>
<v-layout slot="body">
<v-flex xs6>
<p>some text</p>
@ -53,7 +53,6 @@
<pre>{{$data.value2 }}</pre>
</v-flex>
</v-layout>
</v-flex>
<v-card slot="aside" flat>
<v-card-actions >

3
src/vue-poc/features/tasks/rxq-tasks.xqm
View file

@ -16,7 +16,8 @@ function vue-rest:tasks()
return <json type="array">{
$tasks!<_ type="object">
<to>{ @name/string() }</to>
<text>{ title/text() }</text>
<title>{ title/text() }</title>
<description>{ fn:serialize(description/node()) }</description>
</_>
}</json>
};

12
src/vue-poc/features/tasks/taskdef.xml
View file

@ -1,10 +1,8 @@
<tasks>
<task name="tasks/model">
<title>
Generate
<code>model.gen.xqm</code>
</title>
<description></description>
<title>Generate model.gen.xqm</title>
<description> Generate
<code>model.gen.xqm</code></description>
<params>
<param name="efolder">Folder containing model definitions as xml</param>
<param name="target">Path to xqm file to generate</param>
@ -18,7 +16,7 @@
<task name="tasks/xqdoc">
<title>XQdoc</title>
<description>Generate XQdoc as html</description>
<description>Generate XQdoc to db</description>
</task>
<task name="tasks/xqdocdb">
@ -28,10 +26,12 @@
<task name="tasks/vuecompile">
<title>vue compile</title>
<description>compile</description>
</task>
<task name="tasks/newapp">
<title>application template</title>
<description>application template</description>
<params>
<param name="appname">Name for new application</param>
</params>

5
src/vue-poc/features/tasks/tasks.vue
View file

@ -2,10 +2,11 @@
<template id="task">
<v-container fluid>
<h3>Available Tasks</h3>
<v-progress-linear v-if="loading" v-bind:indeterminate="true" height="2"></v-progress-linear>
<v-progress-linear v-if="loading" v-bind:indeterminate="true" ></v-progress-linear>
<ul>
<li v-for="task in tasks" :key="task.to">
<router-link :to="task.to" v-text="task.text"></router-link>
<router-link :to="task.to" v-text="task.title"></router-link>
<div v-html="task.description"></div>
</li>
</ul>
</v-container>

10
src/vue-poc/features/tasks/xqdoc/rxq-xqdoc.xqm
View file

@ -6,6 +6,7 @@ import module namespace xqd = 'quodatum:build.xqdoc' at "../../../lib/xqdoc/xqdo
import module namespace fw="quodatum:file.walker";
declare namespace c="http://www.w3.org/ns/xproc-step";
declare variable $vue-api:state as element(state):=db:open("vue-poc","/state.xml")/state;
(:~
: run xqdoc task.
@ -22,6 +23,13 @@ function vue-api:model($efolder ,$target )
let $project:=tokenize($efolder,"[/\\]")[last()]=>trace("DDD")
let $files:= fw:directory-list($efolder,map{"include-filter":".*\.xqm"})
let $op:=xqd:save-xq($files,$target,map{"project":$project})
return db:output(<json type="object"><msg> {$target}, {count($files//c:file)} files processed.</msg></json>)
let $result:=<json type="object">
<msg> {$target}, {count($files//c:file)} files processed.</msg>
<id>{$vue-api:state/last-id/string()}</id>
</json>
return (
db:output($result),
replace value of node $vue-api:state/last-id with 1+$vue-api:state/last-id
)
};

121
src/vue-poc/features/tree.vue
View file

@ -1,47 +1,100 @@
<!DOCTYPE html>
<template id="tree">
<v-container fluid>
TREE
<div id="canvasqPWKOg" class="canvas"></div>
<button id="resetButtonqPWKOg">Reset</button>
<div>
<svg width="500" height="300"></svg>
<br>
<input
type="range"
v-model="circleSize"
min="1"
max="100"
step="1"
>
</div>
<v-card>
<v-toolbar class="lime darken-1">
<v-card-title ><qd-link href="https://github.com/zdy1988/vue-jstree">vue-jstree@1.0.11</qd-link> </v-card-title>
<v-spacer></v-spacer>
<v-btn>todo</v-btn>
</v-toolbar>
<v-card-text>
<v-jstree :data="data" show-checkbox multiple allow-batch whole-row @item-click="itemClick"></v-jstree>
</v-card-text>
</v-card>
</v-container>
</template>
<script>{
data: function(){
data:function(){
return {
message: 'bad route!',
circleSize: 50
}
},
created:function(){
console.log("notfound",this.$route.query.q)
},
mounted: function(createElement) {
var svg = d3.select(this.$el).select('svg');
this.circle = svg
.append('circle')
.attr('cx', '250')
.attr('cy', '150')
.attr('r', this.circleSize)
},
watch: {
circleSize: function(newValue) {
this.circle
.attr('r', newValue)
data: [
{
"text": "Same but with checkboxes",
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "Same but with checkboxes",
"opened": true,
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "And wholerow selection"
}
]
}
},
methods: {
itemClick (node) {
console.log(node.model.text + ' clicked !')
}
}
}
</script>

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

@ -1,4 +1,4 @@
// generated 2018-03-28T21:33:37.464+01:00
// generated 2018-04-09T23:17:40.773+01:00
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
Vue.component('qd-confirm',{template:`
@ -465,10 +465,11 @@ Vue.component('vp-selectpath',{template:`
</v-btn>
<v-card>
<v-toolbar>
<v-card-title>
Add a new tab
</v-card-title>
<v-card-title>
Add a new tab {{type}}
</v-card-title>
<v-spacer></v-spacer>
<v-btn color="primary" flat="" @click.stop="set(false)">Cancel</v-btn>
</v-toolbar>
<v-card-text>
@ -536,6 +537,7 @@ Vue.component('vp-selectpath',{template:`
favorite(){
this.$emit('selectpath', {
type:this.type,
uri: this.xmldb,
name: "doc" + moment().format("YYYY-MM-DDThh:mm:ss") ,
text:"Some text"
})
@ -1498,19 +1500,21 @@ const Tabs=Vue.extend({template:`
<div>
<v-toolbar tabs="">
<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-toolbar-title>{{ currentItem }} : {{ active &amp;&amp; active.name }}{{ dirty?'*':'' }}</v-toolbar-title>
<v-btn @click="showInfo = !showInfo" icon=""><v-icon>info</v-icon></v-btn>
<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="" :close-on-content-click="false">
<a class="tabs__item" slot="activator">
{{ items.length }}
<v-icon>arrow_drop_down</v-icon>
</a>
<v-card>
<v-card-title>Select Tab</v-card-title>
<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-select :items="sorted" v-model="a1" label="File" class="input-group--focused" item-text="name" item-value="id" autocomplete="" @change="setItem" clearable="" open-on-clear=""></v-select>
</v-card-actions>
</v-card>
</v-menu>
@ -1521,7 +1525,7 @@ const Tabs=Vue.extend({template:`
<v-avatar>
<v-icon size="16px">insert_drive_file</v-icon>
</v-avatar>
<span>{{ item.name }}</span>
<span>{{ item.name + (item.dirty?"*":"") }}</span>
<v-spacer></v-spacer>
<v-btn icon="" @click.stop="tabClose(item)">
<v-icon size="16px">close</v-icon>
@ -1532,8 +1536,9 @@ const Tabs=Vue.extend({template:`
</v-toolbar>
<v-tabs-items v-model="currentItem">
<qd-panel :show="showInfo">
<v-tabs-items slot="body" v-model="currentItem">
<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">
@ -1544,12 +1549,22 @@ const Tabs=Vue.extend({template:`
</v-card>
</v-tab-item>
</v-tabs-items>
<v-card slot="aside" flat="">
<v-card-actions>
<v-toolbar-title>test</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat="" icon="" @click="showInfo = false"><v-icon>highlight_off</v-icon></v-btn>
</v-card-actions>
<v-card-text> blah blah protocol: </v-card-text>
</v-card>
</qd-panel>
</div>
`,
data () {
return {
showadd: false,
showInfo: false,
nextId:4,
a1:"",
currentItem: null, //href of current
@ -1584,7 +1599,7 @@ const Tabs=Vue.extend({template:`
}
},
setItem(v){
this.currentItem="T"+v;
if(v) this.currentItem="T"+v;
},
addItem(tab){
@ -1627,6 +1642,9 @@ const Tabs=Vue.extend({template:`
computed:{
sorted(){
return this.items.slice(0).sort((a,b) => a.name.localeCompare(b.name)) ;
},
dirty(){
return this.active && this.active.dirty
}
},
@ -3642,8 +3660,8 @@ const Select=Vue.extend({template:`
</v-toolbar>
<qd-panel :show="showInfo">
<v-flex slot="body">
<v-layout>
<v-layout slot="body">
<v-flex xs6="">
<p>some text</p>
@ -3662,7 +3680,6 @@ const Select=Vue.extend({template:`
<pre>{{$data.value2 }}</pre>
</v-flex>
</v-layout>
</v-flex>
<v-card slot="aside" flat="">
<v-card-actions>
@ -4168,7 +4185,8 @@ const Task=Vue.extend({template:`
<v-progress-linear v-if="loading" v-bind:indeterminate="true" height="2"></v-progress-linear>
<ul>
<li v-for="task in tasks" :key="task.to">
<router-link :to="task.to" v-text="task.text"></router-link>
<router-link :to="task.to" v-text="task.title"></router-link>
<div v-html="task.description"></div>
</li>
</ul>
</v-container>
@ -4486,40 +4504,99 @@ created(){
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/tree.vue
const Tree=Vue.extend({template:`
<v-container fluid="">
TREE
<div id="canvasqPWKOg" class="canvas"></div>
<button id="resetButtonqPWKOg">Reset</button>
<div>
<svg width="500" height="300"></svg>
<br>
<input type="range" v-model="circleSize" min="1" max="100" step="1">
</div>
<v-card>
<v-toolbar class="lime darken-1">
<v-card-title><qd-link href="https://github.com/zdy1988/vue-jstree">vue-jstree@1.0.11</qd-link> </v-card-title>
<v-spacer></v-spacer>
<v-btn>todo</v-btn>
</v-toolbar>
<v-card-text>
<v-jstree :data="data" show-checkbox="" multiple="" allow-batch="" whole-row="" @item-click="itemClick"></v-jstree>
</v-card-text>
</v-card>
</v-container>
`,
data: function(){
data:function(){
return {
message: 'bad route!',
circleSize: 50
}
},
created:function(){
console.log("notfound",this.$route.query.q)
},
mounted: function(createElement) {
var svg = d3.select(this.$el).select('svg');
this.circle = svg
.append('circle')
.attr('cx', '250')
.attr('cy', '150')
.attr('r', this.circleSize)
},
watch: {
circleSize: function(newValue) {
this.circle
.attr('r', newValue)
data: [
{
"text": "Same but with checkboxes",
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "Same but with checkboxes",
"opened": true,
"children": [
{
"text": "initially selected",
"selected": true
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-danger"
},
{
"text": "initially open",
"icon": "fa fa-folder icon-state-default",
"opened": true,
"children": [
{
"text": "Another node"
}
]
},
{
"text": "custom icon",
"icon": "fa fa-warning icon-state-warning"
},
{
"text": "disabled node",
"icon": "fa fa-check icon-state-success",
"disabled": true
}
]
},
{
"text": "And wholerow selection"
}
]
}
},
methods: {
itemClick (node) {
console.log(node.model.text + ' clicked !')
}
}
}
@ -5108,7 +5185,8 @@ const Vuepoc=Vue.extend({template:`
{href: '/timeline',text: 'Time line',icon: 'timelapse'},
{href: '/select',text: 'Select',icon: 'extension'},
{href: '/puzzle',text: 'Puzzle',icon: 'extension'},
{href: '/svg',text: 'SVG',icon: 'extension'}
{href: '/svg',text: 'SVG',icon: 'extension'},
{href: '/tree',text: 'Tree',icon: 'nature'}
]},
{href: '/settings',text: 'Settings',icon: 'settings' },

4
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.11/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
<link href="//unpkg.com/vuetify@1.0.13/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"/>
@ -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.11/dist/vuetify.min.js"></script>
<script src="//unpkg.com/vuetify@1.0.13/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>