tree
This commit is contained in:
parent
4c17e1a1a3
commit
d22e02e6f4
19 changed files with 1121 additions and 627 deletions
|
|
@ -175,8 +175,8 @@
|
||||||
model: false,
|
model: false,
|
||||||
children: [
|
children: [
|
||||||
|
|
||||||
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
|
{href: '/form',text: 'vue-form-generator',icon: 'format_list_bulleted' },
|
||||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' },
|
{href: '/form2',text: 'vue-json-schema',icon: 'format_list_bulleted' },
|
||||||
{href: '/form3',text: 'vue-form-json-schema',icon: 'format_list_bulleted' }
|
{href: '/form3',text: 'vue-form-json-schema',icon: 'format_list_bulleted' }
|
||||||
]},
|
]},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
39
src/vue-poc/components/fullscreen.js
Normal file
39
src/vue-poc/components/fullscreen.js
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
// https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
|
||||||
|
const Fullscreen={
|
||||||
|
isInFullScreen(){
|
||||||
|
return (document.fullscreenElement && document.fullscreenElement !== null) ||
|
||||||
|
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
|
||||||
|
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
|
||||||
|
(document.msFullscreenElement && document.msFullscreenElement !== null);
|
||||||
|
},
|
||||||
|
toggle(){
|
||||||
|
var docElm = document.documentElement;
|
||||||
|
if (!this.isInFullScreen()) {
|
||||||
|
if (docElm.requestFullscreen) {
|
||||||
|
docElm.requestFullscreen();
|
||||||
|
} else if (docElm.mozRequestFullScreen) {
|
||||||
|
docElm.mozRequestFullScreen();
|
||||||
|
} else if (docElm.webkitRequestFullScreen) {
|
||||||
|
docElm.webkitRequestFullScreen();
|
||||||
|
} else if (docElm.msRequestFullscreen) {
|
||||||
|
docElm.msRequestFullscreen();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
install: function(Vue){
|
||||||
|
Object.defineProperty(Vue.prototype, '$fullscreen', {
|
||||||
|
get () { return Fullscreen }
|
||||||
|
}) }
|
||||||
|
};
|
||||||
|
Vue.use(Fullscreen);
|
||||||
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
// Mimetype info
|
// Mimetype info
|
||||||
const MimeTypes={
|
//
|
||||||
toMode:[
|
const MimeTypes=new function(){
|
||||||
|
this.toMode=[
|
||||||
{name: "text/plain", mode: "text"},
|
{name: "text/plain", mode: "text"},
|
||||||
{name: "text/xml", mode: "xml"},
|
{name: "text/xml", mode: "xml"},
|
||||||
{name: "application/xml", mode:"xml"},
|
{name: "application/xml", mode:"xml"},
|
||||||
|
|
@ -12,17 +13,21 @@ const MimeTypes={
|
||||||
{name: "text/css", mode:"css"},
|
{name: "text/css", mode:"css"},
|
||||||
{name: "image/svg+xml", mode:"svg"}
|
{name: "image/svg+xml", mode:"svg"}
|
||||||
],
|
],
|
||||||
mode:{
|
this.formatdom= t=>html_beautify(t, { indent_size: 3 ,indent_inner_html:true});
|
||||||
|
this.formatjs= t=>js_beautify(t, { indent_size: 2 });
|
||||||
|
|
||||||
|
this.mode={
|
||||||
"text": {},
|
"text": {},
|
||||||
"javascript": {
|
"javascript": {
|
||||||
format(t){ return js_beautify(t, { indent_size: 2 })}
|
"format":this.formatjs
|
||||||
},
|
},
|
||||||
"xml": {
|
"xml": {
|
||||||
format(t){ return html_beautify(t, { indent_size: 3 ,indent_inner_html:true})}
|
"format":this.formatdom
|
||||||
},
|
},
|
||||||
"css": {}
|
"css": {}
|
||||||
},
|
};
|
||||||
install(Vue){
|
|
||||||
|
this.install=function(Vue){
|
||||||
Object.defineProperty(Vue.prototype, '$MimeTypes', {
|
Object.defineProperty(Vue.prototype, '$MimeTypes', {
|
||||||
get () { return MimeTypes }
|
get () { return MimeTypes }
|
||||||
}) }
|
}) }
|
||||||
|
|
|
||||||
22
src/vue-poc/components/notification.js
Normal file
22
src/vue-poc/components/notification.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
//Notification Object
|
||||||
|
const Notification={
|
||||||
|
messages:[],
|
||||||
|
nextId: 0,
|
||||||
|
unseen:0,
|
||||||
|
add(msg){
|
||||||
|
var data={
|
||||||
|
text: msg,
|
||||||
|
index: ++this.nextId,
|
||||||
|
created: new Date()
|
||||||
|
};
|
||||||
|
this.messages.unshift(data);
|
||||||
|
this.messages.length = Math.min(this.messages.length, 30);
|
||||||
|
++this.unseen;
|
||||||
|
|
||||||
|
},
|
||||||
|
install(Vue){
|
||||||
|
Object.defineProperty(Vue.prototype, '$notification', {
|
||||||
|
get () { return Notification }
|
||||||
|
}) }
|
||||||
|
};
|
||||||
|
Vue.use(Notification);
|
||||||
|
|
@ -58,28 +58,6 @@ const Auth={
|
||||||
};
|
};
|
||||||
Vue.use(Auth);
|
Vue.use(Auth);
|
||||||
|
|
||||||
//Notification Object
|
|
||||||
const Notification={
|
|
||||||
messages:[],
|
|
||||||
nextId: 0,
|
|
||||||
unseen:0,
|
|
||||||
add(msg){
|
|
||||||
var data={
|
|
||||||
text: msg,
|
|
||||||
index: ++this.nextId,
|
|
||||||
created: new Date()
|
|
||||||
};
|
|
||||||
this.messages.unshift(data);
|
|
||||||
this.messages.length = Math.min(this.messages.length, 30);
|
|
||||||
++this.unseen;
|
|
||||||
|
|
||||||
},
|
|
||||||
install(Vue){
|
|
||||||
Object.defineProperty(Vue.prototype, '$notification', {
|
|
||||||
get () { return Notification }
|
|
||||||
}) }
|
|
||||||
};
|
|
||||||
Vue.use(Notification);
|
|
||||||
|
|
||||||
|
|
||||||
// Settings read and write list clear
|
// Settings read and write list clear
|
||||||
|
|
@ -112,13 +90,25 @@ ut aliquip ex ea commodo consequat.`},
|
||||||
text:`let $a:=1 to 5
|
text:`let $a:=1 to 5
|
||||||
return $a `},
|
return $a `},
|
||||||
|
|
||||||
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "/aaa/bca/",
|
{name:"videos.xml", id:"3", mode:"xml",dirty: false, location: "xmldb:/vue-poc/aaa/bca/videos.xml",
|
||||||
text:`<foo version="1.0">
|
text:`<foo version="1.0">
|
||||||
<node>hello</node>
|
<node>hello</node>
|
||||||
</foo>`}
|
</foo>`}
|
||||||
],
|
],
|
||||||
"edit/currentId": "?",
|
"edit/currentId": "?",
|
||||||
"system/serviceworker": true
|
"system/serviceworker": true,
|
||||||
|
"images/thumbtask":`
|
||||||
|
<thumbnail>
|
||||||
|
<size width="100" height="100"/>
|
||||||
|
<filters>
|
||||||
|
<colorize color="green" alpha=".5"/>
|
||||||
|
<caption position="CENTER">Some Text here</caption>
|
||||||
|
<rotate angle="15"/>
|
||||||
|
<canvas height="500" width="500" position="TOP_LEFT" color="black"/>
|
||||||
|
</filters>
|
||||||
|
<output format="gif"/>
|
||||||
|
</thumbnail>
|
||||||
|
`
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -190,45 +180,6 @@ function debounce(func, wait, immediate) {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
|
|
||||||
const Fullscreen={
|
|
||||||
isInFullScreen(){
|
|
||||||
return (document.fullscreenElement && document.fullscreenElement !== null) ||
|
|
||||||
(document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
|
|
||||||
(document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
|
|
||||||
(document.msFullscreenElement && document.msFullscreenElement !== null);
|
|
||||||
},
|
|
||||||
toggle(){
|
|
||||||
var docElm = document.documentElement;
|
|
||||||
if (!this.isInFullScreen()) {
|
|
||||||
if (docElm.requestFullscreen) {
|
|
||||||
docElm.requestFullscreen();
|
|
||||||
} else if (docElm.mozRequestFullScreen) {
|
|
||||||
docElm.mozRequestFullScreen();
|
|
||||||
} else if (docElm.webkitRequestFullScreen) {
|
|
||||||
docElm.webkitRequestFullScreen();
|
|
||||||
} else if (docElm.msRequestFullscreen) {
|
|
||||||
docElm.msRequestFullscreen();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (document.exitFullscreen) {
|
|
||||||
document.exitFullscreen();
|
|
||||||
} else if (document.webkitExitFullscreen) {
|
|
||||||
document.webkitExitFullscreen();
|
|
||||||
} else if (document.mozCancelFullScreen) {
|
|
||||||
document.mozCancelFullScreen();
|
|
||||||
} else if (document.msExitFullscreen) {
|
|
||||||
document.msExitFullscreen();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
install: function(Vue){
|
|
||||||
Object.defineProperty(Vue.prototype, '$fullscreen', {
|
|
||||||
get () { return Fullscreen }
|
|
||||||
}) }
|
|
||||||
};
|
|
||||||
Vue.use(Fullscreen);
|
|
||||||
|
|
||||||
Vue.component('treeselect', VueTreeselect.Treeselect);
|
Vue.component('treeselect', VueTreeselect.Treeselect);
|
||||||
|
|
||||||
//Vue.use( VueFormJsonSchema);
|
//Vue.use( VueFormJsonSchema);
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,66 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<template id="about">
|
<template id="about">
|
||||||
<v-container>
|
|
||||||
<v-parallax src="/vue-poc/ui/vue-poc.png" >
|
|
||||||
</v-parallax>
|
|
||||||
<v-card>
|
|
||||||
|
|
||||||
<v-card-text>
|
<v-jumbotron color="grey lighten-2">
|
||||||
|
<v-speed-dial v-model="fab" hover right direction="bottom" transition="slide-y-reverse-transition">
|
||||||
|
<v-btn slot="activator" class="blue darken-2" dark fab hover v-model="fab">
|
||||||
|
<v-icon>account_circle</v-icon>
|
||||||
|
<v-icon>close</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn fab dark small class="green" >
|
||||||
|
<v-icon>edit</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn fab dark small class="indigo" >
|
||||||
|
<v-icon>add</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn fab dark small class="red" >
|
||||||
|
<v-icon>delete</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-speed-dial>
|
||||||
|
<v-container fill-height>
|
||||||
|
<v-layout align-center>
|
||||||
|
<v-flex>
|
||||||
|
<h3 class="display-3">Vue-poc
|
||||||
|
|
||||||
<p>
|
</h3>
|
||||||
This is a experiment in using
|
<span class="subheading">A development environment for managing XML sources and processes.</span>
|
||||||
<code>vue.js</code>
|
|
||||||
.
|
<v-divider class="my-3"></v-divider>
|
||||||
</p>
|
|
||||||
|
<div class="title mb-3">Links</div>
|
||||||
|
<v-layout row wrap>
|
||||||
|
<v-flex xs6>
|
||||||
<ul>
|
<ul>
|
||||||
|
<li><a href="https://vuejs.org/"
|
||||||
|
target="new">vue.js</a></li>
|
||||||
<li><a href="https://vuetifyjs.com/vuetify/quick-start"
|
<li><a href="https://vuetifyjs.com/vuetify/quick-start"
|
||||||
target="new">vuetifyjs</a></li>
|
target="new">vuetifyjs</a></li>
|
||||||
<li><a href="https://github.com/monterail/vue-multiselect"
|
|
||||||
target="new">vue-multiselect</a></li>
|
|
||||||
<li><a href="https://github.com/sagalbot/vue-select" target="new"><s>vue-select</s></a></li>
|
|
||||||
<li><a href="https://github.com/beautify-web/js-beautify"
|
<li><a href="https://github.com/beautify-web/js-beautify"
|
||||||
target="new">js-beautify</a></li>
|
target="new">js-beautify</a></li>
|
||||||
|
<li><a href="https://developers.google.com/web/tools/workbox/"
|
||||||
|
target="new">workbox</a></li>
|
||||||
|
</ul>
|
||||||
|
</v-flex>
|
||||||
|
<v-flex xs6>
|
||||||
|
<ul>
|
||||||
<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
|
<li><a href="/doc/#/data/app/vue-poc" target="new">doc</a></li>
|
||||||
<li><a href="/dba" target="new">DBA app</a></li>
|
<li><a href="/dba" target="new">DBA app</a></li>
|
||||||
<li> <router-link to="database?url=%2Fvue-poc%2F">DB</router-link></li>
|
<li> <router-link to="database?url=%2Fvue-poc%2F">DB</router-link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link
|
</v-flex>
|
||||||
href="/dba">REPLACED</qd-link>
|
</v-layout>
|
||||||
</v-card-text>
|
</v-flex>
|
||||||
</v-card>
|
</v-layout>
|
||||||
|
|
||||||
</v-container>
|
</v-container>
|
||||||
|
</v-jumbotron>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>{
|
||||||
{
|
data: function(){
|
||||||
|
return {
|
||||||
|
fab: false
|
||||||
}
|
}
|
||||||
</script>
|
}
|
||||||
|
}</script>
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,18 @@
|
||||||
<v-chip v-text="item.protocol">Example Chip</v-chip>
|
<v-chip v-text="item.protocol">Example Chip</v-chip>
|
||||||
</v-list-tile-action>
|
</v-list-tile-action>
|
||||||
<v-list-tile-content>
|
<v-list-tile-content>
|
||||||
<v-list-tile-title @click="doEdit(item)" v-text="item.url"></v-list-tile-title>
|
<v-list-tile-title v-text="item.url"></v-list-tile-title>
|
||||||
</v-list-tile-content>
|
</v-list-tile-content>
|
||||||
|
<v-list-tile-action>
|
||||||
|
<v-btn @click="doEdit(item)" icon ripple>
|
||||||
|
<v-icon color="grey lighten-1">info</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-list-tile-action>
|
||||||
|
<v-list-tile-action>
|
||||||
|
<v-btn @click="doEdit2(item)" icon ripple>
|
||||||
|
<v-icon color="grey lighten-1">info</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</v-list-tile-action>
|
||||||
</v-list-tile>
|
</v-list-tile>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
@ -37,6 +47,9 @@
|
||||||
doEdit(item){
|
doEdit(item){
|
||||||
console.log("history: ",item)
|
console.log("history: ",item)
|
||||||
router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol }})
|
router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol }})
|
||||||
|
},
|
||||||
|
doEdit2(item){
|
||||||
|
alert("dd")
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created:function(){
|
created:function(){
|
||||||
|
|
|
||||||
101
src/vue-poc/features/components/balisage-taxonomy.xml
Normal file
101
src/vue-poc/features/components/balisage-taxonomy.xml
Normal file
|
|
@ -0,0 +1,101 @@
|
||||||
|
<tax>
|
||||||
|
<item id="Concepts" label="Concepts">
|
||||||
|
<item id="API" label="API"/>
|
||||||
|
<item id="BigData" label="Big Data"/>
|
||||||
|
<item id="ComputationalLinguistics" label="Computational Linguistics"/>
|
||||||
|
<item id="ConcurrentMarkup-Overlap" label="Concurrent Markup/Overlap"/>
|
||||||
|
<item id="ContentManagement" label="Content Management"/>
|
||||||
|
<item id="Datatyping" label="Datatyping"/>
|
||||||
|
<item id="Encryption" label="Encryption"/>
|
||||||
|
<item id="Graphics-Video" label="Graphics/Video"/>
|
||||||
|
<item id="Hypertext" label="Hypertext"/>
|
||||||
|
<item id="InformationArchitecture" label="Information Architecture"/>
|
||||||
|
<item id="InformationRetrieval" label="Information Retrieval"/>
|
||||||
|
<item id="Interoperability" label="Interoperability"/>
|
||||||
|
<item id="KnowledgeManagement" label="Knowledge Management"/>
|
||||||
|
<item id="KnowledgeRepresentation" label="Knowledge Representation"/>
|
||||||
|
<item id="MarkupLanguages" label="Markup Languages"/>
|
||||||
|
<item id="Metadata" label="Metadata"/>
|
||||||
|
<item id="Modeling" label="Modeling"/>
|
||||||
|
<item id="NaturalLanguageProcessing" label="Natural Language Processing"/>
|
||||||
|
<item id="OpenSource" label="Open Source"/>
|
||||||
|
<item id="Programming" label="Programming"/>
|
||||||
|
<item id="Quality" label="Quality"/>
|
||||||
|
<item id="REST" label="REST"/>
|
||||||
|
<item id="SchemaLanguages" label="Schema Languages"/>
|
||||||
|
<item id="SemanticWeb" label="Semantic Web"/>
|
||||||
|
<item id="Semantics" label="Semantics"/>
|
||||||
|
<item id="SocialNetworks" label="Social Networks"/>
|
||||||
|
<item id="Sociology" label="Sociology"/>
|
||||||
|
<item id="Standardization" label="Standardization"/>
|
||||||
|
<item id="TechnologyAdoption" label="Technology Adoption"/>
|
||||||
|
<item id="Transforming" label="Transforming"/>
|
||||||
|
<item id="Trees-Graphs" label="Trees/Graphs"/>
|
||||||
|
<item id="UserExperience" label="User Experience"/>
|
||||||
|
<item id="Versioning" label="Versioning"/>
|
||||||
|
<item id="WebApplications" label="Web Applications"/>
|
||||||
|
<item id="WebComponents" label="Web Components"/>
|
||||||
|
<item id="Workflow" label="Workflow"/>
|
||||||
|
</item>
|
||||||
|
<item id="Specifications" label="Specifications">
|
||||||
|
<item id="CSS" label="CSS"/>
|
||||||
|
<item id="DITA" label="DITA"/>
|
||||||
|
<item id="DOM" label="DOM"/>
|
||||||
|
<item id="EPUB" label="EPUB"/>
|
||||||
|
<item id="HTML5" label="HTML5"/>
|
||||||
|
<item id="IETM" label="IETM"/>
|
||||||
|
<item id="JATS-NLM" label="JATS/NLM"/>
|
||||||
|
<item id="JSON" label="JSON"/>
|
||||||
|
<item id="Java" label="Java"/>
|
||||||
|
<item id="JavaScript" label="JavaScript"/>
|
||||||
|
<item id="LaTeX" label="LaTeX"/>
|
||||||
|
<item id="METS-MODS" label="METS/MODS"/>
|
||||||
|
<item id="MathML" label="MathML"/>
|
||||||
|
<item id="NIEM" label="NIEM"/>
|
||||||
|
<item id="Namespaces" label="Namespaces"/>
|
||||||
|
<item id="OA" label="OA"/>
|
||||||
|
<item id="OCL" label="OCL"/>
|
||||||
|
<item id="PRISMSVS" label="PRISMSVS"/>
|
||||||
|
<item id="RDF" label="RDF"/>
|
||||||
|
<item id="RelaxNG" label="RelaxNG"/>
|
||||||
|
<item id="SAX" label="SAX"/>
|
||||||
|
<item id="SGML" label="SGML"/>
|
||||||
|
<item id="SPARQL" label="SPARQL"/>
|
||||||
|
<item id="STS" label="STS"/>
|
||||||
|
<item id="SVG" label="SVG"/>
|
||||||
|
<item id="Schematron" label="Schematron"/>
|
||||||
|
<item id="TEI" label="TEI"/>
|
||||||
|
<item id="TexMECS" label="TexMECS"/>
|
||||||
|
<item id="TopicMaps" label="Topic Maps"/>
|
||||||
|
<item id="UBL" label="UBL"/>
|
||||||
|
<item id="UML" label="UML"/>
|
||||||
|
<item id="XDM" label="XDM"/>
|
||||||
|
<item id="XForms" label="XForms"/>
|
||||||
|
<item id="XLink" label="XLink"/>
|
||||||
|
<item id="XML" label="XML"/>
|
||||||
|
<item id="XPath" label="XPath"/>
|
||||||
|
<item id="XProc" label="XProc"/>
|
||||||
|
<item id="XQuery" label="XQuery"/>
|
||||||
|
<item id="XSD-W3CSchema" label="XSD/W3C Schema"/>
|
||||||
|
<item id="XSL-FO" label="XSL-FO"/>
|
||||||
|
<item id="XSLT" label="XSLT"/>
|
||||||
|
<item id="XSpec" label="XSpec"/>
|
||||||
|
</item>
|
||||||
|
<item id="Processes" label="Processes">
|
||||||
|
<item id="Archiving" label="Archiving"/>
|
||||||
|
<item id="Editing-Authoring" label="Editing/Authoring"/>
|
||||||
|
<item id="Hardware-basedProcessing" label="Hardware-based Processing"/>
|
||||||
|
<item id="Linking" label="Linking"/>
|
||||||
|
<item id="Mapping" label="Mapping"/>
|
||||||
|
<item id="Messaging" label="Messaging"/>
|
||||||
|
<item id="Parsing" label="Parsing"/>
|
||||||
|
<item id="Publishing" label="Publishing"/>
|
||||||
|
<item id="Querying" label="Querying"/>
|
||||||
|
<item id="Scripting" label="Scripting"/>
|
||||||
|
<item id="Software-basedProcessing" label="Software-based Processing"/>
|
||||||
|
<item id="Streaming" label="Streaming"/>
|
||||||
|
<item id="Transforming" label="Transforming"/>
|
||||||
|
<item id="Validating" label="Validating"/>
|
||||||
|
<item id="Versioning" label="Versioning"/>
|
||||||
|
</item>
|
||||||
|
</tax>
|
||||||
32
src/vue-poc/features/components/components.xqm
Normal file
32
src/vue-poc/features/components/components.xqm
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
module namespace j = 'quodatum.test.components';
|
||||||
|
|
||||||
|
|
||||||
|
declare function j:tax($items){
|
||||||
|
for $a in $items
|
||||||
|
return <_ type="object">
|
||||||
|
<id>{$a/@id/string()}</id>
|
||||||
|
<label>{$a/@label/string()}</label>
|
||||||
|
{if($a/item)then
|
||||||
|
<children type="array">{j:tax($a/item)}</children>
|
||||||
|
else ()}
|
||||||
|
</_>
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(:~
|
||||||
|
: tree
|
||||||
|
:)
|
||||||
|
declare
|
||||||
|
%rest:GET %rest:path("/vue-poc/api/components/tree")
|
||||||
|
%output:method("json")
|
||||||
|
function j:tree()
|
||||||
|
as element(json)
|
||||||
|
{
|
||||||
|
let $d:=doc(resolve-uri("balisage-taxonomy.xml",static-base-uri()))/tax/item
|
||||||
|
return
|
||||||
|
<json type="array">
|
||||||
|
{j:tax($d)}
|
||||||
|
</json>
|
||||||
|
};
|
||||||
|
|
||||||
70
src/vue-poc/features/components/tree2.vue
Normal file
70
src/vue-poc/features/components/tree2.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<template id="tree2">
|
||||||
|
<v-container fluid>
|
||||||
|
<v-card>
|
||||||
|
<v-toolbar class="lime darken-1">
|
||||||
|
<v-card-title ><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.29</qd-link> </v-card-title>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
<v-btn>todo</v-btn>
|
||||||
|
</v-toolbar>
|
||||||
|
<v-card-text>
|
||||||
|
<v-layout row wrap>
|
||||||
|
<v-flex xs4 >
|
||||||
|
Select some things:
|
||||||
|
</v-flex>
|
||||||
|
<v-flex xs4 >
|
||||||
|
<treeselect
|
||||||
|
v-model="value"
|
||||||
|
:multiple="true"
|
||||||
|
:options="source"
|
||||||
|
/>
|
||||||
|
</v-flex>
|
||||||
|
|
||||||
|
<v-flex xs4>
|
||||||
|
<pre>{{ value }}</pre>
|
||||||
|
</v-flex>
|
||||||
|
</v-layout>
|
||||||
|
</v-card-text>
|
||||||
|
|
||||||
|
</v-card>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>{
|
||||||
|
//components: { Treeselect },
|
||||||
|
|
||||||
|
data:function(){
|
||||||
|
return {
|
||||||
|
value: [
|
||||||
|
"DITA",
|
||||||
|
"CSS",
|
||||||
|
"Linking",
|
||||||
|
"Hardware-basedProcessing"
|
||||||
|
],
|
||||||
|
source: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
itemClick (node) {
|
||||||
|
console.log(node.model.text + ' clicked !')
|
||||||
|
},
|
||||||
|
load(){
|
||||||
|
HTTP.get("components/tree")
|
||||||
|
.then(r=>{
|
||||||
|
console.log(r);
|
||||||
|
this.source=r.data
|
||||||
|
})
|
||||||
|
.catch(error=> {
|
||||||
|
console.log(error);
|
||||||
|
|
||||||
|
alert("Get query error"+url)
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created:function(){
|
||||||
|
this.load()
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -18,15 +18,73 @@
|
||||||
</v-menu>
|
</v-menu>
|
||||||
|
|
||||||
<v-menu v-if="active" left transition="v-fade-transition" >
|
<v-menu v-if="active" left transition="v-fade-transition" >
|
||||||
<v-btn icon slot="activator" ><v-icon>lightbulb_outline</v-icon></v-btn>
|
<v-btn icon slot="activator" ><v-icon>subscriptions</v-icon></v-btn>
|
||||||
<v-list dense>
|
<v-list dense>
|
||||||
<v-list-tile v-for="type in $MimeTypes.toMode" :key="type.name">
|
<v-subheader >Actions</v-subheader>
|
||||||
<v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
|
<v-list-tile @click="format()" >
|
||||||
|
<v-list-tile-title >Format</v-list-tile-title>
|
||||||
|
</v-list-tile>
|
||||||
|
<v-list-tile @click="validate()" >
|
||||||
|
<v-list-tile-title >Validate</v-list-tile-title>
|
||||||
</v-list-tile>
|
</v-list-tile>
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<v-tooltip top>
|
||||||
|
<v-chip @click="acecmd('goToNextError')" slot="activator" >
|
||||||
|
<span class="red " >{{annotations && annotations.error}}</span>
|
||||||
|
<span class="yellow ">{{annotations && annotations.warning}}</span>
|
||||||
|
<span class="green ">{{annotations && annotations.info}}</span>
|
||||||
|
|
||||||
|
<v-avatar>
|
||||||
|
<v-icon black >navigate_next</v-icon>
|
||||||
|
</v-avatar>
|
||||||
|
</v-chip>
|
||||||
|
<span>Annotations: Errors,Warning and Info</span>
|
||||||
|
</v-tooltip>
|
||||||
|
|
||||||
|
<v-menu left transition="v-fade-transition">
|
||||||
|
<v-btn :disabled="!active" icon slot="activator" title="display settings">
|
||||||
|
<v-icon>playlist_play</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-list dense>
|
||||||
|
<v-subheader>Display settings</v-subheader>
|
||||||
|
|
||||||
|
<v-list-tile @click="togglefold" avatar >
|
||||||
|
<v-list-tile-avatar>
|
||||||
|
<v-icon >vertical_align_center</v-icon>
|
||||||
|
</v-list-tile-avatar>
|
||||||
|
<v-list-tile-title >Toggle folds</v-list-tile-title>
|
||||||
|
</v-list-tile>
|
||||||
|
|
||||||
|
<v-list-tile @click="wrap=!wrap" avatar >
|
||||||
|
<v-list-tile-avatar>
|
||||||
|
<v-icon >wrap_text</v-icon>
|
||||||
|
</v-list-tile-avatar>
|
||||||
|
<v-list-tile-title >Soft wrap</v-list-tile-title>
|
||||||
|
</v-list-tile>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
<v-subheader>Help</v-subheader>
|
||||||
|
<v-list-tile @click="acecmd('showSettingsMenu')" avatar >
|
||||||
|
<v-list-tile-avatar>
|
||||||
|
<v-icon >settings</v-icon>
|
||||||
|
</v-list-tile-avatar>
|
||||||
|
<v-list-tile-title @click="acecmd('showSettingsMenu')" >Show ACE settings</v-list-tile-title>
|
||||||
|
</v-list-tile>
|
||||||
|
|
||||||
|
<v-list-tile @click="acecmd('showKeyboardShortcuts')" avatar>
|
||||||
|
<v-list-tile-avatar>
|
||||||
|
<v-icon >keyboard</v-icon>
|
||||||
|
</v-list-tile-avatar>
|
||||||
|
<v-list-tile-title @click="acecmd('showKeyboardShortcuts')" >Show ACE keyboard shortcuts</v-list-tile-title>
|
||||||
|
</v-list-tile>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
|
||||||
<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>
|
||||||
<v-icon v-else>mode_edit</v-icon>
|
<v-icon v-else>mode_edit</v-icon>
|
||||||
|
|
@ -59,8 +117,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 }}</span>
|
|
||||||
<span >{{ (item.dirty?"*":"") }}</span>
|
<span >{{ (item.dirty?"*":"") }}</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>
|
||||||
|
|
@ -84,7 +142,7 @@
|
||||||
</v-card-actions>
|
</v-card-actions>
|
||||||
|
|
||||||
<v-card-text v-if="active">
|
<v-card-text v-if="active">
|
||||||
<v-layout row v-for="x in ['name','id','mode','dirty','location']" :key="x">
|
<v-layout row v-for="x in ['name','id','mode','contentType','dirty','location']" :key="x">
|
||||||
<v-flex xs3>
|
<v-flex xs3>
|
||||||
<v-subheader>{{ x}}</v-subheader>
|
<v-subheader>{{ x}}</v-subheader>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
|
|
@ -103,8 +161,8 @@
|
||||||
<v-card v-else>
|
<v-card v-else>
|
||||||
<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" v-on:change-content="changeContent"
|
<vue-ace :content="item.text" v-on:change-content="changeContent" :events="events"
|
||||||
:mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
:mode="item.mode" :wrap="wrap" :settings="aceSettings" v-on:annotation="annotation"></vue-ace>
|
||||||
</v-flex>
|
</v-flex>
|
||||||
</div>
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
|
|
@ -125,7 +183,10 @@
|
||||||
active: null,
|
active: null,
|
||||||
items: [],
|
items: [],
|
||||||
wrap: true,
|
wrap: true,
|
||||||
aceSettings: {}
|
aceSettings: {},
|
||||||
|
events: new Vue({}),
|
||||||
|
annotations: null,
|
||||||
|
folded:false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -154,9 +215,37 @@
|
||||||
setMode(type){
|
setMode(type){
|
||||||
this.active.mode=type.mode
|
this.active.mode=type.mode
|
||||||
},
|
},
|
||||||
|
togglefold(){
|
||||||
|
this.folded=!this.folded
|
||||||
|
this.acecmd(this.folded?"foldall":"unfoldall")
|
||||||
|
},
|
||||||
|
acecmd(cmd){
|
||||||
|
//alert("acecmd: "+cmd)
|
||||||
|
this.events.$emit('eventFired',cmd);
|
||||||
|
},
|
||||||
|
fold(){
|
||||||
|
this.events.$emit('eventFired',"foldall");
|
||||||
|
},
|
||||||
|
|
||||||
lightbulb(d){
|
format(d){
|
||||||
alert("lightbulb TODO: " + d)
|
var d=this.active.mode;
|
||||||
|
var f=this.$MimeTypes.mode[d];
|
||||||
|
var f=f && f.format;
|
||||||
|
if(f){
|
||||||
|
this.active.text=f(this.active.text);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
annotation(counts){
|
||||||
|
this.annotations=counts
|
||||||
|
//console.log("annotations: ",counts)
|
||||||
|
},
|
||||||
|
|
||||||
|
validate(){
|
||||||
|
var d=this.active.mode;
|
||||||
|
var f=this.$MimeTypes.mode[d];
|
||||||
|
var f=f && f.validate;
|
||||||
|
alert("no validate yet");
|
||||||
},
|
},
|
||||||
|
|
||||||
addItem(tab){
|
addItem(tab){
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,24 @@
|
||||||
alert("not yet:"+r);
|
alert("not yet:"+r);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
beforeRouteEnter (to, from, next) {
|
||||||
|
Promise.all([settings.getItem('images/thumbtask')
|
||||||
|
])
|
||||||
|
.then(function(values) {
|
||||||
|
next(vm => {
|
||||||
|
vm.taskxml = values[0];
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
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('images/thumbtask',this.taskxml);
|
||||||
|
next(true);
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<template id="tree2">
|
|
||||||
<v-container fluid>
|
|
||||||
<v-card>
|
|
||||||
<v-toolbar class="lime darken-1">
|
|
||||||
<v-card-title ><qd-link href="https://github.com/riophae/vue-treeselect">vue-treeselect@0.0.28</qd-link> </v-card-title>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
<v-btn>todo</v-btn>
|
|
||||||
</v-toolbar>
|
|
||||||
<v-card-text>
|
|
||||||
<v-layout row wrap>
|
|
||||||
<v-flex xs6 >
|
|
||||||
Select some things
|
|
||||||
</v-flex>
|
|
||||||
<v-flex xs6 >
|
|
||||||
<treeselect
|
|
||||||
v-model="value"
|
|
||||||
:multiple="true"
|
|
||||||
:options="source"
|
|
||||||
/>
|
|
||||||
</v-flex>
|
|
||||||
</v-layout>
|
|
||||||
</v-card-text>
|
|
||||||
</v-card>
|
|
||||||
</v-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>{
|
|
||||||
//components: { Treeselect },
|
|
||||||
|
|
||||||
data:function(){
|
|
||||||
return {
|
|
||||||
value: null,
|
|
||||||
source: [
|
|
||||||
{
|
|
||||||
id: 'node-1',
|
|
||||||
label: 'Node 1',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 'node-1-a',
|
|
||||||
label: 'Node 1-A',
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'node-2',
|
|
||||||
label: 'Node 2',
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
itemClick (node) {
|
|
||||||
console.log(node.model.text + ' clicked !')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -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.18/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
|
<link href="//unpkg.com/vuetify@1.0.19/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/@riophae/vue-treeselect@0.0.29/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,7 +38,7 @@
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js" crossorigin="anonymous"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js" crossorigin="anonymous"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js" crossorigin="anonymous"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js" crossorigin="anonymous"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js" crossorigin="anonymous" ></script>
|
||||||
<script src="//unpkg.com/vuetify@1.0.18/dist/vuetify.min.js" crossorigin="anonymous"></script>
|
<script src="//unpkg.com/vuetify@1.0.19/dist/vuetify.min.js" crossorigin="anonymous"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" crossorigin="anonymous"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ace.js" crossorigin="anonymous"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js" crossorigin="anonymous"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-language_tools.js" crossorigin="anonymous"></script>
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-linking.js" type="text/javascript" charset="utf-8"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.3.3/ext-linking.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js" crossorigin="anonymous"></script>
|
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script src="//unpkg.com/vue-jstree@1.0.11/dist/vue-jstree.js" crossorigin="anonymous"></script>
|
<script src="//unpkg.com/vue-jstree@1.0.11/dist/vue-jstree.js" crossorigin="anonymous"></script>
|
||||||
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.28/dist/vue-treeselect.min.js" crossorigin="anonymous"></script>
|
<script src="//unpkg.com/@riophae/vue-treeselect@0.0.29/dist/vue-treeselect.min.js" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
<script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js" crossorigin="anonymous"></script>
|
<script src="//unpkg.com/vue-form-generator@2.2.2/dist/vfg-core.js" crossorigin="anonymous"></script>
|
||||||
<script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js" crossorigin="anonymous"></script>
|
<script src="//unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js" crossorigin="anonymous"></script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue