glib-web 2.4.1 → 3.0.0-beta1

package/components/panels/responsive.vue

@@ -1,30 +1,5 @@
 <template>
-  <div style="display: contents;">
-    <!-- <common-responsive v-if="!hoverViewsSpec" :spec="spec" /> -->
-    <v-menu
-      v-if="hoverViewsSpec"
-      :close-on-content-click="false"
-      open-on-hover
-      offset-x
-      transition="scale-transition"
-      content-class="hover"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <div v-bind="attrs" v-on="on">
-          <common-responsive :spec="spec" />
-        </div>
-      </template>
-      <v-card>
-        <common-responsive :spec="hoverViewsSpec" />
-      </v-card>
-    </v-menu>
-    <common-tooltip v-else :spec="spec">
-      <template v-slot:activator="{ on }">
-        <common-responsive :spec="spec" :event-handlers="on" />
-        <!-- <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" /> -->
-      </template>
-    </common-tooltip>
-  </div>
+  <common-responsive :spec="spec" />
 </template>
 
 <script>
@@ -33,20 +8,25 @@ export default {
     spec: {
       type: Object,
       required: true,
-      default: function() {
+      default: function () {
         return {};
       }
     }
   },
   data() {
     return {
-      hoverViewsSpec: this.spec.hoverViews
-        ? {
-            childViews: this.spec.hoverViews,
-            align: this.spec.align
-          }
-        : false
+      hoverViewsSpec: null
     };
+  },
+  methods: {
+    $ready() {
+      this.hoverViewsSpec = this.spec.hoverViews
+        ? {
+          childViews: this.spec.hoverViews,
+          align: this.spec.align
+        }
+        : null;
+    }
   }
 };
 </script>

package/components/panels/split.vue

@@ -1,7 +1,7 @@
 <template v-if="content">
   <div :class="classes()" :style="genericStyles()">
     <div v-if="spec.left" class="layouts-split__side">
-      <panels-responsive :spec="spec.left" />
+      <panels-responsive :spec="spec.left" v-if="spec.left" class="layouts-split__side" />
     </div>
 
     <div class="layouts-split__expand">
