warn+tip service

zero.Web/App/Components/Tables/table-value.js

@@ -1,4 +1,5 @@
 import dayjs from 'dayjs';
+import { warn } from 'zeroservices/debug';
 
 export default function (el, binding)
 {
@@ -55,6 +56,6 @@ export default function (el, binding)
   }
   else
   {
-    console.warn(`ui-table: Column display type ("${column.as}") is not supported`);
+    warn(`ui-table: Column display type ("${column.as}") is not supported`, this);
   }
 }

zero.Web/App/Components/Tables/table.vue

@@ -184,7 +184,7 @@
     }
   }
 
-  .ui-table-body .ui-table-row:hover
+  .ui-table-row:not(.ui-table-head):hover
   {
     box-shadow: 0 0 5px 4px var(--color-shadow);
     z-index: 4;

zero.Web/App/Components/tree.vue

@@ -6,7 +6,7 @@
         <button v-if="item.hasChildren" @click="toggle(item)" type="button" class="ui-tree-item-toggle">
           <i class="ui-tree-item-arrow" :class="['fth-chevron-' + (item.isOpen ? 'up' : 'down')]"></i>
         </button>
-        <router-link to="/" class="ui-tree-item-link">
+        <router-link :to="item.url" class="ui-tree-item-link">
           <i class="ui-tree-item-icon" :class="item.icon"></i>
           <i v-if="item.modifier" :title="item.modifier.name" class="ui-tree-item-modifier" :class="item.modifier.icon"></i>
           {{item.name | localize}}
@@ -35,10 +35,6 @@
       get: {
         type: Function,
         required: true
-      },
-      onChange: {
-        type: Function,
-        default: () => { }
       }
     },
 
@@ -78,7 +74,7 @@
       setStatus(status)
       {
         this.status = status;
-        this.onChange(status, this.items);
+        this.$emit('onStatusChange', status);
       },
 
 
@@ -149,14 +145,9 @@
     position: relative;
     color: var(--color-fg);
 
-    &:hover
+    &.is-active
     {
-      color: var(--color-fg);
-
-      .ui-tree-item-icon
-      {
-        color: var(--color-fg);
-      }
+      font-weight: bold;
     }
   }
 

zero.Web/App/app.vue

@@ -19,6 +19,7 @@
   import AppOverlays from 'zerocomponents/overlays/overlay-holder.vue'
   import Router from 'zero/router.config.js'
   import AuthApi from 'zeroservices/auth.js'
+  import 'zero/vue.config.js'
   import 'zero/axios.config.js'
 
   export default {

zero.Web/App/pages/pages/page.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <ui-header-bar title="Checkout" :on-back="onBack">
+    <ui-header-bar :title="'Page ' + $route.params.id" :on-back="onBack">
       <ui-dropdown>
         <template v-slot:button>
           <ui-button type="light" label="Actions" caret="down" />

zero.Web/App/pages/pages/pages.vue

@@ -5,7 +5,6 @@
         <ui-dot-button />
       </ui-header-bar>
       <ui-tree :get="getItems" />
-      <ui-button type="white" label="Go to page" @click="goToPage" icon="fth-settings" />
       <div class="page-container-tree-resizable ui-resizable"></div>
     </div>
     <router-view></router-view>
@@ -33,11 +32,6 @@
 
     methods: {
 
-      goToPage()
-      {
-        this.$router.push({ name: 'page', params: { page: '23' } });
-      },
-
       getItems(parent)
       {
         const key = !parent ? '__root' : parent;
@@ -49,6 +43,13 @@
 
         return PageTreeApi.getChildren(parent).then(response =>
         {
+          response.forEach(item =>
+          {
+            item.url = {
+              name: 'page',
+              params: { id: item.id }
+            }
+          });
           this.cache[key] = response;
           return response;
         });

zero.Web/App/router.config.js

@@ -20,18 +20,6 @@ let addSection = (section, component) =>
     }
   };
 
-  //if (section.alias != 'pages')
-  //{
-  //  route.component = component;
-  //}
-  //else
-  //{
-  //  route.components = {
-  //    default: component,
-  //    footer: () => import('zeropages/' + section.alias + '/user')
-  //  };
-  //}
-
   routes.push(route);
 
   return route;
@@ -44,12 +32,11 @@ zero.sections.forEach(section =>
   if (section.alias === 'pages')
   {
     route.children = [{
-      path: ':page',
+      path: 'edit/:id',
       props: true,
       name: 'page',
       component: () => import('zeropages/' + section.alias + '/page')
     }];
-
   }
 
   if (section.children.length > 0)
@@ -61,8 +48,6 @@ zero.sections.forEach(section =>
   }
 });
 
-console.table(routes);
-
 
 
 // add fallback route (this should probably by 404 page)

zero.Web/App/services/debug.js

@@ -0,0 +1,97 @@
+export let warn = () => { };
+export let tip = () => { };
+
+if (process.env.NODE_ENV !== 'production')
+{
+  warn = (msg, vm) =>
+  {
+    const trace = vm ? generateComponentTrace(vm) : '';
+    console.error(`[zero warn]: ${msg}${trace}`);
+  };
+
+
+  tip = (msg, vm) =>
+  {
+    const trace = vm ? generateComponentTrace(vm) : '';
+    console.warn(`[zero tip]: ${msg}${trace}`);
+  };
+
+
+  let generateComponentTrace = vm =>
+  {
+    if (vm._isVue && vm.$parent)
+    {
+      const tree = [];
+      let currentRecursiveSequence = 0;
+      while (vm)
+      {
+        if (tree.length > 0)
+        {
+          const last = tree[tree.length - 1];
+          if (last.constructor === vm.constructor)
+          {
+            currentRecursiveSequence++;
+            vm = vm.$parent;
+            continue;
+          } else if (currentRecursiveSequence > 0)
+          {
+            tree[tree.length - 1] = [last, currentRecursiveSequence];
+            currentRecursiveSequence = 0;
+          }
+        }
+        tree.push(vm);
+        vm = vm.$parent;
+      }
+      return '\n\nfound in\n\n' + tree
+        .map((vm, i) => `${
+          i === 0 ? '---> ' : repeat(' ', 5 + i * 2)
+          }${
+          Array.isArray(vm)
+            ? `${formatComponentName(vm[0])}... (${vm[1]} recursive calls)`
+            : formatComponentName(vm)
+          }`)
+        .join('\n');
+    } else
+    {
+      return `\n\n(found in ${formatComponentName(vm)})`;
+    }
+  };
+
+
+  let formatComponentName = (vm, includeFile) =>
+  {
+    if (vm.$root === vm)
+    {
+      return '<Root>';
+    }
+    const options = typeof vm === 'function' && vm.cid
+      ? vm.options
+      : vm._isVue
+        ? vm.$options || vm.constructor.options
+        : vm;
+    let name = options.name || options._componentTag;
+    const file = options.__file;
+    if (!name && file)
+    {
+      const match = file.match(/([^/\\]+)\.vue$/);
+      name = match && match[1];
+    }
+
+    return (
+      (name ? `<${classify(name)}>` : `<Anonymous>`) +
+      (file && includeFile !== false ? ` at ${file}` : '')
+    );
+  };
+
+  const repeat = (str, n) =>
+  {
+    let res = '';
+    while (n)
+    {
+      if (n % 2 === 1) res += str;
+      if (n > 1) str += str;
+      n >>= 1;
+    }
+    return res;
+  };
+}

zero.Web/App/vue.config.js

@@ -0,0 +1,6 @@
+import Vue from 'vue';
+
+Vue.config.errorHandler = (err, vm, info) =>
+{
+  console.error(err);
+};