From 1304878a707651319d3df05ed06a26c1e4420470 Mon Sep 17 00:00:00 2001
From: Andy Bunce <bunce.andy@gmail.com>
Date: Thu, 14 Jan 2021 23:24:01 +0000
Subject: [PATCH] [add] components

---
 doc/data.md                                   |   7 +
 src/vue-poc/app.vue                           |  30 ++-
 src/vue-poc/components/vis-time-line.vue      |   4 +-
 src/vue-poc/components/vue-ace.vue            |  17 +-
 .../data/vue-poc/entities/basex/database.xml  |   2 +-
 .../data/vue-poc/entities/basex/user.xml      |   2 +-
 .../data/vue-poc/entities/dice/entity.xml     |   5 +-
 .../data/vue-poc/entities/quodatum/cmpx.xml   |  24 +++
 .../features/collection/components.vue        |  34 ++++
 src/vue-poc/features/edit/tabs.vue            |   3 +-
 src/vue-poc/features/eval/eval.vue            |  16 +-
 src/vue-poc/features/history/taskhistory.vue  |   2 +-
 src/vue-poc/features/model/entity.vue         |  32 ++--
 src/vue-poc/models.gen.xqm                    |  41 +++-
 src/vue-poc/router.js                         |  55 +++---
 src/vue-poc/static/app-gen.js                 | 179 ++++++++++++------
 16 files changed, 340 insertions(+), 113 deletions(-)
 create mode 100644 src/vue-poc/data/vue-poc/entities/quodatum/cmpx.xml
 create mode 100644 src/vue-poc/features/collection/components.vue

diff --git a/doc/data.md b/doc/data.md
index 53fb2f5..2b37831 100644
--- a/doc/data.md
+++ b/doc/data.md
@@ -1,3 +1,10 @@
+# Data storage
+`core.js` defines settings
 ## Vuex
 
 state.js
+
+## Localforage
+localforage.config({
+  name: 'vuepoc'
+});
diff --git a/src/vue-poc/app.vue b/src/vue-poc/app.vue
index d76d347..b0207f3 100644
--- a/src/vue-poc/app.vue
+++ b/src/vue-poc/app.vue
@@ -39,7 +39,7 @@
     <router-view name="helper" class="view ma-3"></router-view>
  </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  
       dark >
       <v-app-bar-nav-icon @click.stop="drawer = !drawer"  ></v-app-bar-nav-icon>
@@ -104,7 +104,7 @@
             </v-list-item>
         </v-list>
      </v-menu>
-      
+     
 </v-app-bar>
  
  <v-main> 
@@ -115,7 +115,19 @@
       <router-view class="view ma-3"></router-view>
       </transition>
   </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>
 </template>
 
@@ -134,6 +146,7 @@
     drawer: true,
     showNotifications: false,
     mini: false,
+    fab: false,
     alert: {show:false,msg:"Hello"},
     frmfav: false,
   
@@ -167,6 +180,7 @@
           children: [
          {href: '/database', text: 'Databases',icon: 'developer_mode' },
          {href: '/files', text: 'File system',icon: 'folder' },
+         {href: '/components', text: 'Component library',icon: 'engineering' },
          {href: '/documentation', text: 'Documentation',icon: 'library_books' },   
          {href: '/history/files',text: 'history',icon: 'history'}
         ]},
@@ -270,7 +284,15 @@
       showAlert(msg){
         this.alert.msg=format(new Date())+" "+ msg
         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: {
 	    showNotifications: function (val) {
diff --git a/src/vue-poc/components/vis-time-line.vue b/src/vue-poc/components/vis-time-line.vue
index f7c4432..94af1de 100644
--- a/src/vue-poc/components/vis-time-line.vue
+++ b/src/vue-poc/components/vis-time-line.vue
@@ -10,6 +10,7 @@ for vis-time-line http://visjs.org/docs/graph2d/
   data(){
     return {timeline:Object}
   },
+  
   methods:{
     select(properties){
       this.$emit('select',properties.items);
@@ -21,6 +22,7 @@ for vis-time-line http://visjs.org/docs/graph2d/
         this.timeline.fit(true)
     }
   },
+  
   watch:{
 	  items(newItems){
 		  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)
 	  }
   },
+  
   mounted: function () {
-   
     var options = this.options;
     var groups = this.groups;
     var items = new vis.DataSet(this.items);
diff --git a/src/vue-poc/components/vue-ace.vue b/src/vue-poc/components/vue-ace.vue
index e53561e..ab51e93 100644
--- a/src/vue-poc/components/vue-ace.vue
+++ b/src/vue-poc/components/vue-ace.vue
@@ -17,7 +17,8 @@ event fired cmd outline
           'settings',
           'minLines',
           'completer',
-          'snippets'
+          'snippets',
+          'placeholder'
           ],
   data () {
     return {
@@ -28,9 +29,9 @@ event fired cmd outline
           themeDark: "chaos",
           keybinding: "ace",
           fontsize: 16,
-          enableSnippets:true,
-          enableBasicAutocompletion:true,
-          enableLiveAutocompletion:true
+          enableSnippets: true,
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true
           },
           
       annots:{
@@ -98,10 +99,10 @@ event fired cmd outline
     },
     
     applySettings(aceSettings){
-      var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme;
-      this.editor.setTheme(`ace/theme/${theme}`)
+      this.editor.setTheme()
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
+      this.editor.setOption("placeholder", this.placeholder)
       this.editor.setOptions({ 
                           enableSnippets : aceSettings.enableSnippets,
                           enableBasicAutocompletion : aceSettings.enableBasicAutocompletion,
@@ -110,6 +111,7 @@ event fired cmd outline
                           useSoftTabs: true
                           });
     }
+    
   },
   
  
@@ -167,6 +169,9 @@ event fired cmd outline
       this.$emit('token', token);
     });
     
