glib-web 2.5.0 → 3.0.0-beta1

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>
+

package/index.js

@@ -1,26 +1,55 @@
-import Vue from "vue";
-export { Vue };
-
+import { createApp, h } from "vue";
+import vuetify from "./plugins/vuetify";
 import App from "./app.vue";
 
-import * as VueGoogleMaps from "vue2-google-maps";
-Vue.use(VueGoogleMaps, {
-  load: {
-    key: process.env.GMAPS_API_KEY,
-    libraries: "places"
+window.vueApp = {
+  vuetify: vuetify,
+  page: window.__page,
+  indicator: false,
+  // Rename to isPageStale
+  isStale: false,
+  /// Dirty form handling
+  isFormSubmitted: false,
+  isFormDirty: false,
+  ///
+  stateUpdatedAt: null,
+  webSocket: { channels: {}, header: {} },
+  actionCable: { channels: {} },
+  registeredComponents: [],
+  temp: {}
+}
+
+const Vue = createApp({
+  vuetify: window.vueApp.vuetify,
+  data: {
+    vueApp: window.vueApp,
+  },
+  mounted() {
+    eventBus.$on('app/updatePage', page => this.vueApp = Object.assign({}, this.vueApp, { page: page }))
+  },
+  render: function () {
+    return h(App, { page: this.$data.vueApp.page });
   }
-});
+})
+
+
+Vue.use(vuetify)
+
+// import * as VueGoogleMaps from "vue2-google-maps";
+// Vue.use(VueGoogleMaps, {
+//   load: {
+//     key: process.env.GMAPS_API_KEY,
+//     libraries: "places"
+//   }
+// });
 
 import "./styles/test.scss";
 import "./styles/test.sass";
 
-import Vuetify from "vuetify";
-import "vuetify/dist/vuetify.min.css";
 // Only used for social media icons
-import "@fortawesome/fontawesome-free/css/all.css";
+// import "@fortawesome/fontawesome-free/css/all.css";
 // import "material-design-icons-iconfont/dist/material-design-icons.css";
 // import "@mdi/font/css/materialdesignicons.css";
-Vue.use(Vuetify);
 
 import Chartkick from "vue-chartkick";
 import Chart from "chart.js";
@@ -29,8 +58,8 @@ Chart.plugins.register(annotationPlugin);
 Vue.use(Chartkick.use(Chart));
 
 // TODO: make this opt-in
-import VueYoutube from "vue-youtube";
-Vue.use(VueYoutube);
+// import VueYoutube from "vue-youtube";
+// Vue.use(VueYoutube);
 
 // import VueAnalytics from 'vue-analytics'
 // // TODO: Avoid hardcoding
@@ -38,32 +67,32 @@ Vue.use(VueYoutube);
 //   id: 'UA-146876849-1'
 // })
 
-import VueSocialSharing from "vue-social-sharing";
-Vue.use(VueSocialSharing, { networks: { copy: "" } });
+// import VueSocialSharing from "vue-social-sharing";
+// Vue.use(VueSocialSharing, { networks: { copy: "" } });
 
 import "./extensions/string.js";
 import "./extensions/array.js";
 
 // Recursive components must be global
-import VerticalPanel from "./components/panels/vertical";
-import ResponsivePanel from "./components/panels/responsive";
-import Component from "./components/component";
-import CommonIcon from "./components/_icon";
-import CommonBadge from "./components/_badge";
-import CommonTooltip from "./components/_tooltip";
-import CommonButton from "./components/_button";
-import CommonChip from "./components/_chip";
-import CommonMessage from "./components/_message";
-import CommonDropdownMenu from "./components/_dropdownMenu";
-import CommonResponsive from "./components/_responsive";
-import CommonTemplateMenu from "./templates/_menu";
-import RichButton from "./components/button";
+import VerticalPanel from "./components/panels/vertical.vue";
+import ResponsivePanel from "./components/panels/responsive.vue";
+import Component from "./components/component.vue";
+import CommonIcon from "./components/_icon.vue";
+// import CommonBadge from "./components/_badge.vue";
+// import CommonTooltip from "./components/_tooltip.vue";
+import CommonButton from "./components/_button.vue";
+import CommonChip from "./components/_chip.vue";
+import CommonMessage from "./components/_message.vue";
+import CommonDropdownMenu from "./components/_dropdownMenu.vue";
+import CommonResponsive from "./components/_responsive.vue";
+import CommonTemplateMenu from "./templates/_menu.vue";
+import RichButton from "./components/button.vue";
 Vue.component("panels-vertical", VerticalPanel);
 Vue.component("panels-responsive", ResponsivePanel);
 Vue.component("common-button", CommonButton);
 Vue.component("common-icon", CommonIcon);
-Vue.component("common-badge", CommonBadge);
-Vue.component("common-tooltip", CommonTooltip);
+// Vue.component("common-badge", CommonBadge);
+// Vue.component("common-tooltip", CommonTooltip);
 Vue.component("common-chip", CommonChip);
 Vue.component("common-message", CommonMessage);
 Vue.component("common-dropdownMenu", CommonDropdownMenu);
@@ -91,7 +120,7 @@ Vue.mixin(scrollingMixin);
 import datasetMixins from "./components/mixins/dataset.js";
 Vue.mixin(datasetMixins);
 
-Vue.prototype.extension = {};
+Vue.config.globalProperties.extension = {};
 import extension from "./components/mixins/extension.js";
 Vue.mixin(extension);
 
@@ -102,8 +131,8 @@ Vue.directive("longclick", window.longClickInstance);
 // TODO: Deprecate
 import TypeUtils from "./utils/type";
 Vue.use({
-  install: function(Vue, options) {
-    Vue.prototype.$type = {
+  install: function (Vue, options) {
+    Vue.config.globalProperties.$type = {
       isObject: TypeUtils.isObject,
       isString: TypeUtils.isString,
       isNumber: TypeUtils.isNumber,
@@ -124,7 +153,6 @@ import Framework from "./utils/public";
 window.GLib = Framework;
 
 import { settings } from "./utils/settings";
-export { settings };
 
 import driverCustomBehavior from "./plugins/driverCustomBehavior";
 Vue.use(driverCustomBehavior);
@@ -141,6 +169,7 @@ Vue.use(updatableComponent);
 // })
 
 import VueGtag from "vue-gtag";
+import eventBus from "./utils/eventBus";
 
 document.addEventListener("DOMContentLoaded", () => {
   const gtagId = settings.gtagId;
@@ -155,44 +184,11 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
-  window.vueApp = {
-    vuetify: new Vuetify({
-      icons: {
-        iconfont: "md"
-      },
-      theme: {
-        themes: Utils.settings.themes
-      },
-      breakpoint: {
-        smAndDown: true
-      }
-    }),
-    page: window.__page,
-    indicator: false,
-    // Rename to isPageStale
-    isStale: false,
-    /// Dirty form handling
-    isFormSubmitted: false,
-    isFormDirty: false,
-    ///
-    stateUpdatedAt: null,
-    webSocket: { channels: {}, header: {} },
-    actionCable: { channels: {} },
-    registeredComponents: [],
-    temp: {}
-  };
-  new Vue({
-    el: "#app",
-    vuetify: window.vueApp.vuetify,
-    data: {
-      vueApp: window.vueApp
-    },
-    render: function(createElement) {
-      return createElement(App, { props: { page: this.$data.vueApp.page } });
-    }
-  });
+  Vue.mount("#app")
 });
 
+export { Vue, settings }
+
 // The above code uses Vue without the compiler, which means you cannot
 // use Vue to target elements in your existing html templates. You would
 // need to always use single file components.

package/nav/appbar.vue

@@ -34,8 +34,8 @@
 </template>
 
 <script>
-import NavDrawer from "./drawer";
-import ViewsAvatar from "../components/avatar";
+import NavDrawer from "./drawer.vue";
+import ViewsAvatar from "../components/avatar.vue";
 
 export default {
   components: {
@@ -59,7 +59,7 @@ export default {
     },
     // We could've used the `app` attribute on `v-toolbar` if it didn't conflict with our header-footer css.
     leftPadding: function () {
-      switch (this.$vuetify.breakpoint.name) {
+      switch (this.$vuetify.display.name) {
         case "lg":
         case "xl":
           return { "padding-left": "270px" };
@@ -71,7 +71,7 @@ export default {
       return this.leftPadding !== null;
     },
     showMobileMenu() {
-      return this.rightButtons.length > 0 && this.$vuetify.breakpoint.smAndDown;
+      return this.rightButtons.length > 0 && this.$vuetify.display.smAndDown;
     },
     mobileMenu() {
       return {