fix v-col
This commit is contained in:
parent
9d2378c04e
commit
40a9afb8b5
6 changed files with 67 additions and 736 deletions
BIN
src/vue-poc/data/vue-poc/shaks200.zip
Normal file
BIN
src/vue-poc/data/vue-poc/shaks200.zip
Normal file
Binary file not shown.
|
|
@ -1,5 +1,14 @@
|
||||||
<package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
|
<package xmlns="http://expath.org/ns/pkg" name="http://expkg-zone58.github.io/ex-dotml"
|
||||||
abbrev="vue-poc" version="0.0.1" spec="1.0">
|
abbrev="vue-poc" version="0.0.1" spec="1.0">
|
||||||
<title>vue-poc test of vue.js.</title>
|
<title>vue-poc test of vue.js.</title>
|
||||||
|
<dependency name="ace" version="1.2.6" />
|
||||||
|
<dependency name="vuetify" version="0.12.0" />
|
||||||
|
<dependency name="vue" version="2.3.3" />
|
||||||
|
<dependency name="vue-router" version="2.5.3" />
|
||||||
|
<dependency name="google-material" version="0.0.0" />
|
||||||
|
<dependency name="js-beautify" version="1.6.12" />
|
||||||
|
<dependency name="axios" version="0.16.1" />
|
||||||
|
<dependency name="qs" version="6.4.0" />
|
||||||
|
<dependency name="vue-multiselect" version="2.0.0-beta.14" />
|
||||||
|
<dependency name="lodash" version="4.13.1" />
|
||||||
</package>
|
</package>
|
||||||
|
|
|
||||||
54
src/vue-poc/logo.svg
Normal file
54
src/vue-poc/logo.svg
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
viewBox="0 0 400 400"
|
||||||
|
height="400"
|
||||||
|
width="400"
|
||||||
|
xml:space="preserve"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
sodipodi:docname="Vue.js_Logo.svg"
|
||||||
|
inkscape:version="0.92.0 r15299"><sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1366"
|
||||||
|
inkscape:window-height="715"
|
||||||
|
id="namedview10"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.59"
|
||||||
|
inkscape:cx="200"
|
||||||
|
inkscape:cy="200"
|
||||||
|
inkscape:window-x="-8"
|
||||||
|
inkscape:window-y="-8"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg2" /><metadata
|
||||||
|
id="metadata8"><rdf:RDF><cc:Work
|
||||||
|
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||||
|
id="defs6" /><g
|
||||||
|
transform="matrix(0,-1.3333333,-1.3333333,0,407.19159,407.19133)"
|
||||||
|
id="g10"><g
|
||||||
|
transform="translate(178.0626,235.0086)"
|
||||||
|
id="g12"><path
|
||||||
|
id="path14"
|
||||||
|
style="fill:#4dba87;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
d="M 0,0 -22.669,-39.264 -45.338,0 h -75.491 L -22.669,-170.017 75.491,0 Z"
|
||||||
|
inkscape:connector-curvature="0" /></g><g
|
||||||
|
transform="translate(178.0626,235.0086)"
|
||||||
|
id="g16"><path
|
||||||
|
id="path18"
|
||||||
|
style="fill:#435466;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||||
|
d="M 0,0 -22.669,-39.264 -45.338,0 H -81.565 L -22.669,-102.01 36.227,0 Z"
|
||||||
|
inkscape:connector-curvature="0" /></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -1,319 +0,0 @@
|
||||||
const Home = Vue.extend({ template: '#home'});
|
|
||||||
|
|
||||||
const Options = Vue.extend({
|
|
||||||
template: '#heart',
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
snackbar:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Select = Vue.extend({
|
|
||||||
template: '#select',
|
|
||||||
components: { multiselect: VueMultiselect.Multiselect},
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
value: null,
|
|
||||||
value2: null,
|
|
||||||
options: [],
|
|
||||||
isLoading: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
this.asyncFind("")
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
asyncFind: function(query){
|
|
||||||
this.isLoading = true
|
|
||||||
that=this;
|
|
||||||
HTTP.get("test-select?q="+query,axios_json)
|
|
||||||
.then(function(r){
|
|
||||||
that.isLoading = false
|
|
||||||
that.options=r.data.items;
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
this.isLoading = false
|
|
||||||
alert("Get query error")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const People = Vue.extend({
|
|
||||||
template: '#people',
|
|
||||||
data: function(){
|
|
||||||
return {message: 'Hello Vue.js!'}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reverseMessage: function () {
|
|
||||||
this.message = this.message.split('').reverse().join('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Search = Vue.extend({
|
|
||||||
template: '#search',
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
message: 'Hello Vue.js!',
|
|
||||||
q:this.$route.query.q
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
console.log("Serch",this.$route.query.q)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Edit = Vue.extend({
|
|
||||||
template: '#edit',
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
contentA: 'declare function local:query($q as xs:string)\n{\n<json type="object" >}',
|
|
||||||
mode:'xquery',
|
|
||||||
url:'',
|
|
||||||
name:'',
|
|
||||||
path:[],
|
|
||||||
wrap:false,
|
|
||||||
busy:false,
|
|
||||||
clearDialog:false,
|
|
||||||
annotations:null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reset () {
|
|
||||||
this.contentA = 'reset content for Editor A'
|
|
||||||
},
|
|
||||||
changeContentA (val) {
|
|
||||||
if (this.contentA !== val) {
|
|
||||||
this.contentA = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// load from url
|
|
||||||
fetch(url){
|
|
||||||
this.busy=true
|
|
||||||
HTTP.get("raw?url="+url,axios_json)
|
|
||||||
.then(r=>{
|
|
||||||
//console.log(r)
|
|
||||||
var a=acetype(r.data.mimetype)
|
|
||||||
this.mode=a
|
|
||||||
this.contentA=r.data.data
|
|
||||||
var a=url.split("/")
|
|
||||||
this.url=url
|
|
||||||
this.name=a.pop()
|
|
||||||
this.path=a
|
|
||||||
this.busy=false
|
|
||||||
//alert(mode)
|
|
||||||
})
|
|
||||||
.catch(error=> {
|
|
||||||
console.log(error);
|
|
||||||
this.busy=false
|
|
||||||
alert("Get query error"+url)
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
acecmd(cmd){
|
|
||||||
Events.$emit('eventFired',cmd);
|
|
||||||
},
|
|
||||||
fold(){
|
|
||||||
Events.$emit('eventFired',"foldall");
|
|
||||||
},
|
|
||||||
save(){
|
|
||||||
alert("TODO save: "+this.path.join("/"));
|
|
||||||
},
|
|
||||||
showfiles(){
|
|
||||||
router.push({ path: 'files', query: { url: this.path.join("/") }})
|
|
||||||
},
|
|
||||||
beautify(){
|
|
||||||
this.busy=true
|
|
||||||
var a=this.contentA
|
|
||||||
switch(this.mode) {
|
|
||||||
case "html":
|
|
||||||
case "xml":
|
|
||||||
a=html_beautify(a, { indent_size: 3 ,indent_inner_html:true})
|
|
||||||
break;
|
|
||||||
case "javascript":
|
|
||||||
a=js_beautify(a, { indent_size: 2 })
|
|
||||||
break;
|
|
||||||
case "css":
|
|
||||||
a=css_beautify(a, { indent_size: 2 })
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
alert("beaut: " + this.mode)
|
|
||||||
}
|
|
||||||
this.contentA=a
|
|
||||||
this.busy=false
|
|
||||||
},
|
|
||||||
annotation(counts){
|
|
||||||
this.annotations=counts
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
var url=this.$route.query.url
|
|
||||||
console.log("Edit: ",url)
|
|
||||||
if(url) this.fetch(url)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Files = Vue.extend({
|
|
||||||
template: '#files',
|
|
||||||
data: function(){
|
|
||||||
return {url: ".",
|
|
||||||
folders:[],
|
|
||||||
files:[],
|
|
||||||
items:["root"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
click (val) {
|
|
||||||
// with query, resulting in /register?plan=private
|
|
||||||
router.push({ path: 'edit', query: { url: this.url+"/" +val }})
|
|
||||||
},
|
|
||||||
folder (val) {
|
|
||||||
this.url+="/"+ val
|
|
||||||
this.$router.push({ query: { url: this.url }})
|
|
||||||
this.load(this.url)
|
|
||||||
},
|
|
||||||
load(url){
|
|
||||||
HTTP.get("file?url="+url,axios_json)
|
|
||||||
.then(r=>{
|
|
||||||
console.log(r)
|
|
||||||
this.folders=r.data.folders
|
|
||||||
this.files=r.data.files
|
|
||||||
})
|
|
||||||
.catch(error=> {
|
|
||||||
console.log(error);
|
|
||||||
alert("Get query error"+url)
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
root(){
|
|
||||||
this.url="."
|
|
||||||
this.$router.push({ query: { url: this.url }})
|
|
||||||
this.load(this.url)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
var url=this.$route.query.url
|
|
||||||
this.url=url?url:".";
|
|
||||||
console.log("files: ",this.$route.query.url)
|
|
||||||
this.load(this.url)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Stepper = Vue.extend({
|
|
||||||
template: '#stepper',
|
|
||||||
data: function(){
|
|
||||||
return {e6: 0}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// base -----------------------
|
|
||||||
const HTTP = axios.create({
|
|
||||||
baseURL: "/vue-poc/api/",
|
|
||||||
headers: {
|
|
||||||
'X-Custom-Header': 'vue-poc',
|
|
||||||
accept: 'application/json'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const axios_json={ headers: {accept: 'application/json'}};
|
|
||||||
|
|
||||||
|
|
||||||
function acetype(mime){
|
|
||||||
const mimemap={
|
|
||||||
"text/xml":"xml",
|
|
||||||
"application/xml":"xml",
|
|
||||||
"application/xquery":"xquery",
|
|
||||||
"text/ecmascript":"javascript",
|
|
||||||
"text/html":"html"
|
|
||||||
};
|
|
||||||
var r=mimemap[mime]
|
|
||||||
return r?r:"text"
|
|
||||||
};
|
|
||||||
|
|
||||||
Vue.component('my-component', {
|
|
||||||
template: '<div>A custom component!</div>',
|
|
||||||
created:function(){
|
|
||||||
console.log("my-component");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
var Events = new Vue({});
|
|
||||||
|
|
||||||
|
|
||||||
const router = new VueRouter({
|
|
||||||
base:"/vue-poc/ui/",
|
|
||||||
mode: 'history',
|
|
||||||
routes: [
|
|
||||||
{ path: '/', component: Home },
|
|
||||||
{ path: '/people', component: People ,meta:{title:"People"}},
|
|
||||||
{ path: '/options', component: Options,meta:{title:"Options"} },
|
|
||||||
{ path: '/select', component: Select,meta:{title:"Select"} },
|
|
||||||
{ path: '/search', component: Search,meta:{title:"Search"} },
|
|
||||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
|
||||||
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} },
|
|
||||||
{ path: '/files', component: Files,meta:{title:"Files"} }
|
|
||||||
],
|
|
||||||
});
|
|
||||||
router.afterEach(function(route) {
|
|
||||||
document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc";
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.use(Vuetify);
|
|
||||||
const app = new Vue({
|
|
||||||
router,
|
|
||||||
data:function(){return {
|
|
||||||
q:"",
|
|
||||||
sidebar:false,
|
|
||||||
items: [{
|
|
||||||
href: '/',
|
|
||||||
router: true,
|
|
||||||
title: 'Home',
|
|
||||||
icon: 'home'
|
|
||||||
}, {
|
|
||||||
href: 'files',
|
|
||||||
router: true,
|
|
||||||
title: 'files',
|
|
||||||
icon: 'folder'
|
|
||||||
}, {
|
|
||||||
href: 'edit',
|
|
||||||
router: true,
|
|
||||||
title: 'edit',
|
|
||||||
icon: 'mode_edit'
|
|
||||||
}, {
|
|
||||||
href: 'search',
|
|
||||||
router: true,
|
|
||||||
title: 'search',
|
|
||||||
icon: 'search'
|
|
||||||
}, {
|
|
||||||
href: 'people',
|
|
||||||
router: true,
|
|
||||||
title: 'People',
|
|
||||||
icon: 'person'
|
|
||||||
}, {
|
|
||||||
href: 'select',
|
|
||||||
router: true,
|
|
||||||
title: 'select',
|
|
||||||
icon: 'extension'
|
|
||||||
}, {
|
|
||||||
href: 'options',
|
|
||||||
router: true,
|
|
||||||
title: 'options',
|
|
||||||
icon: 'domain'
|
|
||||||
|
|
||||||
}, {
|
|
||||||
href: 'stepper',
|
|
||||||
router: true,
|
|
||||||
title: 'stepper',
|
|
||||||
icon: 'picture_in_picture'
|
|
||||||
}]
|
|
||||||
}},
|
|
||||||
methods: {
|
|
||||||
openSidebar() {
|
|
||||||
this.sidebar = !this.sidebar;
|
|
||||||
},
|
|
||||||
search(){
|
|
||||||
this.$router.push({path: 'search',query: { q: this.q }})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).$mount('#app');
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
||||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
<link href="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.css" rel="stylesheet" type="text/css">
|
<link href="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.css" rel="stylesheet" type="text/css">
|
||||||
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.14/dist/vue-multiselect.min.css" rel="stylesheet" type="text/css">
|
<link href="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.css" rel="stylesheet" type="text/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 rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
<link rel="shortcut icon" href="/vue-poc/ui/icon.png"/>
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
|
||||||
<script src="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.js"></script>
|
<script src="https://unpkg.com/vuetify@0.12.0/dist/vuetify.min.js"></script>
|
||||||
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.14"></script>
|
<script src="https://unpkg.com/vue-multiselect@2.0.0-beta.15/dist/vue-multiselect.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"></script>
|
||||||
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
<v-divider></v-divider>
|
<v-divider></v-divider>
|
||||||
<v-list-item v-for="item in items" :key="item">
|
<v-list-item v-for="item in items" :key="item">
|
||||||
|
|
||||||
<v-list-tile :href="item.href" router="true">
|
<v-list-tile :href="item.href" router="true" ripple="true">
|
||||||
|
|
||||||
<v-list-tile-action>
|
<v-list-tile-action>
|
||||||
<v-icon>{{ item.icon }}</v-icon>
|
<v-icon>{{ item.icon }}</v-icon>
|
||||||
|
|
|
||||||
|
|
@ -1,413 +0,0 @@
|
||||||
const Home = Vue.extend({ template: '#home'});
|
|
||||||
|
|
||||||
const Options = Vue.extend({
|
|
||||||
template: '#heart',
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
snackbar:false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Select = Vue.extend({
|
|
||||||
template: '#select',
|
|
||||||
components: { multiselect: VueMultiselect.Multiselect},
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
value: null,
|
|
||||||
value2: null,
|
|
||||||
options: [],
|
|
||||||
isLoading: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
this.asyncFind("")
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
asyncFind: function(query){
|
|
||||||
this.isLoading = true
|
|
||||||
that=this;
|
|
||||||
HTTP.get("test-select?q="+query,axios_json)
|
|
||||||
.then(function(r){
|
|
||||||
that.isLoading = false
|
|
||||||
that.options=r.data.items;
|
|
||||||
})
|
|
||||||
.catch(function (error) {
|
|
||||||
console.log(error);
|
|
||||||
this.isLoading = false
|
|
||||||
alert("Get query error")
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const People = Vue.extend({
|
|
||||||
template: '#people',
|
|
||||||
data: function(){
|
|
||||||
return {message: 'Hello Vue.js!'}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reverseMessage: function () {
|
|
||||||
this.message = this.message.split('').reverse().join('')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Search = Vue.extend({
|
|
||||||
template: '#search',
|
|
||||||
data: function(){
|
|
||||||
return {
|
|
||||||
message: 'Hello Vue.js!',
|
|
||||||
q:this.$route.query.q
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
console.log("Serch",this.$route.query.q)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Edit=Vue.extend({
|
|
||||||
template: `
|
|
||||||
<v-container fluid="">
|
|
||||||
<v-toolbar class="green">
|
|
||||||
<v-toolbar-side-icon></v-toolbar-side-icon>
|
|
||||||
<v-toolbar-title>
|
|
||||||
<v-btn @click.native="showfiles()" small="" icon=""><v-icon>folder</v-icon></v-btn>
|
|
||||||
<span>{{ name }}</span> <v-chip small="" class="primary white--text">{{ mode }}</v-chip>
|
|
||||||
|
|
||||||
</v-toolbar-title>
|
|
||||||
<v-toolbar-items>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('outline')">
|
|
||||||
<v-icon>star</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('goToPreviousError')">
|
|
||||||
<v-icon>navigate_before</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('goToNextError')">
|
|
||||||
<v-icon>navigate_next</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('foldall')">
|
|
||||||
<v-icon>vertical_align_center</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('showSettingsMenu')">
|
|
||||||
<v-icon>settings</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="wrap=!wrap">
|
|
||||||
<v-icon>wrap_text</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="acecmd('showKeyboardShortcuts')">
|
|
||||||
<v-icon>keyboard</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="save()">
|
|
||||||
<v-icon>cloud_upload</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="beautify()">
|
|
||||||
<v-icon>format_align_center</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn dark="" icon="" @click.native="d2 = true">
|
|
||||||
<v-icon>delete</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-menu bottom="" origin="top right" transition="v-scale-transition">
|
|
||||||
<v-btn dark="" icon="" slot="activator">
|
|
||||||
<v-icon>more_vert</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-list>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-tile>
|
|
||||||
<v-list-tile-title @click="fetch('vue-poc/vue-poc.xqm')">load xquery</v-list-tile-title>
|
|
||||||
</v-list-tile>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-tile>
|
|
||||||
<v-list-tile-title @click="fetch('vue-poc/data/vue-poc/ch4d1.xml')">load xml</v-list-tile-title>
|
|
||||||
</v-list-tile>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-tile>
|
|
||||||
<v-list-tile-title @click="fetch('vue-poc/static/app.js')">load js</v-list-tile-title>
|
|
||||||
</v-list-tile>
|
|
||||||
</v-list-item>
|
|
||||||
<v-list-item>
|
|
||||||
<v-list-tile>
|
|
||||||
<v-list-tile-title @click="fetch('vue-poc/static/app.html')">load html</v-list-tile-title>
|
|
||||||
</v-list-tile>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
|
||||||
</v-menu>
|
|
||||||
</v-toolbar-items>
|
|
||||||
</v-toolbar>
|
|
||||||
<v-progress-linear v-if="busy" v-bind:indeterminate="true"></v-progress-linear>
|
|
||||||
<v-dialog v-model="clearDialog">
|
|
||||||
<v-card>
|
|
||||||
<v-card-row>
|
|
||||||
<v-card-title>Clear?</v-card-title>
|
|
||||||
</v-card-row>
|
|
||||||
<v-card-row>
|
|
||||||
<v-card-text>clear text.</v-card-text>
|
|
||||||
</v-card-row>
|
|
||||||
<v-card-row actions="">
|
|
||||||
<v-btn class="green--text darken-1" flat="flat" @click.native="clearDialog = false">Cancel</v-btn>
|
|
||||||
<v-btn class="green--text darken-1" flat="flat" @click.native="reset()">Ok</v-btn>
|
|
||||||
</v-card-row>
|
|
||||||
</v-card>
|
|
||||||
</v-dialog>
|
|
||||||
<div v-if="!busy" style="height:70vh">
|
|
||||||
<vue-ace editor-id="editorA" :content="contentA" :mode="mode" :wrap="wrap" v-on:change-content="changeContentA" v-on:annotation="annotation"></vue-ace>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</v-container>
|
|
||||||
`,
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
contentA: 'declare function local:query($q as xs:string)\n{\n<json type="object" >}',
|
|
||||||
mode:'xquery',
|
|
||||||
url:'',
|
|
||||||
name:'',
|
|
||||||
path:[],
|
|
||||||
wrap:false,
|
|
||||||
busy:false,
|
|
||||||
clearDialog:false,
|
|
||||||
annotations:null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
reset () {
|
|
||||||
this.contentA = 'reset content for Editor A'
|
|
||||||
},
|
|
||||||
changeContentA (val) {
|
|
||||||
if (this.contentA !== val) {
|
|
||||||
this.contentA = val
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// load from url
|
|
||||||
fetch(url){
|
|
||||||
this.busy=true
|
|
||||||
HTTP.get("raw?url="+url,axios_json)
|
|
||||||
.then(r=>{
|
|
||||||
//console.log(r)
|
|
||||||
var a=acetype(r.data.mimetype)
|
|
||||||
this.mode=a
|
|
||||||
this.contentA=r.data.data
|
|
||||||
var a=url.split("/")
|
|
||||||
this.url=url
|
|
||||||
this.name=a.pop()
|
|
||||||
this.path=a
|
|
||||||
this.busy=false
|
|
||||||
//alert(mode)
|
|
||||||
})
|
|
||||||
.catch(error=> {
|
|
||||||
console.log(error);
|
|
||||||
this.busy=false
|
|
||||||
alert("Get query error"+url)
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
acecmd(cmd){
|
|
||||||
Events.$emit('eventFired',cmd);
|
|
||||||
},
|
|
||||||
fold(){
|
|
||||||
Events.$emit('eventFired',"foldall");
|
|
||||||
},
|
|
||||||
save(){
|
|
||||||
alert("TODO save: "+this.path.join("/"));
|
|
||||||
},
|
|
||||||
showfiles(){
|
|
||||||
router.push({ path: 'files', query: { url: this.path.join("/") }})
|
|
||||||
},
|
|
||||||
beautify(){
|
|
||||||
this.busy=true
|
|
||||||
var a=this.contentA
|
|
||||||
switch(this.mode) {
|
|
||||||
case "html":
|
|
||||||
case "xml":
|
|
||||||
a=html_beautify(a, { indent_size: 3 ,indent_inner_html:true})
|
|
||||||
break;
|
|
||||||
case "javascript":
|
|
||||||
a=js_beautify(a, { indent_size: 2 })
|
|
||||||
break;
|
|
||||||
case "css":
|
|
||||||
a=css_beautify(a, { indent_size: 2 })
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
alert("beaut: " + this.mode)
|
|
||||||
}
|
|
||||||
this.contentA=a
|
|
||||||
this.busy=false
|
|
||||||
},
|
|
||||||
annotation(counts){
|
|
||||||
this.annotations=counts
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
var url=this.$route.query.url
|
|
||||||
console.log("Edit: ",url)
|
|
||||||
if(url) this.fetch(url)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const Files = Vue.extend({
|
|
||||||
template: '#files',
|
|
||||||
data: function(){
|
|
||||||
return {url: ".",
|
|
||||||
folders:[],
|
|
||||||
files:[],
|
|
||||||
items:["root"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
click (val) {
|
|
||||||
// with query, resulting in /register?plan=private
|
|
||||||
router.push({ path: 'edit', query: { url: this.url+"/" +val }})
|
|
||||||
},
|
|
||||||
folder (val) {
|
|
||||||
this.url+="/"+ val
|
|
||||||
this.$router.push({ query: { url: this.url }})
|
|
||||||
this.load(this.url)
|
|
||||||
},
|
|
||||||
load(url){
|
|
||||||
HTTP.get("file?url="+url,axios_json)
|
|
||||||
.then(r=>{
|
|
||||||
console.log(r)
|
|
||||||
this.folders=r.data.folders
|
|
||||||
this.files=r.data.files
|
|
||||||
})
|
|
||||||
.catch(error=> {
|
|
||||||
console.log(error);
|
|
||||||
alert("Get query error"+url)
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
root(){
|
|
||||||
this.url="."
|
|
||||||
this.$router.push({ query: { url: this.url }})
|
|
||||||
this.load(this.url)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created:function(){
|
|
||||||
var url=this.$route.query.url
|
|
||||||
this.url=url?url:".";
|
|
||||||
console.log("files: ",this.$route.query.url)
|
|
||||||
this.load(this.url)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const Stepper = Vue.extend({
|
|
||||||
template: '#stepper',
|
|
||||||
data: function(){
|
|
||||||
return {e6: 0}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// base -----------------------
|
|
||||||
const HTTP = axios.create({
|
|
||||||
baseURL: "/vue-poc/api/",
|
|
||||||
headers: {
|
|
||||||
'X-Custom-Header': 'vue-poc',
|
|
||||||
accept: 'application/json'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const axios_json={ headers: {accept: 'application/json'}};
|
|
||||||
|
|
||||||
|
|
||||||
function acetype(mime){
|
|
||||||
const mimemap={
|
|
||||||
"text/xml":"xml",
|
|
||||||
"application/xml":"xml",
|
|
||||||
"application/xquery":"xquery",
|
|
||||||
"text/ecmascript":"javascript",
|
|
||||||
"text/html":"html"
|
|
||||||
};
|
|
||||||
var r=mimemap[mime]
|
|
||||||
return r?r:"text"
|
|
||||||
};
|
|
||||||
|
|
||||||
Vue.component('my-component', {
|
|
||||||
template: '<div>A custom component!</div>',
|
|
||||||
created:function(){
|
|
||||||
console.log("my-component");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
var Events = new Vue({});
|
|
||||||
|
|
||||||
|
|
||||||
const router = new VueRouter({
|
|
||||||
base:"/vue-poc/ui/",
|
|
||||||
mode: 'history',
|
|
||||||
routes: [
|
|
||||||
{ path: '/', component: Home },
|
|
||||||
{ path: '/people', component: People ,meta:{title:"People"}},
|
|
||||||
{ path: '/options', component: Options,meta:{title:"Options"} },
|
|
||||||
{ path: '/select', component: Select,meta:{title:"Select"} },
|
|
||||||
{ path: '/search', component: Search,meta:{title:"Search"} },
|
|
||||||
{ path: '/edit', component: Edit,meta:{title:"Ace editor"} },
|
|
||||||
{ path: '/stepper', component: Stepper,meta:{title:"Stepper"} },
|
|
||||||
{ path: '/files', component: Files,meta:{title:"Files"} }
|
|
||||||
],
|
|
||||||
});
|
|
||||||
router.afterEach(function(route) {
|
|
||||||
document.title = (route.meta.title?route.meta.title:"") + " VUE-Poc";
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.use(Vuetify);
|
|
||||||
const app = new Vue({
|
|
||||||
router,
|
|
||||||
data:function(){return {
|
|
||||||
q:"",
|
|
||||||
sidebar:false,
|
|
||||||
items: [{
|
|
||||||
href: '/',
|
|
||||||
router: true,
|
|
||||||
title: 'Home',
|
|
||||||
icon: 'home'
|
|
||||||
}, {
|
|
||||||
href: 'files',
|
|
||||||
router: true,
|
|
||||||
title: 'files',
|
|
||||||
icon: 'folder'
|
|
||||||
}, {
|
|
||||||
href: 'edit',
|
|
||||||
router: true,
|
|
||||||
title: 'edit',
|
|
||||||
icon: 'mode_edit'
|
|
||||||
}, {
|
|
||||||
href: 'search',
|
|
||||||
router: true,
|
|
||||||
title: 'search',
|
|
||||||
icon: 'search'
|
|
||||||
}, {
|
|
||||||
href: 'people',
|
|
||||||
router: true,
|
|
||||||
title: 'People',
|
|
||||||
icon: 'person'
|
|
||||||
}, {
|
|
||||||
href: 'select',
|
|
||||||
router: true,
|
|
||||||
title: 'select',
|
|
||||||
icon: 'extension'
|
|
||||||
}, {
|
|
||||||
href: 'options',
|
|
||||||
router: true,
|
|
||||||
title: 'options',
|
|
||||||
icon: 'domain'
|
|
||||||
|
|
||||||
}, {
|
|
||||||
href: 'stepper',
|
|
||||||
router: true,
|
|
||||||
title: 'stepper',
|
|
||||||
icon: 'picture_in_picture'
|
|
||||||
}]
|
|
||||||
}},
|
|
||||||
methods: {
|
|
||||||
openSidebar() {
|
|
||||||
this.sidebar = !this.sidebar;
|
|
||||||
},
|
|
||||||
search(){
|
|
||||||
this.$router.push({path: 'search',query: { q: this.q }})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).$mount('#app');
|
|
||||||
Loading…
Add table
Reference in a new issue