+    //this.editor.on("input", this.update);
+    //setTimeout(this.update, 100);
+    
     if(this.events){
       this.events.$on('eventFired', (cmd) => {
       if(cmd=="outline"){
diff --git a/src/vue-poc/data/vue-poc/entities/basex/database.xml b/src/vue-poc/data/vue-poc/entities/basex/database.xml
index 9cd84ed..ca6bae5 100644
--- a/src/vue-poc/data/vue-poc/entities/basex/database.xml
+++ b/src/vue-poc/data/vue-poc/entities/basex/database.xml
@@ -1,5 +1,5 @@
 <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>
 		<field name="name" type="xs:string">
diff --git a/src/vue-poc/data/vue-poc/entities/basex/user.xml b/src/vue-poc/data/vue-poc/entities/basex/user.xml
index ba5bf95..8369d8d 100644
--- a/src/vue-poc/data/vue-poc/entities/basex/user.xml
+++ b/src/vue-poc/data/vue-poc/entities/basex/user.xml
@@ -1,5 +1,5 @@
 <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>
 		<field name="name" type="xs:string">
diff --git a/src/vue-poc/data/vue-poc/entities/dice/entity.xml b/src/vue-poc/data/vue-poc/entities/dice/entity.xml
index 5cf9221..42df902 100644
--- a/src/vue-poc/data/vue-poc/entities/dice/entity.xml
+++ b/src/vue-poc/data/vue-poc/entities/dice/entity.xml
@@ -1,11 +1,12 @@
 <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>
 	<namespace prefix="ent"
 		uri="https://github.com/Quodatum/app-doc/entity" />
 	<fields>
 		<field name="name" type="xs:string">
-			<description>name</description>
+			<description>Unique name of the entitty e.g."dice.entity" </description>
 			<xpath>@name</xpath>
 		</field>
 		<field name="type" type="xs:string">
diff --git a/src/vue-poc/data/vue-poc/entities/quodatum/cmpx.xml b/src/vue-poc/data/vue-poc/entities/quodatum/cmpx.xml
new file mode 100644
index 0000000..677fb81
--- /dev/null
+++ b/src/vue-poc/data/vue-poc/entities/quodatum/cmpx.xml
@@ -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>
\ No newline at end of file
diff --git a/src/vue-poc/features/collection/components.vue b/src/vue-poc/features/collection/components.vue
new file mode 100644
index 0000000..daf5757
--- /dev/null
+++ b/src/vue-poc/features/collection/components.vue
@@ -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>
\ No newline at end of file
diff --git a/src/vue-poc/features/edit/tabs.vue b/src/vue-poc/features/edit/tabs.vue
index d38e01d..07c0592 100644
--- a/src/vue-poc/features/edit/tabs.vue
+++ b/src/vue-poc/features/edit/tabs.vue
@@ -157,7 +157,8 @@
         <div style="height:200px" ref="ace" v-resize="onResize" >
         <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>
+			    :mode="item.mode" :wrap="wrap"  :settings="aceSettings" v-on:annotation="annotation"
+			    placeholder="Type.."></vue-ace>
 			  </v-flex>
         </div> 
       </v-card>
diff --git a/src/vue-poc/features/eval/eval.vue b/src/vue-poc/features/eval/eval.vue
index 6bea75e..b9dd4a0 100644
--- a/src/vue-poc/features/eval/eval.vue
+++ b/src/vue-poc/features/eval/eval.vue
@@ -63,7 +63,7 @@
    <v-card-text>
     <v-flex xs12 style="height:200px"  fill-height>
 		  <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>
     </v-flex>
     <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-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>
         </v-flex> 
      </v-card-text>
@@ -90,7 +91,7 @@
 
   data:  function(){
     return {
-      xq: '(: type your XQuery :)\n',
+      xq: null,
       result: '',
       done: false,
       elapsed: null,
@@ -212,6 +213,7 @@
   },
   computed: { 
   },
+  
   beforeRouteEnter (to, from, next) {
     Settings.getItem('settings/ace')
     .then( v =>{
@@ -221,9 +223,15 @@
         vm.aceSettings = v;
         })})
      },
+     
+     beforeRouteLeave (to, from, next) {
+    	 localforage.setItem('eval/xq',this.xq);
+    	 next()
+     },
+    	  
   created:function(){
       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(){
     this.destroyed=true;
diff --git a/src/vue-poc/features/history/taskhistory.vue b/src/vue-poc/features/history/taskhistory.vue
index c1bd608..019b37b 100644
--- a/src/vue-poc/features/history/taskhistory.vue
+++ b/src/vue-poc/features/history/taskhistory.vue
@@ -64,8 +64,8 @@
       q: null,
       headers: [   
         { text: 'Id', value: 'id' },
-        { text: 'Task', value: 'task' },
         { text: 'Created', value: 'created' },
+        { text: 'Task', value: 'task' },
         { text: 'Summary', value: 'summary' },
         { text: 'Params', value: 'arity' }
         ]
diff --git a/src/vue-poc/features/model/entity.vue b/src/vue-poc/features/model/entity.vue
index ea6f3cf..a28e0ed 100644
--- a/src/vue-poc/features/model/entity.vue
+++ b/src/vue-poc/features/model/entity.vue
@@ -36,28 +36,30 @@
 	 </template>
 	 
      <template v-slot:default="props">
-        <v-row align-content="start"  >
-          <v-col
-            v-for="item in props.items"
-            :key="item.name"           >
+        <v-row align-content="start" no-gutters >
+          <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>
-		           <router-link :to="{path:'entity/'+ item.name}">
-		            <v-avatar color="lime">
+		          
+		            <v-avatar tile color="lime" >
 		             <v-icon  >{{ item.iconclass }}</v-icon> 
-		            </v-avatar> {{ item.name }}
-		            </router-link>
+		            </v-avatar> {{ item.name }}	           
 		            </v-toolbar-title>
 		         </v-card-title>
-		         <v-spacer></v-spacer>
-		         <v-badge >
-			      <span slot="badge">{{ item.nfields }}</span>
-			    </v-badge>
           </v-toolbar>
           <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-col>
       </v-row>
@@ -82,7 +84,7 @@
   methods:{
     getItems(){
       this.loading=true
-      HTTP.get("data/entity",{params:{q:this.q}})
+      HTTP.get("data/entity",{params:{q:this.q, sort:'name'}})
       .then(r=>{
         this.loading=false
         //console.log(r.data)
diff --git a/src/vue-poc/models.gen.xqm b/src/vue-poc/models.gen.xqm
index a27510c..7f7fd43 100644
--- a/src/vue-poc/models.gen.xqm
+++ b/src/vue-poc/models.gen.xqm
@@ -1,5 +1,5 @@
 (: 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';
@@ -8,6 +8,7 @@ declare namespace ent='https://github.com/Quodatum/app-doc/entity';
 declare namespace h='urn:quodatum:vue-poc.history';
 declare namespace xqdoc='http://www.xqdoc.org/1.0';
 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 c='http://www.w3.org/ns/xproc-step';
           
@@ -734,6 +735,44 @@ hof:top-k-by(admin:logs(), string#1, 2)
        
        "views": map{ 
        '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{
diff --git a/src/vue-poc/router.js b/src/vue-poc/router.js
index 1dee459..77cd852 100644
--- a/src/vue-poc/router.js
+++ b/src/vue-poc/router.js
@@ -16,8 +16,27 @@ const router = new VueRouter({
   },
   routes: [
     { 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/>' }, 
     	children: [
 		    {path: '', redirect: 'item' },		
@@ -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/: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: '/search', component: Search, meta:{title:"Search"} },
     { 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: '/settings', component: { template: '<router-view/>' }
@@ -89,10 +105,10 @@ const router = new VueRouter({
     },
     
     { path: '/performance', component: { template: '<router-view/>' }
-    ,children: [
-		    	{ path: 'ping', component: Ping, meta:{title:"Ping"} },
-		        { path: 'dicetest', component: Dicetest, meta:{title: "Dice test"} }
-               ]
+	    ,children: [
+			    	{ path: 'ping', component: Ping, meta:{title:"Ping"} },
+			        { path: 'dicetest', component: Dicetest, meta:{title: "Dice test"} }
+	               ]
     },
     
     { path: '/server', component: { template: '<router-view/>' }
@@ -152,8 +168,7 @@ const router = new VueRouter({
     { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
     { 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"} },
     
@@ -170,13 +185,7 @@ const router = new VueRouter({
    
     { 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"} }
   ],
diff --git a/src/vue-poc/static/app-gen.js b/src/vue-poc/static/app-gen.js
index 99fc550..851af7d 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -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
 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(){
     return {timeline:Object}
   },
+  
   methods:{
     select(properties){
       this.$emit('select',properties.items);
@@ -777,6 +778,7 @@ Vue.component('vis-time-line',{template:`
         this.timeline.fit(true)
     }
   },
+  
   watch:{
 	  items(newItems){
 		  console.log("vis-time-line: new items:" + newItems.length)
@@ -786,8 +788,8 @@ Vue.component('vis-time-line',{template:`
 		  console.log("opts: ",newOpts)
 	  }
   },
+  
   mounted: function () {
-   
     var options = this.options;
     var groups = this.groups;
     var items = new vis.DataSet(this.items);
@@ -1212,7 +1214,8 @@ Vue.component('vue-ace',{template:`
           'settings',
           'minLines',
           'completer',
-          'snippets'
+          'snippets',
+          'placeholder'
           ],
   data () {
     return {
@@ -1223,9 +1226,9 @@ Vue.component('vue-ace',{template:`
           themeDark: "chaos",
           keybinding: "ace",
           fontsize: 16,
-          enableSnippets:true,
-          enableBasicAutocompletion:true,
-          enableLiveAutocompletion:true
+          enableSnippets: true,
+          enableBasicAutocompletion: true,
+          enableLiveAutocompletion: true
           },
           
       annots:{
@@ -1293,10 +1296,10 @@ Vue.component('vue-ace',{template:`
     },
     
     applySettings(aceSettings){
-      var theme=this.$vuetify.theme.dark?aceSettings.themeDark:aceSettings.theme;
-      this.editor.setTheme(`ace/theme/${theme}`)
+      this.editor.setTheme()
       //this.editor.setKeyboardHandler(`ace/keyboard//${aceSettings.keybinding}`)
       this.editor.setFontSize(parseInt(aceSettings.fontsize,10))
+      this.editor.setOption("placeholder", this.placeholder)
       this.editor.setOptions({ 
                           enableSnippets : aceSettings.enableSnippets,
                           enableBasicAutocompletion : aceSettings.enableBasicAutocompletion,
@@ -1305,6 +1308,7 @@ Vue.component('vue-ace',{template:`
                           useSoftTabs: true
                           });
     }
+    
   },
   
  
@@ -1362,6 +1366,9 @@ Vue.component('vue-ace',{template:`
       this.$emit('token', token);
     });
     
+    //this.editor.on("input", this.update);
+    //setTimeout(this.update, 100);
+    
     if(this.events){
       this.events.$on('eventFired', (cmd) => {
       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
 const Documentation=Vue.extend({template:` 
  <v-container fluid>
@@ -4014,7 +4057,7 @@ const Tabs=Vue.extend({template:`
 	    <v-card>
         <div style="height:200px" ref="ace" v-resize="onResize">
         <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>
         </div> 
       </v-card>
@@ -4246,7 +4289,7 @@ const Eval=Vue.extend({template:`
    </v-toolbar>
    <v-card-text>
     <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>
     <vp-job v-if="showJob" :job="job" :waiting="waiting" :job-state="jobState" :elapsed="elapsed"></vp-job>
      </v-card-text>
@@ -4270,7 +4313,7 @@ const Eval=Vue.extend({template:`
 
   data:  function(){
     return {
-      xq: '(: type your XQuery :)\n',
+      xq: null,
       result: '',
       done: false,
       elapsed: null,
@@ -4392,6 +4435,7 @@ const Eval=Vue.extend({template:`
   },
   computed: { 
   },
+  
   beforeRouteEnter (to, from, next) {
     Settings.getItem('settings/ace')
     .then( v =>{
@@ -4401,9 +4445,15 @@ const Eval=Vue.extend({template:`
         vm.aceSettings = v;
         })})
      },
+     
+     beforeRouteLeave (to, from, next) {
+    	 localforage.setItem('eval/xq',this.xq);
+    	 next()
+     },
+    	  
   created:function(){
       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(){
     this.destroyed=true;
@@ -4652,8 +4702,8 @@ const Taskhistory=Vue.extend({template:`
       q: null,
       headers: [   
         { text: 'Id', value: 'id' },
-        { text: 'Task', value: 'task' },
         { text: 'Created', value: 'created' },
+        { text: 'Task', value: 'task' },
         { text: 'Summary', value: 'summary' },
         { text: 'Params', value: 'arity' }
         ]
@@ -6005,26 +6055,28 @@ const Entity=Vue.extend({template:`
 	 </template>
 	 
      <template v-slot:default="props">
-        <v-row align-content="start">
-          <v-col v-for="item in props.items" :key="item.name">
+        <v-row align-content="start" no-gutters>
+          <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>
-		           <router-link :to="{path:'entity/'+ item.name}">
-		            <v-avatar color="lime">
+		          
+		            <v-avatar tile color="lime">
 		             <v-icon>{{ item.iconclass }}</v-icon> 
-		            </v-avatar> {{ item.name }}
-		            </router-link>
+		            </v-avatar> {{ item.name }}	           
 		            </v-toolbar-title>
 		         
-		         <v-spacer></v-spacer>
-		         <v-badge>
-			      <span slot="badge">{{ item.nfields }}</span>
-			    </v-badge>
           </v-toolbar>
           <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-col>
       </v-row>
@@ -6048,7 +6100,7 @@ const Entity=Vue.extend({template:`
   methods:{
     getItems(){
       this.loading=true
-      HTTP.get("data/entity",{params:{q:this.q}})
+      HTTP.get("data/entity",{params:{q:this.q, sort:'name'}})
       .then(r=>{
         this.loading=false
         //console.log(r.data)
@@ -8754,8 +8806,27 @@ const router = new VueRouter({
   },
   routes: [
     { 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/>' }, 
     	children: [
 		    {path: '', redirect: 'item' },		
@@ -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/: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: '/search', component: Search, meta:{title:"Search"} },
     { 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: '/settings', component: { template: '<router-view/>' }
@@ -8827,10 +8895,10 @@ const router = new VueRouter({
     },
     
     { path: '/performance', component: { template: '<router-view/>' }
-    ,children: [
-		    	{ path: 'ping', component: Ping, meta:{title:"Ping"} },
-		        { path: 'dicetest', component: Dicetest, meta:{title: "Dice test"} }
-               ]
+	    ,children: [
+			    	{ path: 'ping', component: Ping, meta:{title:"Ping"} },
+			        { path: 'dicetest', component: Dicetest, meta:{title: "Dice test"} }
+	               ]
     },
     
     { path: '/server', component: { template: '<router-view/>' }
@@ -8890,8 +8958,7 @@ const router = new VueRouter({
     { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
     { 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"} },
     
@@ -8908,13 +8975,7 @@ const router = new VueRouter({
    
     { 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"} }
   ],
@@ -8974,7 +9035,7 @@ const Vuepoc=Vue.extend({template:`
     <router-view name="helper" class="view ma-3"></router-view>
  </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-toolbar-title class="hidden-sm-and-down">    
     {{$route.meta.title}}</v-toolbar-title>
@@ -9037,7 +9098,7 @@ const Vuepoc=Vue.extend({template:`
             </v-list-item>
         </v-list>
      </v-menu>
-      
+     
 </v-app-bar>
  
  <v-main> 
@@ -9048,7 +9109,9 @@ const Vuepoc=Vue.extend({template:`
       <router-view class="view ma-3"></router-view>
       </transition>
   </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>
  `,
       
@@ -9066,6 +9129,7 @@ const Vuepoc=Vue.extend({template:`
     drawer: true,
     showNotifications: false,
     mini: false,
+    fab: false,
     alert: {show:false,msg:"Hello"},
     frmfav: false,
   
@@ -9099,6 +9163,7 @@ const Vuepoc=Vue.extend({template:`
           children: [
          {href: '/database', text: 'Databases',icon: 'developer_mode' },
          {href: '/files', text: 'File system',icon: 'folder' },
+         {href: '/components', text: 'Component library',icon: 'engineering' },
          {href: '/documentation', text: 'Documentation',icon: 'library_books' },   
          {href: '/history/files',text: 'history',icon: 'history'}
         ]},
@@ -9202,7 +9267,15 @@ const Vuepoc=Vue.extend({template:`
       showAlert(msg){
         this.alert.msg=format(new Date())+" "+ msg
         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: {
 	    showNotifications: function (val) {