[add] components

This commit is contained in:
Andy Bunce 2021-01-14 23:24:01 +00:00
parent 55b3b91f81
commit 1304878a70
16 changed files with 340 additions and 113 deletions

View file

@ -1,3 +1,10 @@
# Data storage
`core.js` defines settings
## Vuex ## Vuex
state.js state.js
## Localforage
localforage.config({
name: 'vuepoc'
});

View file

@ -39,7 +39,7 @@
<router-view name="helper" class="view ma-3"></router-view> <router-view name="helper" class="view ma-3"></router-view>
</v-navigation-drawer> </v-navigation-drawer>
<v-app-bar app :clipped-left="$vuetify.breakpoint.lgAndUp" <v-app-bar app :clipped-left="$vuetify.breakpoint.lgAndUp" :collapse-on-scroll="true"
color="blue darken-3" dense color="blue darken-3" dense
dark > dark >
<v-app-bar-nav-icon @click.stop="drawer = !drawer" ></v-app-bar-nav-icon> <v-app-bar-nav-icon @click.stop="drawer = !drawer" ></v-app-bar-nav-icon>
@ -115,7 +115,19 @@
<router-view class="view ma-3"></router-view> <router-view class="view ma-3"></router-view>
</transition> </transition>
</v-main> </v-main>
<v-btn
v-scroll="onScroll"
v-show="fab"
fab
dark
fixed
bottom
right
color="primary"
@click="toTop"
>
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
</v-app> </v-app>
</template> </template>
@ -134,6 +146,7 @@
drawer: true, drawer: true,
showNotifications: false, showNotifications: false,
mini: false, mini: false,
fab: false,
alert: {show:false,msg:"Hello"}, alert: {show:false,msg:"Hello"},
frmfav: false, frmfav: false,
@ -167,6 +180,7 @@
children: [ children: [
{href: '/database', text: 'Databases',icon: 'developer_mode' }, {href: '/database', text: 'Databases',icon: 'developer_mode' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/components', text: 'Component library',icon: 'engineering' },
{href: '/documentation', text: 'Documentation',icon: 'library_books' }, {href: '/documentation', text: 'Documentation',icon: 'library_books' },
{href: '/history/files',text: 'history',icon: 'history'} {href: '/history/files',text: 'history',icon: 'history'}
]}, ]},
@ -270,6 +284,14 @@
showAlert(msg){ showAlert(msg){
this.alert.msg=format(new Date())+" "+ msg this.alert.msg=format(new Date())+" "+ msg
this.alert.show=true this.alert.show=true
},
onScroll (e) {
if (typeof window === 'undefined') return
const top = window.pageYOffset || e.target.scrollTop || 0
this.fab = top > 20
},
toTop () {
this.$vuetify.goTo(0)
} }
}, },
watch: { watch: {

View file

@ -10,6 +10,7 @@ for vis-time-line http://visjs.org/docs/graph2d/
data(){ data(){
return {timeline:Object} return {timeline:Object}
}, },
methods:{ methods:{
select(properties){ select(properties){
this.$emit('select',properties.items); this.$emit('select',properties.items);
@ -21,6 +22,7 @@ for vis-time-line http://visjs.org/docs/graph2d/
this.timeline.fit(true) this.timeline.fit(true)
} }
}, },
watch:{ watch:{
items(newItems){ items(newItems){
console.log("vis-time-line: new items:" + newItems.length) console.log("vis-time-line: new items:" + newItems.length)
@ -30,8 +32,8 @@ for vis-time-line http://visjs.org/docs/graph2d/
console.log("opts: ",newOpts) console.log("opts: ",newOpts)
} }
}, },
mounted: function () {
mounted: function () {
var options = this.options; var options = this.options;
var groups = this.groups; var groups = this.groups;
var items = new vis.DataSet(this.items); var items = new vis.DataSet(this.items);

View file

@ -17,7 +17,8 @@ event fired cmd outline
'settings', 'settings',
'minLines', 'minLines',
'completer', 'completer',
'snippets' 'snippets',
'placeholder'
], ],
data () { data () {
return { return {
@ -28,9 +29,9 @@ event fired cmd outline
themeDark: "chaos", themeDark: "chaos",
keybinding: "ace", keybinding: "ace",
fontsize: 16, fontsize: 16,
enableSnippets:true, enableSnippets: true,
enableBasicAutocompletion:true, enableBasicAutocompletion: true,
enableLiveAutocompletion:true enableLiveAutocompletion: true
}, },
annots:{ annots:{
@ -98,10 +99,10 @@ event fired cmd outline
}, },
applySettings(aceSettings){ applySettings(aceSettings){
var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme; this.editor.setTheme()
this.editor.setTheme(`ace/theme/${theme}`)
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`) //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
this.editor.setFontSize(parseInt(aceSettings.fontsize,10)) this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
this.editor.setOption("placeholder", this.placeholder)
this.editor.setOptions({ this.editor.setOptions({
enableSnippets : aceSettings.enableSnippets, enableSnippets : aceSettings.enableSnippets,
enableBasicAutocompletion : aceSettings.enableBasicAutocompletion, enableBasicAutocompletion : aceSettings.enableBasicAutocompletion,
@ -110,6 +111,7 @@ event fired cmd outline
useSoftTabs: true useSoftTabs: true
}); });
} }
}, },
@ -167,6 +169,9 @@ event fired cmd outline
this.$emit('token', token); this.$emit('token', token);
}); });
//this.editor.on("input", this.update);
//setTimeout(this.update, 100);
if(this.events){ if(this.events){
this.events.$on('eventFired', (cmd) => { this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){ if(cmd=="outline"){

View file

@ -1,5 +1,5 @@
<entity name="basex.database" xmlns="https://github.com/Quodatum/app-doc/entity"> <entity name="basex.database" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>BaseX databases</description> <description>A BaseX database of the running server. From db:list()</description>
<fields> <fields>
<field name="name" type="xs:string"> <field name="name" type="xs:string">

View file

@ -1,5 +1,5 @@
<entity name="basex.user" xmlns="https://github.com/Quodatum/app-doc/entity"> <entity name="basex.user" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>BaseX users </description> <description>BaseX user listed on the running server.</description>
<fields> <fields>
<field name="name" type="xs:string"> <field name="name" type="xs:string">

View file

@ -1,11 +1,12 @@
<entity name="dice.entity" xmlns="https://github.com/Quodatum/app-doc/entity"> <entity name="dice.entity" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>List of Entities i.e. things described in this framework <description>List of Entities i.e. things described in this framework.
The name may be dot delimited to indicate the package structure.
</description> </description>
<namespace prefix="ent" <namespace prefix="ent"
uri="https://github.com/Quodatum/app-doc/entity" /> uri="https://github.com/Quodatum/app-doc/entity" />
<fields> <fields>
<field name="name" type="xs:string"> <field name="name" type="xs:string">
<description>name</description> <description>Unique name of the entitty e.g."dice.entity" </description>
<xpath>@name</xpath> <xpath>@name</xpath>
</field> </field>
<field name="type" type="xs:string"> <field name="type" type="xs:string">

View file

@ -0,0 +1,24 @@
<entity name="quodatum.cmpx" xmlns="https://github.com/Quodatum/app-doc/entity">
<description>Cmpx library components </description>
<namespace prefix="cmpx" uri="urn:quodatum:qd-cmpx:component" />
<fields>
<field name="name" type="xs:string">
<description>name of component</description>
<xpath>@name</xpath>
</field>
<field name="type" type="xs:string">
<description>browser or ??</description>
<xpath>cmpx:type</xpath>
</field>
<field name="home" type="xs:string">
<description>url for component</description>
<xpath>cmpx:home</xpath>
</field>
<field name="description" type="xs:string">
<description>description of component</description>
<xpath>cmpx:description</xpath>
</field>
</fields>
<views iconclass="library_books"/>
<data type="element(cmpx:cmp)">collection('~qd-cmpx')/cmpx:cmp</data>
</entity>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<template id="components">
<v-container fluid>
<qd-table :headers="headers" data-uri="data/quodatum.cmpx" entity="quodatum.cmpx" item-key="name">
<template v-slot:title >AAA</template>
<template v-slot:item.home="{ item }" >
<a :href=" item.home" target="cmpx">
{{ item.home }}
</a>
</template>
<template slot="no-results">
No matching results.
</template>
<template slot="no-data">
No matching items.
</template>
</qd-table>
</v-container>
</template>
<script>{
data: function(){
return {
headers: [
{ text: 'name', value: 'name'},
{ text: 'type', value: 'type' },
{ text: 'home', value: 'home' },
{ text: 'description', value: 'description' }
]
}
}
}
</script>

View file

@ -157,7 +157,8 @@
<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" :events="events" <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> :mode="item.mode" :wrap="wrap" :settings="aceSettings" v-on:annotation="annotation"
placeholder="Type.."></vue-ace>
</v-flex> </v-flex>
</div> </div>
</v-card> </v-card>

View file

@ -63,7 +63,7 @@
<v-card-text> <v-card-text>
<v-flex xs12 style="height:200px" fill-height> <v-flex xs12 style="height:200px" fill-height>
<vue-ace :content="xq" mode="xquery" wrap="true" <vue-ace :content="xq" mode="xquery" wrap="true"
:settings="aceSettings" v-on:change-content="onChange" :settings="aceSettings" v-on:change-content="onChange" placeholder="Type XQuery here then click run.."
></vue-ace> ></vue-ace>
</v-flex> </v-flex>
<vp-job v-if="showJob" :job="job" :waiting="waiting" :job-state="jobState" :elapsed="elapsed"></vp-job> <vp-job v-if="showJob" :job="job" :waiting="waiting" :job-state="jobState" :elapsed="elapsed"></vp-job>
@ -74,7 +74,8 @@
<v-card-text v-if="showResult"> <v-card-text v-if="showResult">
<v-flex xs12 style="height:200px" fill-height> <v-flex xs12 style="height:200px" fill-height>
<vue-ace :content="result" mode="text" wrap="false" read-only="true" :settings="aceSettings" <vue-ace :content="result" mode="text" wrap="false" read-only="true"
:settings="aceSettings"
></vue-ace> ></vue-ace>
</v-flex> </v-flex>
</v-card-text> </v-card-text>
@ -90,7 +91,7 @@
data: function(){ data: function(){
return { return {
xq: '(: type your XQuery :)\n', xq: null,
result: '', result: '',
done: false, done: false,
elapsed: null, elapsed: null,
@ -212,6 +213,7 @@
}, },
computed: { computed: {
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
Settings.getItem('settings/ace') Settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
@ -221,9 +223,15 @@
vm.aceSettings = v; vm.aceSettings = v;
})}) })})
}, },
beforeRouteLeave (to, from, next) {
localforage.setItem('eval/xq',this.xq);
next()
},
created:function(){ created:function(){
console.log("eval: creatd"); console.log("eval: creatd");
localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); localforage.getItem('eval/xq').then((value) => { this.xq= value || this.xq});
}, },
beforeDestroy:function(){ beforeDestroy:function(){
this.destroyed=true; this.destroyed=true;

View file

@ -64,8 +64,8 @@
q: null, q: null,
headers: [ headers: [
{ text: 'Id', value: 'id' }, { text: 'Id', value: 'id' },
{ text: 'Task', value: 'task' },
{ text: 'Created', value: 'created' }, { text: 'Created', value: 'created' },
{ text: 'Task', value: 'task' },
{ text: 'Summary', value: 'summary' }, { text: 'Summary', value: 'summary' },
{ text: 'Params', value: 'arity' } { text: 'Params', value: 'arity' }
] ]

View file

@ -36,28 +36,30 @@
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">
<v-row align-content="start" > <v-row align-content="start" no-gutters >
<v-col <v-col v-for="item in props.items" :key="item.name"
v-for="item in props.items" class="ma-2" no-gutters >
:key="item.name" >
<v-card :hover="true" active-class="default-class qd-active" max-width="20em" min-width="20em"> <v-card :to="{path:'entity/'+ item.name}" :hover="true"
active-class="default-class qd-active" max-width="20em" min-width="20em" height="15em">
<v-toolbar color="orange lighten-3" > <v-toolbar color="blue-grey lighten-3" >
<v-toolbar-title> <v-toolbar-title>
<router-link :to="{path:'entity/'+ item.name}">
<v-avatar color="lime"> <v-avatar tile color="lime" >
<v-icon >{{ item.iconclass }}</v-icon> <v-icon >{{ item.iconclass }}</v-icon>
</v-avatar> {{ item.name }} </v-avatar> {{ item.name }}
</router-link>
</v-toolbar-title> </v-toolbar-title>
</v-card-title> </v-card-title>
<v-spacer></v-spacer>
<v-badge >
<span slot="badge">{{ item.nfields }}</span>
</v-badge>
</v-toolbar> </v-toolbar>
<v-card-text xs1 >{{ item.description }}</<v-card-text> <v-card-text xs1 >{{ item.description }}</<v-card-text>
<v-divider ></v-divider>
<v-card-actions >
<v-chip color="green" text-color="white">Fields: {{ item.nfields }}</v-chip>
<v-spacer></v-spacer>
<v-btn icon>Xml</v-btn>
<v-btn icon>Json</v-btn>
</v-card-actions>
</v-card> </v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -82,7 +84,7 @@
methods:{ methods:{
getItems(){ getItems(){
this.loading=true this.loading=true
HTTP.get("data/entity",{params:{q:this.q}}) HTTP.get("data/entity",{params:{q:this.q, sort:'name'}})
.then(r=>{ .then(r=>{
this.loading=false this.loading=false
//console.log(r.data) //console.log(r.data)

View file

@ -1,5 +1,5 @@
(: entity access maps (: entity access maps
: auto generated from xml files in entities folder at: 2020-11-27T21:35:19.672Z : auto generated from xml files in entities folder at: 2021-01-13T22:12:01.894Z
:) :)
module namespace entity = 'quodatum.models.generated'; module namespace entity = 'quodatum.models.generated';
@ -8,6 +8,7 @@ declare namespace ent='https://github.com/Quodatum/app-doc/entity';
declare namespace h='urn:quodatum:vue-poc.history'; declare namespace h='urn:quodatum:vue-poc.history';
declare namespace xqdoc='http://www.xqdoc.org/1.0'; declare namespace xqdoc='http://www.xqdoc.org/1.0';
declare namespace qns='https://github.com/Quodatum/namespaces'; declare namespace qns='https://github.com/Quodatum/namespaces';
declare namespace cmpx='urn:quodatum:qd-cmpx:component';
declare namespace t='https://github.com/Quodatum/task'; declare namespace t='https://github.com/Quodatum/task';
declare namespace c='http://www.w3.org/ns/xproc-step'; declare namespace c='http://www.w3.org/ns/xproc-step';
@ -734,6 +735,44 @@ hof:top-k-by(admin:logs(), string#1, 2)
"views": map{ "views": map{
'filter': 'name description' 'filter': 'name description'
}
},
"quodatum.cmpx": map{
"name": "quodatum.cmpx",
"description": "Cmpx library components ",
"access": map{
'description': function($_ as element(cmpx:cmp)) as xs:string { $_! cmpx:description },
'home': function($_ as element(cmpx:cmp)) as xs:string { $_! cmpx:home },
'name': function($_ as element(cmpx:cmp)) as xs:string { $_! @name },
'type': function($_ as element(cmpx:cmp)) as xs:string { $_! cmpx:type } },
"filter": function($item,$q) as xs:boolean{
some $e in ( ) satisfies
fn:contains($e,$q, 'http://www.w3.org/2005/xpath-functions/collation/html-ascii-case-insensitive')
},
"json": map{
"description": function($_ as element(cmpx:cmp)) as element(description)? {
(: xs:string :)
fn:data($_!cmpx:description)!element description { .}
},
"home": function($_ as element(cmpx:cmp)) as element(home)? {
(: xs:string :)
fn:data($_!cmpx:home)!element home { .}
},
"name": function($_ as element(cmpx:cmp)) as element(name)? {
(: xs:string :)
fn:data($_!@name)!element name { .}
},
"type": function($_ as element(cmpx:cmp)) as element(type)? {
(: xs:string :)
fn:data($_!cmpx:type)!element type { .}
} },
"data": function() as element(cmpx:cmp)*
{ collection('~qd-cmpx')/cmpx:cmp },
"views": map{
} }
}, },
"quodatum.logfile": map{ "quodatum.logfile": map{

View file

@ -16,7 +16,26 @@ const router = new VueRouter({
}, },
routes: [ routes: [
{ path: '/', component: Home, meta:{title:"Home"} }, { path: '/', component: Home, meta:{title:"Home"} },
{ path: '/session', component: Session ,meta: {title:"Session"}},
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },
{path: 'routes2', name: 'routes', component: Routes2, meta:{title:"Routes2"} },
{path: 'vue-cmps', component: VueComps, meta:{title:"Vue components"} },
]},
{ path: '/components', component: Components,meta:{title:"Components"},props:{protocol:"xmldb"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"xmldb"} },
{ path: '/documentation', component: Documentation, meta:{title:"documentation"} },
{ path: '/documentation/xqdoc', component: Xqdocs, meta:{title:"XQdoc"} },
{ path: '/edit', name: "edit",component: Edit,meta:{title:"Ace editor"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/eval/:id', component: Evalid, props: true, meta:{title:"Run details"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{path: '/images', component: { template: '<router-view/>' }, {path: '/images', component: { template: '<router-view/>' },
children: [ children: [
@ -31,8 +50,7 @@ const router = new VueRouter({
]}, ]},
{ path: '/documentation', component: Documentation, meta:{title:"documentation"} },
{ path: '/documentation/xqdoc', component: Xqdocs, meta:{title:"XQdoc"} },
{ path: '/logdate', component: Basexlogdate, meta:{title:"log files"} }, { path: '/logdate', component: Basexlogdate, meta:{title:"log files"} },
{ path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} }, { path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} },
@ -58,15 +76,13 @@ const router = new VueRouter({
] ]
} }
]}, ]},
{ path: '/session', component: Session ,meta: {title:"Session"}},
{ path: '/select', component: Select, meta:{title:"Select"} }, { path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} }, { path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', name: "multi-edit", component: Tabs,meta:{title:"tab test"} }, { path: '/tabs', name: "multi-edit", component: Tabs,meta:{title:"tab test"} },
{ path: '/edit', name: "edit",component: Edit,meta:{title:"Ace editor"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"xmldb"} },
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/settings', component: { template: '<router-view/>' } { path: '/settings', component: { template: '<router-view/>' }
@ -152,8 +168,7 @@ const router = new VueRouter({
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} }, { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
{ path: '/validate', component: Validate, meta:{title:"Validate"} }, { path: '/validate', component: Validate, meta:{title:"Validate"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/eval/:id', component: Evalid, props: true, meta:{title:"Run details"} },
{ path: '/logs', component: Log, meta:{title:"Server logs"} }, { path: '/logs', component: Log, meta:{title:"Server logs"} },
@ -170,13 +185,7 @@ const router = new VueRouter({
{ path: '/map', component: Leaflet,meta:{title:"map"} }, { path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },
{path: 'routes2', name: 'routes', component: Routes2, meta:{title:"Routes2"} },
{path: 'vue-cmps', component: VueComps, meta:{title:"Vue components"} },
]},
{ path: '*', component: Notfound, meta:{title:"Page not found"} } { path: '*', component: Notfound, meta:{title:"Page not found"} }
], ],

View file

@ -1,4 +1,4 @@
// generated 2021-01-13T18:11:28.088Z // generated 2021-01-14T23:08:56.115Z
// src: C:\Users\andy\git\vue-poc\src\vue-poc\imports.js // src: C:\Users\andy\git\vue-poc\src\vue-poc\imports.js
import { parseISO, formatDistanceToNow, format, roundToNearestMinutes, addSeconds } from 'https://cdn.jsdelivr.net/npm/date-fns@2.16.1/+esm'; import { parseISO, formatDistanceToNow, format, roundToNearestMinutes, addSeconds } from 'https://cdn.jsdelivr.net/npm/date-fns@2.16.1/+esm';
@ -766,6 +766,7 @@ Vue.component('vis-time-line',{template:`
data(){ data(){
return {timeline:Object} return {timeline:Object}
}, },
methods:{ methods:{
select(properties){ select(properties){
this.$emit('select',properties.items); this.$emit('select',properties.items);
@ -777,6 +778,7 @@ Vue.component('vis-time-line',{template:`
this.timeline.fit(true) this.timeline.fit(true)
} }
}, },
watch:{ watch:{
items(newItems){ items(newItems){
console.log("vis-time-line: new items:" + newItems.length) console.log("vis-time-line: new items:" + newItems.length)
@ -786,8 +788,8 @@ Vue.component('vis-time-line',{template:`
console.log("opts: ",newOpts) console.log("opts: ",newOpts)
} }
}, },
mounted: function () {
mounted: function () {
var options = this.options; var options = this.options;
var groups = this.groups; var groups = this.groups;
var items = new vis.DataSet(this.items); var items = new vis.DataSet(this.items);
@ -1212,7 +1214,8 @@ Vue.component('vue-ace',{template:`
'settings', 'settings',
'minLines', 'minLines',
'completer', 'completer',
'snippets' 'snippets',
'placeholder'
], ],
data () { data () {
return { return {
@ -1223,9 +1226,9 @@ Vue.component('vue-ace',{template:`
themeDark: "chaos", themeDark: "chaos",
keybinding: "ace", keybinding: "ace",
fontsize: 16, fontsize: 16,
enableSnippets:true, enableSnippets: true,
enableBasicAutocompletion:true, enableBasicAutocompletion: true,
enableLiveAutocompletion:true enableLiveAutocompletion: true
}, },
annots:{ annots:{
@ -1293,10 +1296,10 @@ Vue.component('vue-ace',{template:`
}, },
applySettings(aceSettings){ applySettings(aceSettings){
var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme; this.editor.setTheme()
this.editor.setTheme(`ace/theme/${theme}`)
//this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`) //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
this.editor.setFontSize(parseInt(aceSettings.fontsize,10)) this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
this.editor.setOption("placeholder", this.placeholder)
this.editor.setOptions({ this.editor.setOptions({
enableSnippets : aceSettings.enableSnippets, enableSnippets : aceSettings.enableSnippets,
enableBasicAutocompletion : aceSettings.enableBasicAutocompletion, enableBasicAutocompletion : aceSettings.enableBasicAutocompletion,
@ -1305,6 +1308,7 @@ Vue.component('vue-ace',{template:`
useSoftTabs: true useSoftTabs: true
}); });
} }
}, },
@ -1362,6 +1366,9 @@ Vue.component('vue-ace',{template:`
this.$emit('token', token); this.$emit('token', token);
}); });
//this.editor.on("input", this.update);
//setTimeout(this.update, 100);
if(this.events){ if(this.events){
this.events.$on('eventFired', (cmd) => { this.events.$on('eventFired', (cmd) => {
if(cmd=="outline"){ if(cmd=="outline"){
@ -2686,6 +2693,42 @@ const Log=Vue.extend({template:`
); );
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/collection/components.vue
const Components=Vue.extend({template:`
<v-container fluid>
<qd-table :headers="headers" data-uri="data/quodatum.cmpx" entity="quodatum.cmpx" item-key="name">
<template v-slot:title>AAA</template>
<template v-slot:item.home="{ item }">
<a :href=" item.home" target="cmpx">
{{ item.home }}
</a>
</template>
<template slot="no-results">
No matching results.
</template>
<template slot="no-data">
No matching items.
</template>
</qd-table>
</v-container>
`,
data: function(){
return {
headers: [
{ text: 'name', value: 'name'},
{ text: 'type', value: 'type' },
{ text: 'home', value: 'home' },
{ text: 'description', value: 'description' }
]
}
}
}
);
// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/collection/documentation.vue // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/collection/documentation.vue
const Documentation=Vue.extend({template:` const Documentation=Vue.extend({template:`
<v-container fluid> <v-container fluid>
@ -4014,7 +4057,7 @@ const Tabs=Vue.extend({template:`
<v-card> <v-card>
<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" :events="events" :mode="item.mode" :wrap="wrap" :settings="aceSettings" v-on:annotation="annotation"></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" placeholder="Type.."></vue-ace>
</v-flex> </v-flex>
</div> </div>
</v-card> </v-card>
@ -4246,7 +4289,7 @@ const Eval=Vue.extend({template:`
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<v-flex xs12 style="height:200px" fill-height> <v-flex xs12 style="height:200px" fill-height>
<vue-ace :content="xq" mode="xquery" wrap="true" :settings="aceSettings" v-on:change-content="onChange"></vue-ace> <vue-ace :content="xq" mode="xquery" wrap="true" :settings="aceSettings" v-on:change-content="onChange" placeholder="Type XQuery here then click run.."></vue-ace>
</v-flex> </v-flex>
<vp-job v-if="showJob" :job="job" :waiting="waiting" :job-state="jobState" :elapsed="elapsed"></vp-job> <vp-job v-if="showJob" :job="job" :waiting="waiting" :job-state="jobState" :elapsed="elapsed"></vp-job>
</v-card-text> </v-card-text>
@ -4270,7 +4313,7 @@ const Eval=Vue.extend({template:`
data: function(){ data: function(){
return { return {
xq: '(: type your XQuery :)\n', xq: null,
result: '', result: '',
done: false, done: false,
elapsed: null, elapsed: null,
@ -4392,6 +4435,7 @@ const Eval=Vue.extend({template:`
}, },
computed: { computed: {
}, },
beforeRouteEnter (to, from, next) { beforeRouteEnter (to, from, next) {
Settings.getItem('settings/ace') Settings.getItem('settings/ace')
.then( v =>{ .then( v =>{
@ -4401,9 +4445,15 @@ const Eval=Vue.extend({template:`
vm.aceSettings = v; vm.aceSettings = v;
})}) })})
}, },
beforeRouteLeave (to, from, next) {
localforage.setItem('eval/xq',this.xq);
next()
},
created:function(){ created:function(){
console.log("eval: creatd"); console.log("eval: creatd");
localforage.getItem('eval/xq').then((value) => { this.xq=value || this.xq}); localforage.getItem('eval/xq').then((value) => { this.xq= value || this.xq});
}, },
beforeDestroy:function(){ beforeDestroy:function(){
this.destroyed=true; this.destroyed=true;
@ -4652,8 +4702,8 @@ const Taskhistory=Vue.extend({template:`
q: null, q: null,
headers: [ headers: [
{ text: 'Id', value: 'id' }, { text: 'Id', value: 'id' },
{ text: 'Task', value: 'task' },
{ text: 'Created', value: 'created' }, { text: 'Created', value: 'created' },
{ text: 'Task', value: 'task' },
{ text: 'Summary', value: 'summary' }, { text: 'Summary', value: 'summary' },
{ text: 'Params', value: 'arity' } { text: 'Params', value: 'arity' }
] ]
@ -6005,26 +6055,28 @@ const Entity=Vue.extend({template:`
</template> </template>
<template v-slot:default="props"> <template v-slot:default="props">
<v-row align-content="start"> <v-row align-content="start" no-gutters>
<v-col v-for="item in props.items" :key="item.name"> <v-col v-for="item in props.items" :key="item.name" class="ma-2" no-gutters>
<v-card :hover="true" active-class="default-class qd-active" max-width="20em" min-width="20em"> <v-card :to="{path:'entity/'+ item.name}" :hover="true" active-class="default-class qd-active" max-width="20em" min-width="20em" height="15em">
<v-toolbar color="orange lighten-3"> <v-toolbar color="blue-grey lighten-3">
<v-toolbar-title> <v-toolbar-title>
<router-link :to="{path:'entity/'+ item.name}">
<v-avatar color="lime"> <v-avatar tile color="lime">
<v-icon>{{ item.iconclass }}</v-icon> <v-icon>{{ item.iconclass }}</v-icon>
</v-avatar> {{ item.name }} </v-avatar> {{ item.name }}
</router-link>
</v-toolbar-title> </v-toolbar-title>
<v-spacer></v-spacer>
<v-badge>
<span slot="badge">{{ item.nfields }}</span>
</v-badge>
</v-toolbar> </v-toolbar>
<v-card-text xs1>{{ item.description }}<!--<v-card-text--> <v-card-text xs1>{{ item.description }}<!--<v-card-text-->
<v-divider></v-divider>
<v-card-actions>
<v-chip color="green" text-color="white">Fields: {{ item.nfields }}</v-chip>
<v-spacer></v-spacer>
<v-btn icon>Xml</v-btn>
<v-btn icon>Json</v-btn>
</v-card-actions>
</v-card-text></v-card> </v-card-text></v-card>
</v-col> </v-col>
</v-row> </v-row>
@ -6048,7 +6100,7 @@ const Entity=Vue.extend({template:`
methods:{ methods:{
getItems(){ getItems(){
this.loading=true this.loading=true
HTTP.get("data/entity",{params:{q:this.q}}) HTTP.get("data/entity",{params:{q:this.q, sort:'name'}})
.then(r=>{ .then(r=>{
this.loading=false this.loading=false
//console.log(r.data) //console.log(r.data)
@ -8754,7 +8806,26 @@ const router = new VueRouter({
}, },
routes: [ routes: [
{ path: '/', component: Home, meta:{title:"Home"} }, { path: '/', component: Home, meta:{title:"Home"} },
{ path: '/session', component: Session ,meta: {title:"Session"}},
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },
{path: 'routes2', name: 'routes', component: Routes2, meta:{title:"Routes2"} },
{path: 'vue-cmps', component: VueComps, meta:{title:"Vue components"} },
]},
{ path: '/components', component: Components,meta:{title:"Components"},props:{protocol:"xmldb"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"xmldb"} },
{ path: '/documentation', component: Documentation, meta:{title:"documentation"} },
{ path: '/documentation/xqdoc', component: Xqdocs, meta:{title:"XQdoc"} },
{ path: '/edit', name: "edit",component: Edit,meta:{title:"Ace editor"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/eval/:id', component: Evalid, props: true, meta:{title:"Run details"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{path: '/images', component: { template: '<router-view/>' }, {path: '/images', component: { template: '<router-view/>' },
children: [ children: [
@ -8769,8 +8840,7 @@ const router = new VueRouter({
]}, ]},
{ path: '/documentation', component: Documentation, meta:{title:"documentation"} },
{ path: '/documentation/xqdoc', component: Xqdocs, meta:{title:"XQdoc"} },
{ path: '/logdate', component: Basexlogdate, meta:{title:"log files"} }, { path: '/logdate', component: Basexlogdate, meta:{title:"log files"} },
{ path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} }, { path: '/logdate/:date', component: Basexlogdate1, props:true, meta:{title:"log files"} },
@ -8796,15 +8866,13 @@ const router = new VueRouter({
] ]
} }
]}, ]},
{ path: '/session', component: Session ,meta: {title:"Session"}},
{ path: '/select', component: Select, meta:{title:"Select"} }, { path: '/select', component: Select, meta:{title:"Select"} },
{ path: '/search', component: Search, meta:{title:"Search"} }, { path: '/search', component: Search, meta:{title:"Search"} },
{ path: '/tabs', name: "multi-edit", component: Tabs,meta:{title:"tab test"} }, { path: '/tabs', name: "multi-edit", component: Tabs,meta:{title:"tab test"} },
{ path: '/edit', name: "edit",component: Edit,meta:{title:"Ace editor"} },
{ path: '/files', component: Files,meta:{title:"File system"},props:{protocol:"webfile"} },
{ path: '/database', component: Files,meta:{title:"Databases"},props:{protocol:"xmldb"} },
{ path: '/login', component: Login,meta:{title:"login"} }, { path: '/login', component: Login,meta:{title:"login"} },
{ path: '/settings', component: { template: '<router-view/>' } { path: '/settings', component: { template: '<router-view/>' }
@ -8890,8 +8958,7 @@ const router = new VueRouter({
{ path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} }, { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
{ path: '/validate', component: Validate, meta:{title:"Validate"} }, { path: '/validate', component: Validate, meta:{title:"Validate"} },
{ path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
{ path: '/eval/:id', component: Evalid, props: true, meta:{title:"Run details"} },
{ path: '/logs', component: Log, meta:{title:"Server logs"} }, { path: '/logs', component: Log, meta:{title:"Server logs"} },
@ -8908,13 +8975,7 @@ const router = new VueRouter({
{ path: '/map', component: Leaflet,meta:{title:"map"} }, { path: '/map', component: Leaflet,meta:{title:"map"} },
{ path: '/about', component: { template: '<router-view/>' } ,children:[
{path: '', component: About, meta:{title:"About Vue-poc"} },
{path: 'package', component: Package, meta:{title:"Javascript components"} },
{path: 'routes', component: Routes, meta:{title:"Routes"} },
{path: 'routes2', name: 'routes', component: Routes2, meta:{title:"Routes2"} },
{path: 'vue-cmps', component: VueComps, meta:{title:"Vue components"} },
]},
{ path: '*', component: Notfound, meta:{title:"Page not found"} } { path: '*', component: Notfound, meta:{title:"Page not found"} }
], ],
@ -8974,7 +9035,7 @@ const Vuepoc=Vue.extend({template:`
<router-view name="helper" class="view ma-3"></router-view> <router-view name="helper" class="view ma-3"></router-view>
</v-navigation-drawer> </v-navigation-drawer>
<v-app-bar app :clipped-left="$vuetify.breakpoint.lgAndUp" color="blue darken-3" dense dark> <v-app-bar app :clipped-left="$vuetify.breakpoint.lgAndUp" :collapse-on-scroll="true" color="blue darken-3" dense dark>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="hidden-sm-and-down"> <v-toolbar-title class="hidden-sm-and-down">
{{$route.meta.title}}</v-toolbar-title> {{$route.meta.title}}</v-toolbar-title>
@ -9048,7 +9109,9 @@ const Vuepoc=Vue.extend({template:`
<router-view class="view ma-3"></router-view> <router-view class="view ma-3"></router-view>
</transition> </transition>
</v-main> </v-main>
<v-btn v-scroll="onScroll" v-show="fab" fab dark fixed bottom right color="primary" @click="toTop">
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
</v-app> </v-app>
`, `,
@ -9066,6 +9129,7 @@ const Vuepoc=Vue.extend({template:`
drawer: true, drawer: true,
showNotifications: false, showNotifications: false,
mini: false, mini: false,
fab: false,
alert: {show:false,msg:"Hello"}, alert: {show:false,msg:"Hello"},
frmfav: false, frmfav: false,
@ -9099,6 +9163,7 @@ const Vuepoc=Vue.extend({template:`
children: [ children: [
{href: '/database', text: 'Databases',icon: 'developer_mode' }, {href: '/database', text: 'Databases',icon: 'developer_mode' },
{href: '/files', text: 'File system',icon: 'folder' }, {href: '/files', text: 'File system',icon: 'folder' },
{href: '/components', text: 'Component library',icon: 'engineering' },
{href: '/documentation', text: 'Documentation',icon: 'library_books' }, {href: '/documentation', text: 'Documentation',icon: 'library_books' },
{href: '/history/files',text: 'history',icon: 'history'} {href: '/history/files',text: 'history',icon: 'history'}
]}, ]},
@ -9202,6 +9267,14 @@ const Vuepoc=Vue.extend({template:`
showAlert(msg){ showAlert(msg){
this.alert.msg=format(new Date())+" "+ msg this.alert.msg=format(new Date())+" "+ msg
this.alert.show=true this.alert.show=true
},
onScroll (e) {
if (typeof window === 'undefined') return
const top = window.pageYOffset || e.target.scrollTop || 0
this.fab = top > 20
},
toTop () {
this.$vuetify.goTo(0)
} }
}, },
watch: { watch: {