diff --git a/src/vue-poc/api.xqm b/src/vue-poc/api.xqm
index 6923a31..cb877d7 100644
--- a/src/vue-poc/api.xqm
+++ b/src/vue-poc/api.xqm
@@ -50,6 +50,22 @@ function vue-api:search($q )
  return dice:response($items,$entity,web:dice())
 };
 
+(:~
+ : Returns data results
+ :)
+declare
+%rest:path("/vue-poc/api/data/{$entity}")
+%rest:query-param("q", "{$q}")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:data($entity as xs:string,$q )   
+{
+  let $entity:=$entity:list($entity)
+  let $items:=$entity("data")()
+  
+ return dice:response($items,$entity,web:dice())
+};
+
 (:~
  : Returns test list for select.
  :)
diff --git a/src/vue-poc/app.vue b/src/vue-poc/app.vue
index 5521056..9b14bef 100644
--- a/src/vue-poc/app.vue
+++ b/src/vue-poc/app.vue
@@ -34,7 +34,7 @@
           </v-list-tile>
 
       </v-list>
-    <qd-navlist  :items="items"></qd-navlist>
+    <qd-navlist  :items="items" :mini="mini"></qd-navlist>
  </v-navigation-drawer>
   
  <v-toolbar class="indigo" app dark >
@@ -43,19 +43,7 @@
   <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
  
   <v-spacer></v-spacer>
-   <v-select
-              placeholder="Search..." prepend-icon="search"
-              autocomplete
-              :loading="loading"
-              combobox
-              clearable
-              cache-items
-              :items="items2"
-              @keyup.enter="goSearch"
-              :search-input.sync="si" 
-              v-model="q"
-            ></v-select>
-            
+  <qd-search></qd-search>
   
   <v-spacer></v-spacer>
   
@@ -75,13 +63,25 @@
             
           </v-list>
       </v-menu>
-      <qd-fullscreen></qd-fullscreen>
        <v-btn  @click.stop="showNotifications = ! showNotifications" icon flat title="Notifications">
        <v-badge  overlap color="orange">
       <span slot="badge" v-if=" $notification.unseen" >{{ $notification.unseen }}</span>
        <v-icon>notifications</v-icon>
        </v-badge>
    </v-btn>
+    <v-menu bottom left min-width="300px">
+            <v-btn icon slot="activator" dark>
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+            <v-list>
+              <v-list-tile  >
+                <v-list-tile-title><qd-fullscreen></qd-fullscreen> Full screen</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile  >
+                <v-list-tile-title><v-switch label="Dark theme" v-model="dark"></v-switch></v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
 </v-toolbar>
  
  <v-content> 
@@ -99,8 +99,7 @@
 <script>{
   router,
   data:function(){return {
-    q: "",
-    loading: false,
+
     searchItems:[],
     si: '',
     items2:["todo","set","search"],
@@ -132,6 +131,7 @@
         children: [
        {href: '/database', text: 'Databases',icon: 'developer_mode' },
        {href: '/files', text: 'File system',icon: 'folder' },
+    
       {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
@@ -139,6 +139,7 @@
         text: 'Models' ,
         model: false,
         children: [
+          {href: '/documentation', text: 'Documentation',icon: 'library_books' },
           {href: '/namespace', text: 'Namespaces',icon: 'label' },
           {href: '/entity', text: 'Entities',icon: 'redeem' },
       ]},
@@ -177,6 +178,7 @@
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
       {href: '/svg',text: 'SVG',icon: 'extension'},
       {href: '/form',text: 'Forms',icon: 'format_list_bulleted'  },
+      {href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted'  },
       {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
       ]},
       
@@ -186,21 +188,12 @@
 
   }},
   methods: {
-    querySelections (v) {
-      this.loading = true
-      // Simulated ajax query
-      setTimeout(() => {
-        this.items2 = ["aa","bb",this.si],
-        this.loading = false
-      }, 500)
-    },
+   
 
       session(){
         this.$router.push({path: '/session'})
       },
-      goSearch(){
-        this.$router.push({path: '/search',query: { q: this.q }})
-      },
+      
       logout(){
         HTTP.get("logout").then(r=>{
           alert("logout")
@@ -219,13 +212,7 @@
 	      console.log("showNotifications",val);
 	      if(!val)this.$notification.unseen=0;
 	    },
-	    search (val) {
-	      val && this.querySelections(val)
-	    },
-	    si:function(val){
-	      console.log("si: ",val);
-	      this.querySelections();
-	    }
+	   
     },
     
   created(){
diff --git a/src/vue-poc/components/qd-navlist.vue b/src/vue-poc/components/qd-navlist.vue
index 659e444..3995472 100644
--- a/src/vue-poc/components/qd-navlist.vue
+++ b/src/vue-poc/components/qd-navlist.vue
@@ -16,7 +16,7 @@ for nav drawer
               </v-list-tile-content>
             </v-list-tile>
             
-            <v-list-tile v-for="subItem in item.children" v-bind:key="subItem.text"
+            <v-list-tile v-if="!mini" v-for="subItem in item.children" v-bind:key="subItem.text"
              :prepend-icon="subItem.icon" 
              :to="subItem.href"  avatar ripple >
               <v-list-tile-avatar>
@@ -42,6 +42,6 @@ for nav drawer
 </template>
 
 <script>{
-  props: ['items']
+  props: ['items','mini']
 }
 </script>
diff --git a/src/vue-poc/components/qd-search.vue b/src/vue-poc/components/qd-search.vue
new file mode 100644
index 0000000..14dee72
--- /dev/null
+++ b/src/vue-poc/components/qd-search.vue
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- 
+ search
+ -->
+<template id="qd-search">
+  <v-select
+              placeholder="Search..." prepend-icon="search"
+              autocomplete
+              :loading="loading"
+              combobox
+              clearable
+              cache-items
+              :items="items2"
+              @keyup.enter="goSearch"
+              :search-input.sync="si" 
+              v-model="q"
+            ></v-select>
+</template>
+
+<script>{
+  data:function(){return {
+    q: "",
+    loading: false,
+    searchItems:[],
+    si: '',
+    items2:["todo","set","search"]
+  }
+  },
+  methods: {
+    querySelections (v) {
+      this.loading = true
+      // Simulated ajax query
+      setTimeout(() => {
+        this.items2 = ["aa","bb",this.si],
+        this.loading = false
+      }, 500)
+    },
+    
+    goSearch(){
+        this.$router.push({path: '/search',query: { q: this.q }})
+      },
+  },
+  watch: {
+    si:function(val){
+      console.log("si: ",val);
+      this.querySelections();
+    }
+  }
+}</script>
diff --git a/src/vue-poc/components/qd-table.vue b/src/vue-poc/components/qd-table.vue
index 809b65a..b96796d 100644
--- a/src/vue-poc/components/qd-table.vue
+++ b/src/vue-poc/components/qd-table.vue
@@ -23,7 +23,7 @@
       class="elevation-1"
       no-data-text="No users found @todo"
     >
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <slot></slot>
     </template>
   </v-data-table>
diff --git a/src/vue-poc/components/vp-favorite.vue b/src/vue-poc/components/vp-favorite.vue
index 13daa7c..1c407f5 100644
--- a/src/vue-poc/components/vp-favorite.vue
+++ b/src/vue-poc/components/vp-favorite.vue
@@ -3,16 +3,15 @@
 display button that invokes a  save favorite form
  -->
 <template id="vp-favorite">
-  <v-menu
+  <v-menu :close-on-click="false"
       offset-x
       :close-on-content-click="false"
       :nudge-width="200"
       v-model="frmfav"
     >
-      <v-btn slot="activator" @click="set(!frmfav)" icon flat title="Bookmark this page">
+      <v-btn slot="activator" @click.stop="set(!frmfav)" icon flat title="Bookmark this page">
        <v-icon>star_border</v-icon>
        </v-btn>
-
        <v-card style="width:400px;">
             <v-toolbar class="green"> 
         <v-card-title>
diff --git a/src/vue-poc/components/vp-filepick.vue b/src/vue-poc/components/vp-filepick.vue
new file mode 100644
index 0000000..6342d98
--- /dev/null
+++ b/src/vue-poc/components/vp-filepick.vue
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- 
+ Files picker
+ -->
+<template id="vp-filepicker">
+ <v-layout>
+		<v-flex>
+		<slot name="body"></slot>
+		</v-flex>
+		
+		<v-flex v-if="show" xs4 grey lighten-3>
+		<slot name="aside"></slot>
+		</v-flex>
+</v-layout>
+</template>
+
+<script>{
+  props: ['show'],
+  created:function(){
+      console.log("vp-filepicker");
+    }
+}
+</script>
diff --git a/src/vue-poc/components/vp-notifications.vue b/src/vue-poc/components/vp-notifications.vue
index f2c673b..71c9aec 100644
--- a/src/vue-poc/components/vp-notifications.vue
+++ b/src/vue-poc/components/vp-notifications.vue
@@ -26,7 +26,7 @@
                 <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
               </v-list-tile-content>
               <v-list-tile-action>
-               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
+               <v-list-tile-action-text>#{{ msg.index }}</v-list-tile-action-text>
               </v-list-tile-action>
             </v-list-tile>
            </template>
diff --git a/src/vue-poc/core.js b/src/vue-poc/core.js
index b94f9b3..d50f133 100644
--- a/src/vue-poc/core.js
+++ b/src/vue-poc/core.js
@@ -100,6 +100,16 @@ localforage.config({
 // https://vuejs.org/v2/guide/state-management.html
 var settings = {
     debug: false,
+    defaults:{
+      "settings/ace": {
+        theme: "github",
+        keybinding: "ace",
+        fontsize: 16,
+        enableSnippets:true,
+        enableBasicAutocompletion:true,
+        enableLiveAutocompletion:true
+        },
+    },
     getItem (key) {
       if (this.debug) console.log('getItem',key);
       return localforage.getItem(key)
@@ -209,6 +219,9 @@ Vue.use(Fullscreen);
 //Vue.component('v-map', Vue2Leaflet.Map);
 //Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
 //Vue.component('v-marker', Vue2Leaflet.Marker);
-
+//function install (Vue) {
+//  Vue.component('form-schema', window["vue-json-schema"].default);
+//};
+//Vue.use({ install: install });
 Vue.use(Vuetify);
 new Vuepoc().$mount('#app')
diff --git a/src/vue-poc/features/adminlog/logs.vue b/src/vue-poc/features/adminlog/logs.vue
index b353611..a769653 100644
--- a/src/vue-poc/features/adminlog/logs.vue
+++ b/src/vue-poc/features/adminlog/logs.vue
@@ -29,7 +29,7 @@
       no-data-text="No logs found"
       v-bind:pagination.sync="pagination"
     >
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
       <td class="text-xs-right">{{ props.item.time }}</td>
       <td class="text-xs-right">{{ props.item.user }}</td>
       <td class="text-xs-right">{{ props.item.type }}</td>
diff --git a/src/vue-poc/features/brutusin.vue b/src/vue-poc/features/brutusin.vue
index 0c602ad..936e4b2 100644
--- a/src/vue-poc/features/brutusin.vue
+++ b/src/vue-poc/features/brutusin.vue
@@ -2,6 +2,7 @@
 <template id="brutusin">
  <v-container fluid>
      <v-card>
+     <v-card-title>vue-form-generator</v-card-title>
        <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
     </v-card>
  </v-container>
diff --git a/src/vue-poc/features/collection/collections.xqm b/src/vue-poc/features/collection/collections.xqm
index a0d32d9..457d099 100644
--- a/src/vue-poc/features/collection/collections.xqm
+++ b/src/vue-poc/features/collection/collections.xqm
@@ -26,12 +26,25 @@ function vue-api:history( )
  return dice:response($items,$entity,web:dice())
 };
 
+(:~
+ : xqdoc list 
+ :)
+declare
+%rest:GET %rest:path("/vue-poc/api/xqdoc")
+%rest:produces("application/json")
+%output:method("json")   
+function vue-api:xqdoc( )   
+{
+ let $entity:=$entity:list("xqdoc")
+  let $items:= $entity("data")()
+ return dice:response($items,$entity,web:dice())
+};
 
 (:~
  : Returns folder info.
  :)
 declare
-%rest:path("/vue-poc/api/collection")
+%rest:GET %rest:path("/vue-poc/api/collection")
 %rest:query-param("url", "{$url}")
 %rest:query-param("protocol", "{$protocol}","webfile")
 %rest:produces("application/json")
diff --git a/src/vue-poc/features/collection/files.vue b/src/vue-poc/features/collection/files.vue
index edae9e5..3887e16 100644
--- a/src/vue-poc/features/collection/files.vue
+++ b/src/vue-poc/features/collection/files.vue
@@ -124,7 +124,7 @@
    
 </v-card>
 <v-progress-linear v-if="busy" v-bind:indeterminate="true" height="2"></v-progress-linear>
- <v-navigation-drawer left absolute v-model="showInfo" :disable-route-watcher="true">
+ <v-navigation-drawer left app v-model="showInfo" :disable-route-watcher="true">
    <v-card flat tile> 
        <v-toolbar >
       <v-card-title >{{ selection[0] && selection[0].name }}</v-card-title>
diff --git a/src/vue-poc/features/form/formschema.vue b/src/vue-poc/features/form/formschema.vue
new file mode 100644
index 0000000..9abb8b1
--- /dev/null
+++ b/src/vue-poc/features/form/formschema.vue
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<template id="formsjson">
+ <v-container fluid>
+     <v-card>
+        <v-card-title>vue-json-schema@1.1.0 https://github.com/formschema/native</v-card-title>
+       <form-schema  ref="formSchema" :schema="schema" v-model="model" >
+              <v-btn color="success" @click.stop="submit">Subscribe</v-btn>
+  </form-schema>
+    </v-card>
+ </v-container>
+</template>
+
+<script>{
+
+  components: { 
+    "form-schema": window["vue-json-schema"].default
+    },
+ 
+  data: () => ({
+    schema: {
+      "$schema": "http://json-schema.org/draft-04/schema#",
+      "type": "object",
+      "title": "Newsletter Subscription",
+      "properties": {
+          "name": {
+              "type": "string", 
+              "minLength": 8, 
+              "maxLength": 80, 
+              "attrs": {
+                "placeholder": "Full Name",
+                "title": "Please enter your full name"
+              }
+          },
+          "email": {
+              "type": "string", 
+              "maxLength": 120, 
+              "attrs": {
+                  "type": "email",
+                  "placeholder": "Email"
+              }
+          },
+          "lists": {
+              "type": "string",
+              "enum": ["Daily New", "Promotion"]
+          },
+          "arrayInput": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+      },
+      "additionalProperties": false,
+      "required": ["name", "email", "lists"]
+  },
+    model: {}
+  }),
+  methods: {
+    submit (e) {
+      // this.model contains the valid data according your JSON Schema.
+      // You can submit your model to the server here
+      console.log(this.model);
+      alert("hi")
+    }
+  }
+}
+</script>
diff --git a/src/vue-poc/features/images/missing.jpg b/src/vue-poc/features/images/missing.jpg
new file mode 100644
index 0000000..f18559c
Binary files /dev/null and b/src/vue-poc/features/images/missing.jpg differ
diff --git a/src/vue-poc/features/job/jobs.vue b/src/vue-poc/features/job/jobs.vue
index a7e90b7..931a936 100644
--- a/src/vue-poc/features/job/jobs.vue
+++ b/src/vue-poc/features/job/jobs.vue
@@ -37,7 +37,7 @@
       class="elevation-1"
       no-data-text="No Jobs currently running"
     >
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <td class="vtop">
         <v-checkbox
           primary
diff --git a/src/vue-poc/features/model/documentation.vue b/src/vue-poc/features/model/documentation.vue
new file mode 100644
index 0000000..bfa2ee0
--- /dev/null
+++ b/src/vue-poc/features/model/documentation.vue
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<template id="documentation">
+ <v-container fluid>
+    <v-list>
+            <v-list-tile  v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar>
+              <v-list-tile-action>
+               <v-chip v-text="item.protocol">Example Chip</v-chip>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title @click="doEdit(item)" v-text="item.url"></v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+   </v-list>
+ </v-container>
+</template>
+
+<script>{
+  data:  function(){
+    return {
+      message: 'Hello Vue.js!',
+      items:[]
+      }
+  },
+  methods:{
+    get() {
+      HTTP.get('xqdoc')
+      .then((res) => {
+        this.items = res.data.items;
+        console.log("items",this.items)
+      });
+    },
+    doEdit(item){
+      console.log("history: ",item)
+        router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol  }})
+    }
+  },
+  created:function(){
+    this.get()
+    console.log("history")
+  }
+}
+</script>
diff --git a/src/vue-poc/features/model/entity.vue b/src/vue-poc/features/model/entity.vue
index b12c3c4..f7fbd90 100644
--- a/src/vue-poc/features/model/entity.vue
+++ b/src/vue-poc/features/model/entity.vue
@@ -8,6 +8,7 @@
 	  :loading="loading"
       :disabled="loading"
 	 >Refresh</v-btn>
+	 Text
 	 </v-toolbar>
 
   <v-container fluid grid-list-md>
@@ -16,6 +17,7 @@
       content-tag="v-layout"
       row
       wrap
+      :loading="loading"
       :items="items"
       :rows-per-page-items="rowsPerPageItems"
       :pagination.sync="pagination"
@@ -30,25 +32,24 @@
         md4
         lg3
       >
-        <v-card>
-       
-          <v-card-title>
-           <router-link :to="{path:'entity/'+ props.item.name}">
-            <h4>
-            <v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
-            </h4>
-            </router-link>
-         </v-card-title>
-          
+        <v-card hover="true" active-class="default-class qd-active" >
+        
+          <v-toolbar  color="amber">
+		          <v-card-title >
+		           <router-link :to="{path:'entity/'+ props.item.name}">
+		            <h3>
+		            <v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
+		            </h3>
+		            </router-link>
+		         </v-card-title>
+          </v-toolbar>
           <v-card-text>{{ props.item.description }}</<v-card-text>
-          <v-card-actions>
-          <v-list dense>
-            <v-list-tile>
-              <v-list-tile-content>Fields:</v-list-tile-content>
-              <v-list-tile-content class="align-end">{{ props.item.nfields }}</v-list-tile-content>
-            </v-list-tile>
-          </v-list>
-          </v-card-actions>
+          <v-card-text>
+           <v-badge color="red">
+			      <span slot="badge">{{ props.item.nfields }}</span>
+			      Fields
+			    </v-badge>
+          </v-card-text>
         </v-card>
       </v-flex>
     </v-data-iterator>
diff --git a/src/vue-poc/features/namespace.vue b/src/vue-poc/features/namespace.vue
index c890be1..0467ebc 100644
--- a/src/vue-poc/features/namespace.vue
+++ b/src/vue-poc/features/namespace.vue
@@ -1,18 +1,89 @@
 <!DOCTYPE html>
 <template id="namespace">
- <v-container fluid>
-namespaces
+ <v-container fluid  grid-list-md>
+<v-toolbar >
+   <v-toolbar-title>Namespaces</v-toolbar-title>
+   <v-spacer></v-spacer>
+   <v-btn @click="load"
+    :loading="loading"
+      :disabled="loading"
+   >Refresh</v-btn>
+   Text
+   </v-toolbar>
+     <v-data-iterator
+      content-tag="v-layout"
+      row
+      wrap
+      :loading="loading"
+      :items="items"
+      :rows-per-page-items="rowsPerPageItems"
+      :pagination.sync="pagination"
+      select-all 
+      :value="selected"
+    >
+      <v-flex
+        slot="item"
+        slot-scope="props"
+        xs12
+        sm6
+        md4
+        lg3
+      >
+        <v-card hover="true" active-class="default-class qd-active" height="200px">
+        
+          <v-toolbar  color="amber">
+              <v-card-title >
+               <router-link :to="{path:'entity/'+ props.item.name}">
+                <h3>
+                <v-icon>star</v-icon> {{ props.item.xmlns }}
+                </h3>
+                </router-link>
+             </v-card-title>
+          </v-toolbar>
+          <v-card-text>{{ props.item.description }}</<v-card-text>
+          <v-card-text>
+           <v-badge color="red">
+            <span slot="badge">{{ props.item.prefix }}</span>
+            Fields
+          </v-badge>
+          </v-card-text>
+        </v-card>
+      </v-flex>
+    </v-data-iterator>
  </v-container>
 </template>
 
 <script>{
   data:  function(){
     return {
+      items: [],
+      loading: false,
+      q: "",
       message: 'bad route!'
       }
   },
+  methods: {
+    load(){
+    
+      this.loading= true
+      HTTP.get("data/namespace",{params:{}})
+      .then(r=>{
+        this.items= r.data.items
+        this.q= null
+        this.loading= false
+        })
+        .catch(error=> {
+          console.log(error);
+          this.loading= false
+          alert("Get query error"+url)
+        });
+      
+    },
+  },
   created:function(){
-    console.log("notfound",this.$route.query.q)
+    this.q=this.$route.query.q || this.q;
+    this.load();
+    console.log("namespaces")
   }
 }
 </script>
diff --git a/src/vue-poc/features/ping/ping.vue b/src/vue-poc/features/ping/ping.vue
index 9d46dab..b07e4da 100644
--- a/src/vue-poc/features/ping/ping.vue
+++ b/src/vue-poc/features/ping/ping.vue
@@ -9,7 +9,7 @@
  </v-toolbar>
  <v-card-text>
   <p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
-  <p>Counter:{{counter}}</p>
+  <h3>Counter: <v-chip color="amber" text-color="white">{{counter}}</v-chip></h3>
   <table class="table">
       <thead> 
         <tr>
diff --git a/src/vue-poc/features/repository.vue b/src/vue-poc/features/repository.vue
index e55ffa0..6cb4ed6 100644
--- a/src/vue-poc/features/repository.vue
+++ b/src/vue-poc/features/repository.vue
@@ -21,7 +21,7 @@
       class="elevation-1"
       no-data-text="No repo found @todo"
     >
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <td class="vtop">
         <v-checkbox
           primary
diff --git a/src/vue-poc/features/session.vue b/src/vue-poc/features/session.vue
index 14a82c0..bf1993f 100644
--- a/src/vue-poc/features/session.vue
+++ b/src/vue-poc/features/session.vue
@@ -12,7 +12,7 @@
     item-value="suburb" 
     @selected="handleSelected"
      strict="Unknown">
-<template slot="item" scope="data">
+<template slot="item" slot-scope="data">
       <v-list-tile-content>
         <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
         <template v-if="!data.item.generatedItem">
diff --git a/src/vue-poc/features/svg2.vue.x b/src/vue-poc/features/svg2.vue.x
new file mode 100644
index 0000000..9b435e6
--- /dev/null
+++ b/src/vue-poc/features/svg2.vue.x
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<template id="svg2">
+ <v-container fluid>
+<!-- UI controls that can are used to manipulate the display of the chart -->
+    
+    <div class="controls">
+      
+      <div>
+        <label>Chart width</label>
+        <input type="range" v-model="settings.width" min="0" max="1000" />
+      </div>
+     
+      <div>
+        <label>Stroke color</label>
+        <input type="color" v-model="settings.strokeColor" />
+      </div>
+      
+      <div>
+        <label>Search…</label>
+        <input type="text" v-model="search" />
+      </div>
+      
+      <button v-on:click="add">Add node</button>
+       
+      <div>
+        Selected: {{ selected }}
+      </div>
+    </div>
+
+    <!-- SVG that renders the chart based on the "width" and "height" setting from the Vue instance’s data object -->
+    
+    <svg v-bind:width="settings.width" v-bind:height="settings.height">
+    
+    <!-- In contrast to D3’s "select" methods, we define the graphical elements explicitely here and use the template syntax to loop through collections and bind properties such as "d" or "r" to those elements. -->
+    
+      <transition-group tag="g" name="line" >
+
+        <!-- Links are represented as paths -->
+        
+        <path v-for="link in links" class="link" v-bind:key="link.id" v-bind:d="link.d" v-bind:style="link.style"></path>
+        
+      </transition-group>
+
+
+      <!-- We can now also use events to elements that will call respective methods on the Vue instance --> 
+      
+      <transition-group tag="g" name="list">
+        <g class="node" v-on:click="select(index, node)" v-for="(node, index) in nodes" v-bind:key="node.id" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
+
+          <!-- Circles for each node -->  
+
+          <circle v-bind:r="node.r" v-bind:style="{'fill': index == selected ? '#ff0000' : '#bfbfbf'}"></circle>
+
+          <!-- Finally, text labels -->
+
+          <text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>
+
+        </g>
+      </transition-group>
+    </svg>
+ </v-container>
+</template>
+
+<script>{
+  data: function() {
+    return {
+      csv: null,
+      selected: null,
+      search: "force",
+      settings: {
+        strokeColor: "#19B5FF",
+        width: 960,
+        height: 2000
+      }
+    };
+  },
+  mounted: function() {
+    var that = this;
+
+    d3.csv("flare.csv",
+      function(error, data) {
+        if (error) throw error;
+
+        // Load the CSV data
+        // After the CSV has been loaded, the computed properties will automatically re-compute (root, tree, and then nodes & links…)
+      
+        that.csv = data;
+      }
+    );
+  },
+
+  computed: {
+    
+    
+    // once we have the CSV loaded, the "root" will be calculated
+    
+    root: function() {
+      
+      var that = this;
+
+      if (this.csv) {
+        var stratify = d3.stratify().parentId(function(d) {
+          return d.id.substring(0, d.id.lastIndexOf("."));
+        });
+
+        // attach the tree to the Vue data object
+        return this.tree(
+          stratify(that.csv).sort(function(a, b) {
+            return a.height - b.height || a.id.localeCompare(b.id);
+          })
+        );
+      }
+    },
+    
+    // the "tree" is also a computed property so that it is always up to date when the width and height settings change
+    
+    tree: function() {
+      return d3
+        .cluster()
+        .size([this.settings.height, this.settings.width - 160]);
+    },
+    
+      // Instead of enter, update, exit, we mainly use computed properties and instead of "d3.data()" we can use array.map to create objects that hold class names, styles, and other attributes for each datum
+    
+    nodes: function() {
+      var that = this;
+      if (this.root) {
+        return this.root.descendants().map(function(d) {
+          return {
+            id: d.id,
+            r: 2.5,
+            className: "node" +
+              (d.children ? " node--internal" : " node--leaf"),
+            text: d.id.substring(d.id.lastIndexOf(".") + 1),
+            highlight: d.id.toLowerCase().indexOf(that.search.toLowerCase()) != -1 && that.search != "",
+            style: {
+              transform: "translate(" + d.y + "px," + d.x + "px)"
+            },
+            textpos: {
+              x: d.children ? -8 : 8,
+              y: 3
+            },
+            textStyle: {
+              textAnchor: d.children ? "end" : "start"
+            }
+          };
+        });
+      }
+    },
+    
+      // Instead of enter, update, exit, we mainly use computed properties and instead of "d3.data()" we can use array.map to create objects that hold class names, styles, and other attributes for each datum
+    
+    links: function() {
+      var that = this;
+
+      if (this.root) {
+
+        // here we’ll calculate the "d" attribute for each path that is then used in the template where we use "v-for" to loop through all of the links to create <path> elements
+
+        return this.root.descendants().slice(1).map(function(d) {
+          return {
+            id: d.id,
+            d: "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x,
+           
+            // here we could of course calculate colors depending on data but for now all links share the same color from the settings object that we can manipulate using UI controls and v-model
+            
+            style: {
+              stroke: that.settings.strokeColor
+            }
+          };
+        });
+      }
+    }
+  },
+  methods: {
+    add: function () {
+     this.csv.push({
+       id: "flare.physics.Dummy",
+       value: 0
+     })
+    },
+    select: function(index, node) {
+      this.selected = index;
+    }
+  }
+
+}
+</script>
diff --git a/src/vue-poc/features/tasks/taskdef.xml b/src/vue-poc/features/tasks/taskdef.xml
index 27f00a0..cec07fa 100644
--- a/src/vue-poc/features/tasks/taskdef.xml
+++ b/src/vue-poc/features/tasks/taskdef.xml
@@ -15,7 +15,12 @@
 		<title>XQdoc</title>
 		<description>Generate XQdoc as html</description>
 	</task>
-
+	
+<task name="tasks/xqdoc">
+    <title>XQdoc to db</title>
+    <description>Generate XQdoc to save</description>
+  </task>
+  
 	<task name="tasks/vuecompile">
 		<title>vue compile</title>
 	</task>
diff --git a/src/vue-poc/features/xslt/rq-xslt.xqm b/src/vue-poc/features/xslt/rq-xslt.xqm
index 9fd0532..a4927d7 100644
--- a/src/vue-poc/features/xslt/rq-xslt.xqm
+++ b/src/vue-poc/features/xslt/rq-xslt.xqm
@@ -19,13 +19,13 @@ function tx:xslt($xml,$xslt) {
    let $result:=try{
                 let $x:=fn:parse-xml($xml)
                 let $s:=fn:parse-xml($xslt)
-                let $t:=fn:trace($xml,"xml")
-                 let $t:=fn:trace($xslt,"xml")
-                let $r:=xslt:transform($x,$s)
+                 let $params:=map{}
+                 let $opts:=map{"cache":true()}
+                let $r:=xslt:transform-text($x,$s,$params,$opts)
                 return 
                 <json objects="json">
                    <rc>0</rc>
-                   <result>{fn:serialize($r)}</result>
+                   <result>{$r}</result>
                 </json>
                 } 
                 catch *{
diff --git a/src/vue-poc/models.gen.xqm b/src/vue-poc/models.gen.xqm
index 21f9cfd..6640022 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: 2018-02-12T09:42:15.78Z 
+ : auto generated from xml files in entities folder at: 2018-03-01T21:54:58.72Z 
  :)
 
 module namespace entity = 'quodatum.models.generated';
@@ -248,7 +248,7 @@ declare variable $entity:list:=map {
                  } },
        
       "data": function() as element(namespace)*
-       { collection("vuepoc")/namespaces/namespace
+       { collection("vue-poc")/namespaces/namespace
 	 },
        
        "views": map{ 
@@ -437,6 +437,34 @@ declare variable $entity:list:=map {
        
        "views": map{ 
        'filter': 'name'
+       }
+   },
+  "xqdoc": map{
+     "name": "xqdoc",
+     "description": "XQuery documentation set ",
+     "access": map{ 
+       "root": function($_ as element()) as xs:string {$_/@root },
+       "time": function($_ as element()) as xs:string {$_/@time } },
+    
+     "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{ 
+           "root": function($_ as element()) as element(root)? {
+            (: xs:string :)
+                        fn:data($_/@root)!element root {  .} 
+                 },
+           "time": function($_ as element()) as element(time)? {
+            (: xs:string :)
+                        fn:data($_/@time)!element time {  .} 
+                 } },
+       
+      "data": function() as element(entry)*
+       { () },
+       
+       "views": map{ 
+       
        }
    }
 };
diff --git a/src/vue-poc/models/namespace.xml b/src/vue-poc/models/namespace.xml
index cea38cb..7229b70 100644
--- a/src/vue-poc/models/namespace.xml
+++ b/src/vue-poc/models/namespace.xml
@@ -19,6 +19,6 @@
         <view name="filter">xmlns description</view>
     </views>
 	<iconclass>label</iconclass>
-	<data type="element(namespace)">collection("vuepoc")/namespaces/namespace
+	<data type="element(namespace)">collection("vue-poc")/namespaces/namespace
 	</data>
 </entity>
\ No newline at end of file
diff --git a/src/vue-poc/models/xqdoc.xml b/src/vue-poc/models/xqdoc.xml
new file mode 100644
index 0000000..fc7c12a
--- /dev/null
+++ b/src/vue-poc/models/xqdoc.xml
@@ -0,0 +1,18 @@
+<entity name="xqdoc" xmlns="https://github.com/Quodatum/app-doc/entity">
+	<description>XQuery documentation set </description>
+
+	<fields>
+		<field name="time" type="xs:string">
+			<description>time of generation</description>
+			<xpath>@time</xpath>
+		</field>
+		<field name="root" type="xs:string">
+			<description>root folder to scan</description>
+			<xpath>@root</xpath>
+		</field>
+	</fields>
+	<views>
+	</views>
+	<iconclass>fa fa-calendar</iconclass>
+	<data type="element(entry)">()</data>
+</entity>
\ No newline at end of file
diff --git a/src/vue-poc/router.js b/src/vue-poc/router.js
index 966a9f5..554ab4b 100644
--- a/src/vue-poc/router.js
+++ b/src/vue-poc/router.js
@@ -26,6 +26,7 @@ const router = new VueRouter({
     { path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
     { path: '/images/people', component: People, meta:{title:"Image people"} },
     
+    { path: '/documentation', component: Documentation, meta:{title:"documentation"} },
     { path: '/entity', component: Entity, meta:{title:"Entities"} },
     { path: '/namespace', component: Namespace, meta:{title:"Namespaces"} },
     { path: '/select', component: Select, meta:{title:"Select"} },
@@ -43,6 +44,7 @@ const router = new VueRouter({
     { path: '/history', component: History, meta:{title:"File History"} },
     { path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
     { path: '/svg', component: Svg, meta:{title:"SVG"} },
+   /* { path: '/svg2', component: Svg2, meta:{title:"SVG2"} }, */
     { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
     { path: '/validate', component: Validate, meta:{title:"Validate"} },
     { path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
@@ -56,7 +58,8 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/map', component: Map,meta:{title:"map"} },
-    { path: '/form', component: Brutusin,meta:{title:"Form demo"} },
+    { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
+    { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { 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 4bf03eb..1a32610 100644
--- a/src/vue-poc/static/app-gen.js
+++ b/src/vue-poc/static/app-gen.js
@@ -1,4 +1,4 @@
-// generated 2018-02-15T22:49:15.318Z
+// generated 2018-03-04T18:03:42.736Z
 
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-confirm.vue
 Vue.component('qd-confirm',{template:` 
@@ -72,7 +72,7 @@ Vue.component('qd-navlist',{template:`
               </v-list-tile-content>
             </v-list-tile>
             
-            <v-list-tile v-for="subItem in item.children" v-bind:key="subItem.text" :prepend-icon="subItem.icon" :to="subItem.href" avatar="" ripple="">
+            <v-list-tile v-if="!mini" v-for="subItem in item.children" v-bind:key="subItem.text" :prepend-icon="subItem.icon" :to="subItem.href" avatar="" ripple="">
               <v-list-tile-avatar>
 		             <v-icon>{{ subItem.icon }}</v-icon>
 		          </v-list-tile-avatar>
@@ -95,7 +95,7 @@ Vue.component('qd-navlist',{template:`
         </v-list>
  `,
       
-  props: ['items']
+  props: ['items','mini']
 }
 
       );
@@ -121,6 +121,42 @@ Vue.component('qd-panel',{template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-search.vue
+Vue.component('qd-search',{template:` 
+  <v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select>
+ `,
+      
+  data:function(){return {
+    q: "",
+    loading: false,
+    searchItems:[],
+    si: '',
+    items2:["todo","set","search"]
+  }
+  },
+  methods: {
+    querySelections (v) {
+      this.loading = true
+      // Simulated ajax query
+      setTimeout(() => {
+        this.items2 = ["aa","bb",this.si],
+        this.loading = false
+      }, 500)
+    },
+    
+    goSearch(){
+        this.$router.push({path: '/search',query: { q: this.q }})
+      },
+  },
+  watch: {
+    si:function(val){
+      console.log("si: ",val);
+      this.querySelections();
+    }
+  }
+}
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/qd-table.vue
 Vue.component('qd-table',{template:` 
  <v-container fluid="">
@@ -131,7 +167,7 @@ Vue.component('qd-table',{template:`
       <v-btn @click="getData">Refresh</v-btn>   
     </v-toolbar>
 <v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No users found @todo">
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <slot></slot>
     </template>
   </v-data-table>
@@ -212,11 +248,10 @@ Vue.component('vis-time-line',{template:`
       
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-favorite.vue
 Vue.component('vp-favorite',{template:` 
-  <v-menu offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmfav">
-      <v-btn slot="activator" @click="set(!frmfav)" icon="" flat="" title="Bookmark this page">
+  <v-menu :close-on-click="false" offset-x="" :close-on-content-click="false" :nudge-width="200" v-model="frmfav">
+      <v-btn slot="activator" @click.stop="set(!frmfav)" icon="" flat="" title="Bookmark this page">
        <v-icon>star_border</v-icon>
        </v-btn>
-
        <v-card style="width:400px;">
             <v-toolbar class="green"> 
         <v-card-title>
@@ -264,6 +299,27 @@ Vue.component('vp-favorite',{template:`
 }
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-filepick.vue
+Vue.component('vp-filepicker',{template:` 
+ <v-layout>
+		<v-flex>
+		<slot name="body"></slot>
+		</v-flex>
+		
+		<v-flex v-if="show" xs4="" grey="" lighten-3="">
+		<slot name="aside"></slot>
+		</v-flex>
+</v-layout>
+ `,
+      
+  props: ['show'],
+  created:function(){
+      console.log("vp-filepicker");
+    }
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/components/vp-job.vue
 Vue.component('vp-job',{template:` 
  <v-card>
@@ -356,7 +412,7 @@ Vue.component('vp-notifications',{template:`
                 <v-list-tile-sub-title v-html="msg.text"></v-list-tile-sub-title>
               </v-list-tile-content>
               <v-list-tile-action>
-               <v-list-tile-action-text>{{ msg.index }}</v-list-tile-action-text>
+               <v-list-tile-action-text>#{{ msg.index }}</v-list-tile-action-text>
               </v-list-tile-action>
             </v-list-tile>
            </template>
@@ -652,7 +708,7 @@ const Log=Vue.extend({template:`
      
     </v-toolbar>
   <v-data-table :headers="headers" :items="items" :search="search" class="elevation-1" no-data-text="No logs found" v-bind:pagination.sync="pagination">
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
       <td class="text-xs-right">{{ props.item.time }}</td>
       <td class="text-xs-right">{{ props.item.user }}</td>
       <td class="text-xs-right">{{ props.item.type }}</td>
@@ -715,6 +771,7 @@ const Log=Vue.extend({template:`
 const Brutusin=Vue.extend({template:` 
  <v-container fluid="">
      <v-card>
+     <v-card-title>vue-form-generator</v-card-title>
        <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
     </v-card>
  </v-container>
@@ -943,7 +1000,7 @@ const Files=Vue.extend({template:`
    
 </v-card>
 <v-progress-linear v-if="busy" v-bind:indeterminate="true" height="2"></v-progress-linear>
- <v-navigation-drawer left="" absolute="" v-model="showInfo" :disable-route-watcher="true">
+ <v-navigation-drawer left="" app="" v-model="showInfo" :disable-route-watcher="true">
    <v-card flat="" tile=""> 
        <v-toolbar>
       <v-card-title>{{ selection[0] &amp;&amp; selection[0].name }}</v-card-title>
@@ -1691,6 +1748,74 @@ const Eval=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/form/formschema.vue
+const Formsjson=Vue.extend({template:` 
+ <v-container fluid="">
+     <v-card>
+        <v-card-title>vue-json-schema@1.1.0 https://github.com/formschema/native</v-card-title>
+       <form-schema ref="formSchema" :schema="schema" v-model="model">
+              <v-btn color="success" @click.stop="submit">Subscribe</v-btn>
+  </form-schema>
+    </v-card>
+ </v-container>
+ `,
+      
+
+  components: { 
+    "form-schema": window["vue-json-schema"].default
+    },
+ 
+  data: () => ({
+    schema: {
+      "$schema": "http://json-schema.org/draft-04/schema#",
+      "type": "object",
+      "title": "Newsletter Subscription",
+      "properties": {
+          "name": {
+              "type": "string", 
+              "minLength": 8, 
+              "maxLength": 80, 
+              "attrs": {
+                "placeholder": "Full Name",
+                "title": "Please enter your full name"
+              }
+          },
+          "email": {
+              "type": "string", 
+              "maxLength": 120, 
+              "attrs": {
+                  "type": "email",
+                  "placeholder": "Email"
+              }
+          },
+          "lists": {
+              "type": "string",
+              "enum": ["Daily New", "Promotion"]
+          },
+          "arrayInput": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            }
+          }
+      },
+      "additionalProperties": false,
+      "required": ["name", "email", "lists"]
+  },
+    model: {}
+  }),
+  methods: {
+    submit (e) {
+      // this.model contains the valid data according your JSON Schema.
+      // You can submit your model to the server here
+      console.log(this.model);
+      alert("hi")
+    }
+  }
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/home.vue
 const Home=Vue.extend({template:` 
 
@@ -2411,7 +2536,7 @@ const Jobs=Vue.extend({template:`
     </v-btn>
     </v-toolbar>
   <v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No Jobs currently running">
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <td class="vtop">
         <v-checkbox primary="" hide-details="" v-model="props.selected"></v-checkbox>
       </td>
@@ -2551,6 +2676,49 @@ const Login=Vue.extend({template:`
 
       );
       
+// src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/documentation.vue
+const Documentation=Vue.extend({template:` 
+ <v-container fluid="">
+    <v-list>
+            <v-list-tile v-for="item in items" v-bind:key="item.title" @click="doEdit(item)" avatar="">
+              <v-list-tile-action>
+               <v-chip v-text="item.protocol">Example Chip</v-chip>
+              </v-list-tile-action>
+              <v-list-tile-content>
+                <v-list-tile-title @click="doEdit(item)" v-text="item.url"></v-list-tile-title>
+              </v-list-tile-content>
+            </v-list-tile>
+   </v-list>
+ </v-container>
+ `,
+      
+  data:  function(){
+    return {
+      message: 'Hello Vue.js!',
+      items:[]
+      }
+  },
+  methods:{
+    get() {
+      HTTP.get('xqdoc')
+      .then((res) => {
+        this.items = res.data.items;
+        console.log("items",this.items)
+      });
+    },
+    doEdit(item){
+      console.log("history: ",item)
+        router.push({ path: 'edit', query: { url:item.url, protocol:item.protocol  }})
+    }
+  },
+  created:function(){
+    this.get()
+    console.log("history")
+  }
+}
+
+      );
+      
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/model/entity.vue
 const Entity=Vue.extend({template:` 
 <v-card>
@@ -2558,31 +2726,31 @@ const Entity=Vue.extend({template:`
 	 <v-toolbar-title>Entities</v-toolbar-title>
 	 <v-spacer></v-spacer>
 	 <v-btn @click="getItems" :loading="loading" :disabled="loading">Refresh</v-btn>
+	 Text
 	 </v-toolbar>
 
   <v-container fluid="" grid-list-md="">
   
-    <v-data-iterator content-tag="v-layout" row="" wrap="" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
+    <v-data-iterator content-tag="v-layout" row="" wrap="" :loading="loading" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
       <v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3="">
-        <v-card>
-       
-          <v-card-title>
-           <router-link :to="{path:'entity/'+ props.item.name}">
-            <h4>
-            <v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
-            </h4>
-            </router-link>
-         </v-card-title>
-          
+        <v-card hover="true" active-class="default-class qd-active">
+        
+          <v-toolbar color="amber">
+		          <v-card-title>
+		           <router-link :to="{path:'entity/'+ props.item.name}">
+		            <h3>
+		            <v-icon>{{ props.item.iconclass }}</v-icon> {{ props.item.name }}
+		            </h3>
+		            </router-link>
+		         </v-card-title>
+          </v-toolbar>
           <v-card-text>{{ props.item.description }}<!--<v-card-text-->
-          <v-card-actions>
-          <v-list dense="">
-            <v-list-tile>
-              <v-list-tile-content>Fields:</v-list-tile-content>
-              <v-list-tile-content class="align-end">{{ props.item.nfields }}</v-list-tile-content>
-            </v-list-tile>
-          </v-list>
-          </v-card-actions>
+          <v-card-text>
+           <v-badge color="red">
+			      <span slot="badge">{{ props.item.nfields }}</span>
+			      Fields
+			    </v-badge>
+          </v-card-text>
         </v-card-text></v-card>
       </v-flex>
     </v-data-iterator>
@@ -2623,18 +2791,69 @@ const Entity=Vue.extend({template:`
       
 // src: file:///C:/Users/andy/git/vue-poc/src/vue-poc/features/namespace.vue
 const Namespace=Vue.extend({template:` 
- <v-container fluid="">
-namespaces
+ <v-container fluid="" grid-list-md="">
+<v-toolbar>
+   <v-toolbar-title>Namespaces</v-toolbar-title>
+   <v-spacer></v-spacer>
+   <v-btn @click="load" :loading="loading" :disabled="loading">Refresh</v-btn>
+   Text
+   </v-toolbar>
+     <v-data-iterator content-tag="v-layout" row="" wrap="" :loading="loading" :items="items" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all="" :value="selected">
+      <v-flex slot="item" slot-scope="props" xs12="" sm6="" md4="" lg3="">
+        <v-card hover="true" active-class="default-class qd-active" height="200px">
+        
+          <v-toolbar color="amber">
+              <v-card-title>
+               <router-link :to="{path:'entity/'+ props.item.name}">
+                <h3>
+                <v-icon>star</v-icon> {{ props.item.xmlns }}
+                </h3>
+                </router-link>
+             </v-card-title>
+          </v-toolbar>
+          <v-card-text>{{ props.item.description }}<!--<v-card-text-->
+          <v-card-text>
+           <v-badge color="red">
+            <span slot="badge">{{ props.item.prefix }}</span>
+            Fields
+          </v-badge>
+          </v-card-text>
+        </v-card-text></v-card>
+      </v-flex>
+    </v-data-iterator>
  </v-container>
  `,
       
   data:  function(){
     return {
+      items: [],
+      loading: false,
+      q: "",
       message: 'bad route!'
       }
   },
+  methods: {
+    load(){
+    
+      this.loading= true
+      HTTP.get("data/namespace",{params:{}})
+      .then(r=>{
+        this.items= r.data.items
+        this.q= null
+        this.loading= false
+        })
+        .catch(error=> {
+          console.log(error);
+          this.loading= false
+          alert("Get query error"+url)
+        });
+      
+    },
+  },
   created:function(){
-    console.log("notfound",this.$route.query.q)
+    this.q=this.$route.query.q || this.q;
+    this.load();
+    console.log("namespaces")
   }
 }
 
@@ -2651,7 +2870,7 @@ const Ping=Vue.extend({template:`
  </v-toolbar>
  <v-card-text>
   <p>Read or increment a database value. This measures round trip times browser-database-browser.</p>
-  <p>Counter:{{counter}}</p>
+  <h3>Counter: <v-chip color="amber" text-color="white">{{counter}}</v-chip></h3>
   <table class="table">
       <thead> 
         <tr>
@@ -2887,7 +3106,7 @@ const Repo=Vue.extend({template:`
       <v-spacer></v-spacer>     
     </v-toolbar>
 <v-data-table :headers="headers" :items="items" :search="search" v-model="selected" select-all="" class="elevation-1" no-data-text="No repo found @todo">
-    <template slot="items" scope="props">
+    <template slot="items" slot-scope="props">
     <td class="vtop">
         <v-checkbox primary="" hide-details="" v-model="props.selected"></v-checkbox>
       </td>
@@ -3103,7 +3322,7 @@ const Session=Vue.extend({template:`
     item-value="suburb" 
     @selected="handleSelected"
      strict="Unknown">
-<template slot="item" scope="data">
+<template slot="item" slot-scope="data">
       <v-list-tile-content>
         <v-list-tile-title>{{data.item.suburb}}</v-list-tile-title>
         <template v-if="!data.item.generatedItem">
@@ -4189,6 +4408,7 @@ const router = new VueRouter({
     { path: '/images/dates', component: Dates, meta:{title:"Image dates"} },
     { path: '/images/people', component: People, meta:{title:"Image people"} },
     
+    { path: '/documentation', component: Documentation, meta:{title:"documentation"} },
     { path: '/entity', component: Entity, meta:{title:"Entities"} },
     { path: '/namespace', component: Namespace, meta:{title:"Namespaces"} },
     { path: '/select', component: Select, meta:{title:"Select"} },
@@ -4206,6 +4426,7 @@ const router = new VueRouter({
     { path: '/history', component: History, meta:{title:"File History"} },
     { path: '/puzzle', component: Puzzle, meta:{title:"Jigsaw"} },
     { path: '/svg', component: Svg, meta:{title:"SVG"} },
+   /* { path: '/svg2', component: Svg2, meta:{title:"SVG2"} }, */
     { path: '/transform', component: Transform, meta:{title:"XSLT2 Transform"} },
     { path: '/validate', component: Validate, meta:{title:"Validate"} },
     { path: '/eval', component: Eval, meta:{title:"Evaluate XQuery"} },
@@ -4219,7 +4440,8 @@ const router = new VueRouter({
     { path: '/jobs/:job',  name:"jobShow", component: Job, props: true, meta:{title:"Job Status"} },
     { path: '/timeline', component: Timeline,meta:{title:"timeline"} },
     { path: '/map', component: Map,meta:{title:"map"} },
-    { path: '/form', component: Brutusin,meta:{title:"Form demo"} },
+    { path: '/form', component: Brutusin, meta:{title:"Form demo"} },
+    { path: '/form2', component: Formsjson, meta:{title:"Form schema"} },
     { path: '/about', component: About,meta:{title:"About Vue-poc"} },
     { path: '*', component: Notfound,meta:{title:"Page not found"} }
   ],
@@ -4273,7 +4495,7 @@ const Vuepoc=Vue.extend({template:`
           </v-list-tile>
 
       </v-list>
-    <qd-navlist :items="items"></qd-navlist>
+    <qd-navlist :items="items" :mini="mini"></qd-navlist>
  </v-navigation-drawer>
   
  <v-toolbar class="indigo" app="" dark="">
@@ -4282,8 +4504,7 @@ const Vuepoc=Vue.extend({template:`
   <vp-favorite :frmfav.sync="frmfav"></vp-favorite>
  
   <v-spacer></v-spacer>
-   <v-select placeholder="Search..." prepend-icon="search" autocomplete="" :loading="loading" combobox="" clearable="" cache-items="" :items="items2" @keyup.enter="goSearch" :search-input.sync="si" v-model="q"></v-select>
-            
+  <qd-search></qd-search>
   
   <v-spacer></v-spacer>
   
@@ -4303,13 +4524,25 @@ const Vuepoc=Vue.extend({template:`
             
           </v-list>
       </v-menu>
-      <qd-fullscreen></qd-fullscreen>
        <v-btn @click.stop="showNotifications = ! showNotifications" icon="" flat="" title="Notifications">
        <v-badge overlap="" color="orange">
       <span slot="badge" v-if=" $notification.unseen">{{ $notification.unseen }}</span>
        <v-icon>notifications</v-icon>
        </v-badge>
    </v-btn>
+    <v-menu bottom="" left="" min-width="300px">
+            <v-btn icon="" slot="activator" dark="">
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+            <v-list>
+              <v-list-tile>
+                <v-list-tile-title><qd-fullscreen></qd-fullscreen> Full screen</v-list-tile-title>
+              </v-list-tile>
+              <v-list-tile>
+                <v-list-tile-title><v-switch label="Dark theme" v-model="dark"></v-switch></v-list-tile-title>
+              </v-list-tile>
+            </v-list>
+          </v-menu>
 </v-toolbar>
  
  <v-content> 
@@ -4326,8 +4559,7 @@ const Vuepoc=Vue.extend({template:`
       
   router,
   data:function(){return {
-    q: "",
-    loading: false,
+
     searchItems:[],
     si: '',
     items2:["todo","set","search"],
@@ -4359,6 +4591,7 @@ const Vuepoc=Vue.extend({template:`
         children: [
        {href: '/database', text: 'Databases',icon: 'developer_mode' },
        {href: '/files', text: 'File system',icon: 'folder' },
+    
       {href: '/history',text: 'history',icon: 'history'}
       ]},
       {
@@ -4366,6 +4599,7 @@ const Vuepoc=Vue.extend({template:`
         text: 'Models' ,
         model: false,
         children: [
+          {href: '/documentation', text: 'Documentation',icon: 'library_books' },
           {href: '/namespace', text: 'Namespaces',icon: 'label' },
           {href: '/entity', text: 'Entities',icon: 'redeem' },
       ]},
@@ -4404,6 +4638,7 @@ const Vuepoc=Vue.extend({template:`
       {href: '/puzzle',text: 'Puzzle',icon: 'extension'},
       {href: '/svg',text: 'SVG',icon: 'extension'},
       {href: '/form',text: 'Forms',icon: 'format_list_bulleted'  },
+      {href: '/form2',text: 'Forms 2',icon: 'format_list_bulleted'  },
       {href: '/tabs',text: 'Tabs',icon: 'switch_camera'}
       ]},
       
@@ -4413,21 +4648,12 @@ const Vuepoc=Vue.extend({template:`
 
   }},
   methods: {
-    querySelections (v) {
-      this.loading = true
-      // Simulated ajax query
-      setTimeout(() => {
-        this.items2 = ["aa","bb",this.si],
-        this.loading = false
-      }, 500)
-    },
+   
 
       session(){
         this.$router.push({path: '/session'})
       },
-      goSearch(){
-        this.$router.push({path: '/search',query: { q: this.q }})
-      },
+      
       logout(){
         HTTP.get("logout").then(r=>{
           alert("logout")
@@ -4446,13 +4672,7 @@ const Vuepoc=Vue.extend({template:`
 	      console.log("showNotifications",val);
 	      if(!val)this.$notification.unseen=0;
 	    },
-	    search (val) {
-	      val && this.querySelections(val)
-	    },
-	    si:function(val){
-	      console.log("si: ",val);
-	      this.querySelections();
-	    }
+	   
     },
     
   created(){
@@ -4600,6 +4820,16 @@ localforage.config({
 // https://vuejs.org/v2/guide/state-management.html
 var settings = {
     debug: false,
+    defaults:{
+      "settings/ace": {
+        theme: "github",
+        keybinding: "ace",
+        fontsize: 16,
+        enableSnippets:true,
+        enableBasicAutocompletion:true,
+        enableLiveAutocompletion:true
+        },
+    },
     getItem (key) {
       if (this.debug) console.log('getItem',key);
       return localforage.getItem(key)
@@ -4709,7 +4939,10 @@ Vue.use(Fullscreen);
 //Vue.component('v-map', Vue2Leaflet.Map);
 //Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
 //Vue.component('v-marker', Vue2Leaflet.Marker);
-
+//function install (Vue) {
+//  Vue.component('form-schema', window["vue-json-schema"].default);
+//};
+//Vue.use({ install: install });
 Vue.use(Vuetify);
 new Vuepoc().$mount('#app')
 
diff --git a/src/vue-poc/static/app.css b/src/vue-poc/static/app.css
index 08b0cfd..444b2fa 100644
--- a/src/vue-poc/static/app.css
+++ b/src/vue-poc/static/app.css
@@ -124,6 +124,9 @@ height: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
 } 
+.qd-active {
+	  background-color: green;
+}
 .canvas {
   overflow: hidden;
 }
diff --git a/src/vue-poc/static/app.html b/src/vue-poc/static/app.html
index 0184391..1b41e2e 100644
--- a/src/vue-poc/static/app.html
+++ b/src/vue-poc/static/app.html
@@ -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/icon?family=Material+Icons"/>
 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
-<link href="https://unpkg.com/vuetify@1.0.0-beta.6/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
+<link href="https://unpkg.com/vuetify@1.0.4/dist/vuetify.min.css" rel="stylesheet" type="text/css"/>
 
 <link rel="stylesheet" href="https://unpkg.com/vue-form-generator@2.1.0/dist/vfg.css"/>
 <link href="/vue-poc/ui/app.css" rel="stylesheet" type="text/css"/>
@@ -37,7 +37,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.4.0/qs.js"></script>
-<script src="https://unpkg.com/vuetify@1.0.0-beta.6/dist/vuetify.min.js"></script>
+<script src="https://unpkg.com/vuetify@1.0.4/dist/vuetify.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ext-language_tools.js"></script>
 <script src="https://d3js.org/d3.v4.min.js"></script>
@@ -49,7 +49,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis-timeline-graph2d.min.js"></script>
 
 <script src="https://unpkg.com/vue-form-generator@2.1.1/dist/vfg.js"></script>
-
+<script src="https://unpkg.com/vue-json-schema@1.1.0/dist/vue-json-schema.js"></script>
  
 <script src="/vue-poc/ui/svg-pan-zoom.js"></script>
 <script src="/vue-poc/ui/perf-stat.js"></script>
diff --git a/src/vue-poc/static/https _shkspr.mobi_svg_calendar.svg b/src/vue-poc/static/https _shkspr.mobi_svg_calendar.svg
new file mode 100644
index 0000000..3ed11f5
--- /dev/null
+++ b/src/vue-poc/static/https _shkspr.mobi_svg_calendar.svg	
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"><head><title>https://shkspr.mobi/svg/calendar.svg</title><link rel="stylesheet" type="text/css" href="https%20_shkspr.mobi_svg_calendar_files/viewsource.css" /></head><body id="viewsource" class="highlight" style="-moz-tab-size: 4" contextmenu="actions"><pre id="line1"><span></span><span>&lt;<span class="start-tag">svg</span> <span class="attribute-name">onload</span>="<a class="attribute-value">init(evt)</a>" <span class="attribute-name">xmlns</span>="<a class="attribute-value">http://www.w3.org/2000/svg</a>"
+<span id="line2"></span><span class="attribute-name">aria-label</span>="<a class="attribute-value">Calendar</a>" <span class="attribute-name">role</span>="<a class="attribute-value">img</a>"
+<span id="line3"></span><span class="attribute-name">viewBox</span>="<a class="attribute-value">0 0 512 512</a>"&gt;</span><span>
+<span id="line4"></span></span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/ecmascript</a>"&gt;</span><span></span><span class="cdata">&lt;![CDATA[
+<span id="line5"></span>function init(evt) {
+<span id="line6"></span>  var time = new Date();
+<span id="line7"></span>  var locale = "en-gb";
+<span id="line8"></span>  var DD   = time.getDate();
+<span id="line9"></span>  var DDD  = time.toLocaleString(locale, { weekday: "short" });
+<span id="line10"></span>  var DDDD = time.toLocaleString(locale, { weekday: "long" });
+<span id="line11"></span>  var MM   = time.getMonth() + 1;
+<span id="line12"></span>  var MMM  = time.toLocaleString(locale, {month: "short"});
+<span id="line13"></span>  var MMMM = time.toLocaleString(locale, {month: "long"});
+<span id="line14"></span>  var YYYY = time.getFullYear();
+<span id="line15"></span>  
+<span id="line16"></span>  var svgDocument = evt.target.ownerDocument;
+<span id="line17"></span>  var dayNode = svgDocument.createTextNode(DD);
+<span id="line18"></span>  svgDocument.getElementById("day").appendChild(dayNode);
+<span id="line19"></span>  var weekdayNode = svgDocument.createTextNode(DDDD);
+<span id="line20"></span>  svgDocument.getElementById("weekday").appendChild(weekdayNode);
+<span id="line21"></span>  var monthNode = svgDocument.createTextNode(MMM.toUpperCase());
+<span id="line22"></span>  svgDocument.getElementById("month").appendChild(monthNode);
+<span id="line23"></span>  
+<span id="line24"></span>}
+<span id="line25"></span>]]&gt;</span><span></span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
+<span id="line26"></span>
+<span id="line27"></span></span><span>&lt;<span class="start-tag">path</span> <span class="attribute-name">d</span>="<a class="attribute-value">M512 455c0 32-25 57-57 57H57c-32 0-57-25-57-57V128c0-31 25-57 57-57h398c32 0 57 26 57 57z</a>" <span class="attribute-name">fill</span>="<a class="attribute-value">#e0e7ec</a>"<span>/</span>&gt;</span><span>
+<span id="line28"></span></span><span>&lt;<span class="start-tag">path</span> <span class="attribute-name">d</span>="<a class="attribute-value">M484 0h-47c2 4 4 9 4 14a28 28 0 1 1-53-14H124c3 4 4 9 4 14A28 28 0 1 1 75 0H28C13 0 0 13 0 28v157h512V28c0-15-13-28-28-28z</a>" <span class="attribute-name">fill</span>="<a class="attribute-value">#dd2f45</a>"<span>/</span>&gt;</span><span>
+<span id="line29"></span>
+<span id="line30"></span></span><span>&lt;<span class="start-tag">g</span> <span class="attribute-name">fill</span>="<a class="attribute-value">#f3aab9</a>"&gt;</span><span>
+<span id="line31"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">470</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">142</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line32"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">470</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">100</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line33"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">427</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">142</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line34"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">427</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">100</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line35"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">384</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">142</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line36"></span>  </span><span>&lt;<span class="start-tag">circle</span> <span class="attribute-name">cx</span>="<a class="attribute-value">384</a>" <span class="attribute-name">cy</span>="<a class="attribute-value">100</a>" <span class="attribute-name">r</span>="<a class="attribute-value">14</a>"<span>/</span>&gt;</span><span>
+<span id="line37"></span></span><span>&lt;/<span class="end-tag">g</span>&gt;</span><span>
+<span id="line38"></span>
+<span id="line39"></span></span><span>&lt;<span class="start-tag">text</span> <span class="attribute-name">id</span>="<a class="attribute-value">month</a>"
+<span id="line40"></span>  <span class="attribute-name">x</span>="<a class="attribute-value">32</a>" 
+<span id="line41"></span>  <span class="attribute-name">y</span>="<a class="attribute-value">164</a>" 
+<span id="line42"></span>  <span class="attribute-name">fill</span>="<a class="attribute-value">#fff</a>" 
+<span id="line43"></span>  <span class="attribute-name">font-family</span>="<a class="attribute-value">monospace</a>"
+<span id="line44"></span>  <span class="attribute-name">font-size</span>="<a class="attribute-value">140px</a>"
+<span id="line45"></span>  <span class="attribute-name">style</span>="<a class="attribute-value">text-anchor: left</a>"&gt;</span><span></span><span>&lt;/<span class="end-tag">text</span>&gt;</span><span>
+<span id="line46"></span></span><span>&lt;<span class="start-tag">text</span> <span class="attribute-name">id</span>="<a class="attribute-value">day</a>"
+<span id="line47"></span>  <span class="attribute-name">x</span>="<a class="attribute-value">256</a>" 
+<span id="line48"></span>  <span class="attribute-name">y</span>="<a class="attribute-value">400</a>" 
+<span id="line49"></span>  <span class="attribute-name">fill</span>="<a class="attribute-value">#66757f</a>" 
+<span id="line50"></span>  <span class="attribute-name">font-family</span>="<a class="attribute-value">monospace</a>"
+<span id="line51"></span>  <span class="attribute-name">font-size</span>="<a class="attribute-value">256px</a>"
+<span id="line52"></span>  <span class="attribute-name">style</span>="<a class="attribute-value">text-anchor: middle</a>"&gt;</span><span></span><span>&lt;/<span class="end-tag">text</span>&gt;</span><span>
+<span id="line53"></span></span><span>&lt;<span class="start-tag">text</span> <span class="attribute-name">id</span>="<a class="attribute-value">weekday</a>"
+<span id="line54"></span>  <span class="attribute-name">x</span>="<a class="attribute-value">256</a>" 
+<span id="line55"></span>  <span class="attribute-name">y</span>="<a class="attribute-value">480</a>" 
+<span id="line56"></span>  <span class="attribute-name">fill</span>="<a class="attribute-value">#66757f</a>" 
+<span id="line57"></span>  <span class="attribute-name">font-family</span>="<a class="attribute-value">monospace</a>"
+<span id="line58"></span>  <span class="attribute-name">font-size</span>="<a class="attribute-value">64px</a>"
+<span id="line59"></span>  <span class="attribute-name">style</span>="<a class="attribute-value">text-anchor: middle</a>"&gt;</span><span></span><span>&lt;/<span class="end-tag">text</span>&gt;</span><span>
+<span id="line60"></span>
+<span id="line61"></span></span><span>&lt;/<span class="end-tag">svg</span>&gt;</span><span></span></pre><menu type="context" id="actions"><menuitem id="goToLine" label="Go to Line…" accesskey="L"></menuitem><menuitem id="wrapLongLines" label="Wrap Long Lines" type="checkbox"></menuitem><menuitem id="highlightSyntax" label="Syntax Highlighting" type="checkbox" checked="true"></menuitem></menu></body></html>
\ No newline at end of file
diff --git a/src/vue-poc/static/schema.json b/src/vue-poc/static/schema.json
new file mode 100644
index 0000000..0047973
--- /dev/null
+++ b/src/vue-poc/static/schema.json
@@ -0,0 +1,30 @@
+{
+    "$schema": "http://json-schema.org/draft-04/schema#",
+    "type": "object",
+    "title": "Newsletter Subscription",
+    "properties": {
+        "name": {
+            "type": "string", 
+            "minLength": 8, 
+            "maxLength": 80, 
+            "attrs": {
+              "placeholder": "Full Name",
+              "title": "Please enter your full name"
+            }
+        },
+        "email": {
+            "type": "string", 
+            "maxLength": 120, 
+            "attrs": {
+                "type": "email",
+                "placeholder": "Email"
+            }
+        },
+        "lists": {
+            "type": "string",
+            "enum": ["Daily New", "Promotion"]
+        }
+    },
+    "additionalProperties": false,
+    "required": ["name", "email", "lists"]
+}
\ No newline at end of file