nav_v3

routing in side bars

dist/Vxg.css

@@ -1 +1,111 @@
-.vxg-icon{padding:20px}.vxg-app-bar{height:64px;background-color:#fff;margin-left:25px}.vxg-head-btn{height:100%;background-color:#fff!important;color:rgb(var(--vxg-ct0));text-transform:none!important;-webkit-box-shadow:none!important;box-shadow:none!important;margin-left:10px}.vxg-head-btn .v-icon{color:rgb(var(--vxg-ci0))!important}.basic-footer[data-v-edc4307a]{padding:1rem;text-align:center;background-color:#f5f5f5;color:#333}nav.vxg-side,nav.vxg-side .v-sheet{background-color:rgb(var(--vxg-cb1))!important}nav.vxg-side .v-divider{border-color:rgb(var(--vxg-ct2))!important;margin:16px 8px}.btn-style{background-color:#283348!important;width:141px;height:281px;margin:4px!important}.btn-style.selected-btn{background-color:rgb(var(--vxg-cb1))!important}.btn-style.selected-btn,.btn-style.selected-btn .v-icon{color:rgb(var(--vxg-ct1))!important}.vxg-toggle{background-color:rgb(var(--vxg-cb1))!important;padding:10px!important;padding-bottom:10px;padding-top:10px;margin-right:10px}a.vxg-router-link{display:block;margin:0 8px;padding:16px 8px;text-decoration:none!important;color:rgb(var(--vxg-ct1))!important;border-radius:8px}a.vxg-router-link .v-icon{color:rgb(var(--vxg-ct2))!important}a.vxg-router-link.router-link-active{background-color:rgb(var(--vxg-cb2))!important;color:rgb(var(--vxg-ct1))!important}a.vxg-router-link.router-link-active .v-icon{color:rgb(var(--vxg-ct1))!important}.vxg-side-open{width:48px;height:48px}.drawer-toggle{width:48px}.font-size-13{font-size:13px}.vxg-form-field{text-align:right;padding:0 8px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box}div.changes{width:100%;color:rgba(0,0,0,.26)!important;background-color:transparent!important}div.changes table{width:100%;background-color:#fff!important;border-bottom:0;border-left:0;border-right:1px solid rgba(0,0,0,.26);border-top:1px solid rgba(0,0,0,.26)}div.changes td,div.changes th{background-color:#fff!important;border-right:0;border-top:0;border-left:1px solid rgba(0,0,0,.26);border-bottom:1px solid rgba(0,0,0,.26);padding:4px}
+.vxg-icon {
+  padding: 20px;
+}
+.vxg-app-bar {
+  height: 64px;
+  background-color: white;
+  margin-left: 25px;
+}
+.vxg-head-btn {
+  height: 100%;
+  background-color: white !important;
+  color: rgb(var(--vxg-ct0));
+  text-transform: none !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+  margin-left: 10px;
+}
+.vxg-head-btn .v-icon {
+  color: rgb(var(--vxg-ci0)) !important;
+}
+.basic-footer[data-v-d93f7088] {
+  padding: 1rem;
+  text-align: center;
+  background-color: #f5f5f5;
+  color: #333;
+}
+nav.vxg-side {
+  background-color: rgb(var(--vxg-cb1)) !important;
+}
+nav.vxg-side .v-sheet {
+  background-color: rgb(var(--vxg-cb1)) !important;
+}
+nav.vxg-side .v-divider {
+  border-color: rgb(var(--vxg-ct2)) !important;
+  margin: 16px 8px;
+}
+.btn-style {
+  background-color: #283348 !important;
+  width: 141px;
+  height: 281px;
+  margin: 4px !important;
+}
+.btn-style.selected-btn {
+  background-color: rgb(var(--vxg-cb1)) !important;
+  color: rgb(var(--vxg-ct1)) !important;
+}
+.btn-style.selected-btn .v-icon {
+  color: rgb(var(--vxg-ct1)) !important;
+}
+.vxg-toggle {
+  background-color: rgb(var(--vxg-cb1)) !important;
+  padding: 10px !important;
+  padding-bottom: 10px;
+  padding-top: 10px;
+  margin-right: 10px;
+}
+a.vxg-router-link {
+  display: block;
+  margin: 0px 8px;
+  padding: 16px 8px;
+  text-decoration: none !important;
+  color: rgb(var(--vxg-ct1)) !important;
+  border-radius: 8px;
+}
+a.vxg-router-link .v-icon {
+  color: rgb(var(--vxg-ct2)) !important;
+}
+a.vxg-router-link.router-link-active {
+  background-color: rgb(var(--vxg-cb2)) !important;
+  color: rgb(var(--vxg-ct1)) !important;
+}
+a.vxg-router-link.router-link-active .v-icon {
+  color: rgb(var(--vxg-ct1)) !important;
+}
+.vxg-side-open {
+  width: 48px;
+  height: 48px;
+}
+.drawer-toggle {
+  width: 48px;
+}
+.font-size-13 {
+  font-size: 13px;
+}
+.vxg-form-field {
+  text-align: right;
+  padding: 0px 8px 0px 0px;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+div.changes {
+  width: 100%;
+  color: rgba(0, 0, 0, 0.26) !important;
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+div.changes table {
+  width: 100%;
+  background-color: #FFF !important;
+  border-bottom: 0px;
+  border-left: 0px;
+  border-right: 1px solid rgba(0, 0, 0, 0.26);
+  border-top: 1px solid rgba(0, 0, 0, 0.26);
+}
+div.changes th, div.changes td {
+  background-color: #FFF !important;
+  border-right: 0px;
+  border-top: 0px;
+  border-left: 1px solid rgba(0, 0, 0, 0.26);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
+  padding: 4px;
+}

example/basic/src/store/store.js

@@ -32,7 +32,8 @@ function makeStore(Vue) {
           add: 0
         },
         search: {
-          term: ''
+          a: '',
+          b: ''
         },
       },
 

src/components/BasicHead.vue

@@ -259,7 +259,7 @@ export default {
   
 
   watch: {
-    '$store.state.trigger.search.term' (term) {
+    '$store.state.trigger.search.a' (term) {
       if(term == '' && this.$refs.search) {
         this.$refs.search.reset()
         // this.tag_items = this.items.map(v => v.tag)
@@ -275,7 +275,7 @@ export default {
       //   term = m[1].trim()
       // }
       // this.$store.dispatch('trigger_search', {term:this.search})
-      this.$store.dispatch('trigger_search', {term})
+      this.$store.dispatch('trigger_search', {a: term})
     },
     select () {
       this.$store.dispatch('trigger_select', {value:this.select})
@@ -367,6 +367,7 @@ export default {
           let out = await this.$seneca.post('sys:search, cmd:search', 
             { query: term, params: this.search_config }
           )
+          console.log('Search result:', out);
           // this.tag_items = out.data.hits.map(v => v.id)
           this.tag_items = out.data.hits.map(v=>tag_alias(v.doc))
         }
@@ -378,6 +379,10 @@ export default {
       }, 11)
       
     },
+    tag_alias(item) {
+      // Define your tag_alias function here
+      return item.tag; // Example implementation
+    },
     
     filterAssets () {
       this.$store.dispatch('vxg_trigger_go')