@@ -23,7 +23,7 @@ export default {
     spec: { type: Object, required: true }
   },
   methods: {
-    classes: function() {
+    classes: function () {
       return this.$classes().concat("layouts-split");
     }
   }

package/components/panels/table.vue

@@ -3,45 +3,25 @@
     <div ref="topAnchor"></div>
 
     <table :style="$styles()" :class="$classes()">
-      <template v-for="(section, sectionIndex) in sections">
-        <thead :key="`head_${sectionIndex}`">
+      <template v-for="(section, sectionIndex) in sections" :key="`head_${sectionIndex}`">
+        <thead>
           <tr v-if="importable || exportable">
             <td colspan="10">
               <div class="pa-3">
                 <template v-if="importable">
-                  <span
-                    >{{
-                      rows(section).length + section.dataRows.length
-                    }}
-                    rows</span
-                  >
-                  <input
-                    ref="fileInput"
-                    style="display: none;"
-                    type="file"
-                    accept=".csv"
-                    @change="loadFile($event, section)"
-                  />
+                  <span>{{
+                    rows(section).length + section.dataRows.length
+                  }}
+                    rows</span>
+                  <input ref="fileInput" style="display: none;" type="file" accept=".csv"
+                    @change="loadFile($event, section)" />
                   <v-btn @click="triggerImport(sectionIndex)">Import</v-btn>
-                  <v-btn
-                    :disabled="totalRows(section) <= 0"
-                    @click="submitRows($event, section)"
-                    >Save</v-btn
-                  >
-                  <v-btn
-                    :disabled="totalRows(section) <= 0"
-                    @click="clear(section)"
-                    >Clear</v-btn
-                  >
+                  <v-btn :disabled="totalRows(section) <= 0" @click="submitRows($event, section)">Save</v-btn>
+                  <v-btn :disabled="totalRows(section) <= 0" @click="clear(section)">Clear</v-btn>
                 </template>
 
                 <div class="float-right">
-                  <v-btn
-                    v-if="exportable"
-                    :download="exportFile"
-                    :href="exportCsv(section)"
-                    >{{ exportLabel }}</v-btn
-                  >
+                  <v-btn v-if="exportable" :download="exportFile" :href="exportCsv(section)">{{ exportLabel }}</v-btn>
                 </div>
               </div>
 
@@ -53,36 +33,22 @@
 
           <tr v-if="section.header" :style="genericStyles(section.header)">
             <template v-if="section.header.dataCells">
-              <th
-                v-for="(cell, index) in section.header.dataCells"
-                :key="index"
-              >
+              <th v-for="(cell, index) in section.header.dataCells" :key="index">
                 {{ cell }}
               </th>
             </template>
-            <th
-              v-for="(cell, index) in section.header.cellViews"
-              v-else
-              :key="index"
-            >
+            <th v-for="(cell, index) in section.header.cellViews" v-else :key="index">
               <glib-component :spec="cell" />
             </th>
           </tr>
         </thead>
 
-        <tbody :key="`body_${sectionIndex}`">
+        <tbody>
           <!-- <tr v-for="(row, index) in section.rows" :key="`row_${index}`"> -->
-          <template v-for="(row, rowIndex) in section.rows">
-            <tr
-              :key="`row_${rowIndex}`"
-              :class="row.onClick ? 'clickable' : ''"
-            >
-              <td
-                v-for="(cell, cellIndex) in row.cellViews"
-                :key="`cell_${cellIndex}`"
-                :colSpan="colSpan(row, cellIndex)"
-                :style="colStyles(row, cellIndex)"
-              >
+          <template v-for="(row, rowIndex) in section.rows" :key="`row_${rowIndex}`">
+            <tr :class="row.onClick ? 'clickable' : ''">
+              <td v-for="(cell, cellIndex) in row.cellViews" :key="`cell_${cellIndex}`" :colSpan="colSpan(row, cellIndex)"
+                :style="colStyles(row, cellIndex)">
                 <!-- Prevent double links -->
                 <glib-component v-if="$href(cell)" :spec="cell" />
                 <a v-else :href="$href(row)" @click="$onClick($event, row)">
@@ -92,14 +58,8 @@
             </tr>
           </template>
 
-          <tr
-            v-for="(row, rowIndex) in section.dataRows"
-            :key="`data_row_${rowIndex}`"
-          >
-            <td
-              v-for="(cell, cellIndex) in row"
-              :key="`data_cell_${cellIndex}`"
-            >
+          <tr v-for="(row, rowIndex) in section.dataRows" :key="`data_row_${rowIndex}`">
+            <td v-for="(cell, cellIndex) in row" :key="`data_cell_${cellIndex}`">
               <a class="data-cell">{{ cell }}</a>
             </td>
           </tr>
@@ -195,6 +155,7 @@ export default {
 table {
   border-spacing: 0;
 }
+
 thead {
   th {
     padding: 10px 4px;
@@ -202,11 +163,13 @@ thead {
     // border-left: 1px solid rgba(0, 0, 0, 0.12);
   }
 }
+
 tbody {
   tr.clickable {
-    td > a {
+    td>a {
       cursor: pointer;
     }
+
     &:hover {
       background: #eee;
     }
@@ -224,13 +187,16 @@ tbody {
     }
   }
 }
+
 .scrollable {
   width: 100%;
   overflow: auto;
 }
+
 .data-cell {
   white-space: pre-line;
 }
+
 table.table--grid {
   tbody {
     td {

package/components/panels/timeline.vue

@@ -1,43 +1,26 @@
 <template>
   <!-- Paddings cannot be applied to v-timeline directly -->
   <div :style="$styles()" :class="$classes()">
-    <v-timeline v-if="events" dense align-top>
-      <v-timeline-item
-        v-for="(item, index) in events"
-        :key="index"
-        :color="item.backgroundColor || 'white'"
-        :small="itemClasses(item).includes('small')"
-        :large="itemClasses(item).includes('large')"
-        :hide-dot="item.hide_dot"
-        fill-dot
-      >
+    <v-timeline v-if="events" :dense="true" align-top>
+      <v-timeline-item v-for="(item, index) in events" :key="index" :color="item.backgroundColor || 'white'"
+        :small="itemClasses(item).includes('small') || null" :large="itemClasses(item).includes('large')"
+        :hide-dot="item.hide_dot" fill-dot>
         <template v-slot:icon>
-          <div
-            :class="
-              itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
-            "
-          >
-            <div
-              v-if="item.text"
-              class="number-circle"
-              :style="{ color: item.color }"
-            >
+          <div :class="
+            itemClasses(item).includes('outlined') ? 'outlined-dots' : ''
+          ">
+            <div v-if="item.text" class="number-circle" :style="{ color: item.color }">
               {{ item.text }}
             </div>
             <div v-else class="icon">
-              <common-icon
-                :spec="{
-                  material: { name: item.icon, size: iconSize(item) },
-                  color: item.color
-                }"
-              />
+              <common-icon :spec="{
+                material: { name: item.icon, size: iconSize(item) },
+                color: item.color
+              }" />
             </div>
           </div>
         </template>
-        <panels-responsive
-          v-if="childViews"
-          :spec="{ childViews: [childViews[index]] }"
-        />
+        <panels-responsive v-if="childViews" :spec="{ childViews: [childViews[index]] }" />
       </v-timeline-item>
     </v-timeline>
   </div>
@@ -78,6 +61,7 @@ export default {
   height: 36px;
   width: 36px;
 }
+
 .v-timeline-item__dot--small {
   height: 20px;
   width: 20px;
@@ -88,13 +72,16 @@ export default {
 .v-timeline {
   padding-top: 0px;
 }
+
 .v-timeline-item {
   // Minimum line distance
   padding-bottom: 10px;
 }
+
 .container {
   padding-top: 0px;
 }
+
 .outlined-dots {
   border-radius: 50%;
   width: 100%;
@@ -106,11 +93,13 @@ export default {
   padding: 4px 0;
   // font-size: 22px;
 }
+
 .outlined .v-timeline-item {
   ::v-deep .v-timeline-item__dot {
     box-shadow: none;
   }
 }
+
 .icon {
   display: inline-flex;
   vertical-align: middle;
@@ -120,6 +109,7 @@ export default {
 .number-circle {
   font-size: 16px;
 }
+
 .small {
   .number-circle {
     font-size: 14px;

package/components/panels/vertical.vue

@@ -1,14 +1,8 @@
 <template>
-  <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="cssStyles"
-    :href="$href()"
-    @click="$onClick()"
-  >
-    <template v-for="(item, index) in spec.childViews">
+  <component :is="componentName" :class="cssClasses" :style="cssStyles" :href="$href()" @click="$onClick()">
+    <template v-for="(item, index) in spec.childViews" :key="`${index}_${item.view}`">
       <!-- Use view name for key to avoid component reuse issue -->
-      <glib-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :spec="item" />
     </template>
   </component>
 </template>
@@ -19,7 +13,7 @@ export default {
     spec: { type: Object, required: true }
   },
   computed: {
-    cssClasses: function() {
+    cssClasses: function () {
       // TODO: Remove this after migrating to `panels/responsive`
       // Vertical panels are nameless when used in predefined layout (e.g. page.body, list.header, etc.)
       this.spec.view = this.spec.view || "panels/vertical";
@@ -35,7 +29,7 @@ export default {
       }
       return classes;
     },
-    cssStyles: function() {
+    cssStyles: function () {
       const styles = this.genericStyles();
       switch (this.spec.align) {
         case "center":
@@ -50,7 +44,7 @@ export default {
       return styles;
     },
     componentName() {
-      return this.$href() ? "a" : "div";
+      return this.spec.onClick ? "a" : "div";
     }
   }
 };
@@ -92,11 +86,12 @@ a.panels-vertical {
 </style>
 
 <style>
-.layouts-vertical--fill-equally > * {
+.layouts-vertical--fill-equally>* {
   flex: initial;
   height: 100% !important;
 }
-.layouts-vertical--space-equally > * {
+
+.layouts-vertical--space-equally>* {
   flex: initial;
 }
 </style>

package/components/tabBar.vue

@@ -1,24 +1,12 @@
 <template>
   <div :style="'width: 100%'" :class="$classes()">
-    <v-tabs
-      v-model="tab"
-      :background-color="spec.backgroundColor"
-      :slider-color="spec.color"
-      show-arrows
-      :height="spec.height || 60"
-      :grow="$classes().includes('no-grow') ? false : true"
-    >
-      <v-tab
-        v-for="(item, index) in spec.buttons"
-        :key="index"
-        height="100%"
-        :href="$href(item)"
-        @click="$onClick($event, item)"
-      >
-        <common-badge :spec="item">
-          <common-icon v-if="item.icon" :spec="item.icon" />
-          <span :style="{ color: spec.color }">{{ item.text }}</span>
-        </common-badge>
+    <v-tabs v-model="tab" :background-color="spec.backgroundColor" :slider-color="spec.color" show-arrows
+      :height="spec.height || 60" :grow="$classes().includes('no-grow') ? false : true"
+      :model-value="this.spec.activeIndex || null">
+      <v-tab v-for="(item, index) in spec.buttons" :key="index" height="100%" :value="index">
+
+        <span :style="{ color: spec.color }">{{ item.text }}</span>
+
       </v-tab>
     </v-tabs>
     <v-divider />
@@ -26,6 +14,8 @@
 </template>
 
 <script>
+import Action from '../action';
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -36,6 +26,20 @@ export default {
       buttons: null
     };
   },
+  watch: {
+    tab: function (val, oldVal) {
+      if (val == oldVal && oldVal == null) return null;
+
+      this.$nextTick(function () {
+        const activeTab = this.buttons[val]
+        const onClick = activeTab?.onClick
+
+        if (onClick) {
+          Action.execute(onClick, this)
+        }
+      })
+    }
+  },
   methods: {
     $ready() {
       this.buttons = this.spec.tabButtons || this.spec.buttons;
@@ -54,15 +58,19 @@ export default {
   left: 0;
   width: 100%;
 }
+
 .no-divider .v-divider {
   display: none;
 }
+
 .v-tab .v-badge span {
   // Make sure tab label is middle aligned.
   margin: auto 0;
 }
+
 /* .v-badge {
   top: 50%;
   transform: translate(0, -50%);
 } */
 </style>
+