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,
|
||||
children: [
|
||||
|
||||
{href: '/form',text: 'Forms',icon: 'format_list_bulleted' },
|
||||
{href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted' },
|
||||
{href: '/form',text: 'vue-form-generator',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' }
|
||||
]},
|
||||
{
|
||||
|
|
|
|||
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
|
||||
const MimeTypes={
|
||||
toMode:[
|
||||
//
|
||||
const MimeTypes=new function(){
|
||||
this.toMode=[
|
||||
{name: "text/plain", mode: "text"},
|
||||
{name: "text/xml", mode: "xml"},
|
||||
{name: "application/xml", mode:"xml"},
|
||||
|
|
@ -12,17 +13,21 @@ const MimeTypes={
|
|||
{name: "text/css", mode:"css"},
|
||||
{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": {},
|
||||
"javascript": {
|
||||
format(t){ return js_beautify(t, { indent_size: 2 })}
|
||||
"format":this.formatjs
|
||||
},
|
||||
"xml": {
|
||||
format(t){ return html_beautify(t, { indent_size: 3 ,indent_inner_html:true})}
|
||||
"xml": {
|
||||
"format":this.formatdom
|
||||
},
|
||||
"css": {}
|
||||
},
|
||||
install(Vue){
|
||||
};
|
||||
|
||||
this.install=function(Vue){
|
||||
Object.defineProperty(Vue.prototype, '$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);
|
||||
|
||||
//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
|
||||
|
|
@ -112,13 +90,25 @@ ut aliquip ex ea commodo consequat.`},
|
|||
text:`let $a:=1 to 5
|
||||
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">
|
||||
<node>hello</node>
|
||||
</foo>`}
|
||||
],
|
||||
"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.use( VueFormJsonSchema);
|
||||
|
|
|
|||
|
|
@ -1,36 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<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
|
||||
|
||||
</h3>
|
||||
<span class="subheading">A development environment for managing XML sources and processes.</span>
|
||||
|
||||
<v-divider class="my-3"></v-divider>
|
||||
|
||||
<div class="title mb-3">Links</div>
|
||||
<v-layout row wrap>
|
||||
<v-flex xs6>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org/"
|
||||
target="new">vue.js</a></li>
|
||||
<li><a href="https://vuetifyjs.com/vuetify/quick-start"
|
||||
target="new">vuetifyjs</a></li>
|
||||
|
||||
<li><a href="https://github.com/beautify-web/js-beautify"
|
||||
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="/dba" target="new">DBA app</a></li>
|
||||
<li> <router-link to="database?url=%2Fvue-poc%2F">DB</router-link></li>
|
||||
</ul>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<p>
|
||||
This is a experiment in using
|
||||
<code>vue.js</code>
|
||||
.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://vuetifyjs.com/vuetify/quick-start"
|
||||
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"
|
||||
target="new">js-beautify</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> <router-link to="database?url=%2Fvue-poc%2F">DB</router-link></li>
|
||||
</ul>
|
||||
</v-flex> <v-btn floating="floating"> <v-icon>add</v-icon> </v-btn> <qd-link
|
||||
href="/dba">REPLACED</qd-link>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-jumbotron>
|
||||
|
||||
</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-list-tile-action>
|
||||
<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-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>
|
||||
</v-card-text>
|
||||
|
|
@ -37,6 +47,9 @@
|
|||
doEdit(item){
|
||||
console.log("history: ",item)
|
||||
router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol }})
|
||||
},
|
||||
doEdit2(item){
|
||||
alert("dd")
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<template id="tabs">
|
||||
<div>
|
||||
<div>
|
||||
<v-toolbar tabs dense>
|
||||
<v-toolbar-items>
|
||||
<vp-selectpath :frmfav.sync="showadd" @selectpath="addItem"> <v-icon>add_circle</v-icon></vp-selectpath>
|
||||
|
|
@ -18,15 +18,73 @@
|
|||
</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-btn icon slot="activator" ><v-icon>subscriptions</v-icon></v-btn>
|
||||
<v-list dense>
|
||||
<v-list-tile v-for="type in $MimeTypes.toMode" :key="type.name">
|
||||
<v-list-tile-title v-text="type.name" @click="setMode(type)"></v-list-tile-title>
|
||||
</v-list-tile>
|
||||
<v-subheader >Actions</v-subheader>
|
||||
<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>
|
||||
</v-menu>
|
||||
|
||||
|
||||
<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-icon v-if="showInfo">info</v-icon>
|
||||
<v-icon v-else>mode_edit</v-icon>
|
||||
|
|
@ -59,8 +117,8 @@
|
|||
<v-avatar >
|
||||
<v-icon size="16px">insert_drive_file</v-icon>
|
||||
</v-avatar>
|
||||
<span >{{ item.name }}</span>
|
||||
<span >{{ (item.dirty?"*":"") }}</span>
|
||||
<span >{{ item.name }}</span>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn icon @click.stop="tabClose(item)">
|
||||
<v-icon size="16px">close</v-icon>
|
||||
|
|
@ -84,7 +142,7 @@
|
|||
</v-card-actions>
|
||||
|
||||
<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-subheader>{{ x}}</v-subheader>
|
||||
</v-flex>
|
||||
|
|
@ -103,8 +161,8 @@
|
|||
<v-card v-else>
|
||||
<div style="height:200px" ref="ace" v-resize="onResize" >
|
||||
<v-flex xs12 fill-height >
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent"
|
||||
:mode="item.mode" :wrap="wrap" :settings="aceSettings"></vue-ace>
|
||||
<vue-ace :content="item.text" v-on:change-content="changeContent" :events="events"
|
||||
:mode="item.mode" :wrap="wrap" :settings="aceSettings" v-on:annotation="annotation"></vue-ace>
|
||||
</v-flex>
|
||||
</div>
|
||||
</v-card>
|
||||
|
|
@ -125,7 +183,10 @@
|
|||
active: null,
|
||||
items: [],
|
||||
wrap: true,
|
||||
aceSettings: {}
|
||||
aceSettings: {},
|
||||
events: new Vue({}),
|
||||
annotations: null,
|
||||
folded:false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -154,9 +215,37 @@
|
|||
setMode(type){
|
||||
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){
|
||||
alert("lightbulb TODO: " + d)
|
||||
format(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){
|
||||
|
|
|
|||
|
|
@ -73,7 +73,24 @@
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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/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.18/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 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.29/dist/vue-treeselect.min.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/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/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="//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/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>
|
||||
|
|
@ -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="//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-json-schema@1.1.0/dist/vue-json-schema.js" crossorigin="anonymous"></script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue