glib-web 2.4.1 → 3.0.0-beta1

package/action.js

@@ -50,11 +50,14 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 import ActionCommandsCustom from "./actions/commands/custom";
+import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
 
 import ActionComponentsUpdate from "./actions/components/update";
 
+import eventBus from "./utils/eventBus";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
@@ -106,6 +109,7 @@ const actions = {
 
   "commands/copy": ActionCommandsCopy,
   "commands/custom": ActionCommandsCustom,
+  "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
   "components/update": ActionComponentsUpdate
@@ -180,7 +184,8 @@ export default class Action {
     // TODO: The execution should be in the following order: onResponse, page render, onLoad
     if (response.header || response.body || response.footer) {
       Utils.http.forceComponentUpdate(() => {
-        window.vueApp.page = response;
+        // window.vueApp.page = response;
+        eventBus.$emit('app/updatePage', response)
       });
     }
 

package/actions/commands/enqueue.js

@@ -0,0 +1,17 @@
+// import Hash from "../../utils/hash";
+
+export default class {
+  // async executeJob(spec, component) {
+  //   console.log("Waiting for next job1...");
+  //   GLib.action.execute(spec.onExecute, component);
+  //   await this.sleep(2000);
+  //   console.log("Waiting for next job2...");
+  // }
+  execute(spec, component) {
+    GLib.queue.enqueue(() => {
+      GLib.action.execute(spec.onExecute, component);
+      // console.log("Waiting for next job0...");
+      // this.executeJob(spec, component);
+    });
+  }
+}

package/actions/components/update.js

@@ -1,29 +1,28 @@
-import Vue from "vue";
+import { Vue } from "../../index";
 
 export default class {
   execute(spec, component) {
     if (!spec.views.length > 1) {
       console.warn("Make sure views only have 1 child!");
     }
-    // const target = component.updatables[spec.targetId];
-    // if (!target) console.error("no component found :" + spec.targetId);
 
     const target = GLib.component.findById(spec.targetId);
     if (target) {
       Object.assign(target.spec, spec.views[0]);
-      this.updateComponent(target);
+      target.$recursiveUpdate();
     }
   }
 
-  updateComponent(component) {
-    component.$ready();
-    component.$forceUpdate();
+  // // TODO: Use $recursiveUpdate(). See mixins/events
+  // updateComponent(component) {
+  //   component.$ready();
+  //   component.$forceUpdate();
 
-    // Execute on next tick to ensure that the child has received the updated spec.
-    Vue.nextTick(() => {
-      component.$children.find(child => {
-        this.updateComponent(child);
-      });
-    });
-  }
+  //   // Execute on next tick to ensure that the child has received the updated spec.
+  //   Vue.nextTick(() => {
+  //     component.$children.find(child => {
+  //       this.updateComponent(child);
+  //     });
+  //   });
+  // }
 }

package/app.vue

@@ -1,25 +1,14 @@
 <template>
   <v-app :class="page.styleClasses">
-    <component
-      :is="containerComponent"
-      :spec="formSpec"
-      :style="'height: 100%;'"
-    >
+    <component :is="containerComponent" :spec="formSpec" :style="'height: 100%;'">
       <nav-appbar ref="appBar" :page="page" />
 
-      <v-progress-linear
-        v-if="$root.vueApp.indicator"
-        :indeterminate="true"
-        height="5"
-        style="position: fixed; z-index: 4;"
-      >
+      <v-progress-linear v-if="$root.vueApp.indicator" :indeterminate="true" height="5"
+        style="position: fixed; z-index: 4;">
       </v-progress-linear>
 
       <v-main :style="`height: ${mainHeight}px;`">
-        <v-container
-          :fluid="page.template == 'fullWidth'"
-          :class="containerClasses"
-        >
+        <v-container :fluid="page.template == 'fullWidth'" :class="containerClasses">
           <div class="pages-header">
             <panels-responsive :spec="header" />
           </div>
@@ -38,25 +27,25 @@
 </template>
 
 <script>
-import NavAppBar from "./nav/appbar";
+import NavAppBar from "./nav/appbar.vue";
 import Utils from "./utils/helper";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
-import FormPanel from "./components/panels/form";
+import FormPanel from "./components/panels/form.vue";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
-    "panels-form": FormPanel
+    "panels-form": FormPanel,
   },
   mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
-    page: { type: Object, required: true }
+    page: { type: Object, required: true },
   },
   data() {
     return {
       title: "...",
-      mainHeight: 0
+      mainHeight: 0,
     };
   },
   computed: {
@@ -83,10 +72,10 @@ export default {
     // Use computed to ensure that the spec gets updated when the user navigates to another page.
     formSpec() {
       return this.page.fullPageForm;
-    }
+    },
   },
   watch: {
-    "$root.indicator": function(val, oldVal) {
+    "$root.indicator": function (val, oldVal) {
       document.title = val ? "..." : this.page.title;
     }
   },
@@ -102,7 +91,7 @@ export default {
     $mounted() {
       window.addEventListener(
         "resize",
-        event => {
+        (event) => {
           this.updateMainHeight();
         },
         true
@@ -118,7 +107,7 @@ export default {
         if (!Utils.settings.isDev) {
           console.log(`Tracking analytics: ${window.location}`);
           this.$gtag.pageview({
-            page_location: window.location
+            page_location: window.location,
           });
         }
       } else {
@@ -146,8 +135,8 @@ export default {
     updateMainHeight() {
       console.debug("Setting body height");
       this.mainHeight = window.innerHeight - this.$refs.appBar.$el.offsetHeight;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -165,6 +154,7 @@ export default {
 body {
   // Hide superfluous scrollbar (Edge)
   -ms-overflow-style: none;
+
   * {
     -ms-overflow-style: initial;
   }
@@ -174,6 +164,7 @@ body {
     display: none;
   }
 }
+
 html {
   // Hide superfluous scrollbar (Firefox)
   scrollbar-width: none;
@@ -185,15 +176,22 @@ body,
 #app {
   height: 100%;
 }
+
 /******/
 
 /*** panels/scrollTo support ***/
 .glib-scrollto {
   transition: background 0.5s;
 }
+
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
+
+.glib-clickable {
+  cursor: pointer;
+}
+
 /******/
 </style>
 
@@ -212,5 +210,6 @@ body,
   /* overflow-y: auto; */
   overflow-y: overlay;
 }
+
 /******/
 </style>

package/components/_button.vue

@@ -1,32 +1,19 @@
 <template>
-  <common-badge :spec="spec">
-    <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
+  <!-- <common-badge :spec="spec"> -->
+  <!-- Use `click.prevent` to prevent bubbling when clicking a dropdown button that is
          located in a list row that has href. -->
-    <v-btn
-      :type="type"
-      :disabled="disabled || $isBusy || spec.disabled"
-      :style="styles()"
-      :class="$classes()"
-      :href="$href()"
-      :rel="$rel()"
-      :text="linkStyling || $classes().includes('text')"
-      :small="linkStyling"
-      :icon="$classes().includes('icon')"
-      :outlined="$classes().includes('outlined')"
-      :tile="$classes().includes('tile')"
-      :rounded="$classes().includes('rounded')"
-      :depressed="$classes().includes('depressed')"
-      @click.prevent="
-        type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
-      "
-      v-on="eventHandlers"
-    >
-      <span><common-icon :spec="spec.icon || {}"/></span>
-      <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
-        {{ spec.text }}
-      </div>
-    </v-btn>
-  </common-badge>
+  <v-btn :type="type" :disabled="disabled || $isBusy || spec.disabled" :style="styles()" :class="$classes()"
+    :href="$href()" :rel="$rel()" :small="linkStyling || null" :icon="$classes().includes('icon')"
+    :outlined="$classes().includes('outlined') || null" :tile="$classes().includes('tile') || null"
+    :rounded="$classes().includes('rounded')" :depressed="$classes().includes('depressed') || null" @click.prevent="
+      type == 'submit' ? $dispatchEvent('forms/submit') : $onClick()
+    ">
+    <span><common-icon :spec="spec.icon || {}" /></span>
+    <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
+      {{ spec.text }}
+    </div>
+  </v-btn>
+  <!-- </common-badge> -->
 </template>
 
 <script>
@@ -38,7 +25,7 @@ export default {
     hideTextOnXs: { type: Boolean },
     eventHandlers: { type: Object, default: null }
   },
-  data: function() {
+  data: function () {
     return {
       linkStyling: false
     };
@@ -79,6 +66,7 @@ button {
   min-width: 0;
   margin: 0;
 }
+
 .v-btn {
   &.link {
     text-transform: none !important;
@@ -93,17 +81,21 @@ button {
     min-width: auto;
   }
 }
+
 .v-btn--rounded {
   // Override .v-application.rounded
   border-radius: 28px !important;
 }
+
 .v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
   min-width: 0;
   padding: 0;
 }
+
 .v-banner__wrapper .v-btn.v-size--default {
   font-size: 12px;
 }
+
 .breadcrumbs .v-btn.link {
   display: inline-table;
   justify-content: left;
@@ -114,6 +106,7 @@ button {
   .v-banner__wrapper.v-btn.v-size--default {
     font-size: 0.875rem;
   }
+
   .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
     min-width: 64px;
     padding: 0 16px;

package/components/_chip.vue

@@ -1,23 +1,18 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-badge :spec="spec">
-        <v-chip
-          v-if="spec.onClick"
-          :style="genericStyles()"
-          :class="$classes()"
-          :href="$href()"
-          @click="$onClick()"
-          v-on="on"
-        >
-          {{ spec.text }}
-        </v-chip>
-        <v-chip v-else :style="genericStyles()" :class="$classes()" v-on="on">
-          {{ spec.text }}
-        </v-chip>
-      </common-badge>
-    </template>
-  </common-tooltip>
+  <!-- <common-tooltip :spec="spec"> -->
+  <!-- <template v-slot:activator="{ on }"> -->
+  <!-- <common-badge :spec="spec"> -->
+  <div>
+    <v-chip v-if="spec.onClick" :style="genericStyles()" :class="$classes()" :href="$href()" @click="$onClick()">
+      {{ spec.text }}
+    </v-chip>
+    <v-chip v-else :style="genericStyles()" :class="$classes()">
+      {{ spec.text }}
+    </v-chip>
+  </div>
+  <!-- </common-badge> -->
+  <!-- </template> -->
+  <!-- </common-tooltip> -->
 </template>
 
 <script>

package/components/_dropdownMenu.vue

@@ -1,30 +1,16 @@
 <template>
   <v-menu left bottom>
-    <template v-slot:activator="{ on, attrs }">
-      <v-btn
-        :icon="iconStyling"
-        :text="textStyling"
-        v-bind="attrs"
-        style="color: inherit;"
-        v-on="on"
-        @click.stop.prevent=""
-      >
-        <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"
-          ><common-icon :spec="spec.icon || {}"
-        /></span>
+    <template v-slot:activator="{ props }">
+      <v-btn :icon="iconStyling" :text="textStyling || null" v-bind="props" style="color: inherit;"
+        @click.stop.prevent="">
+        <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"><common-icon :spec="spec.icon || {}" /></span>
         {{ spec.text }}
       </v-btn>
     </template>
 
     <v-list>
-      <v-list-item
-        v-for="(childItem, childIndex) in spec.childButtons"
-        :key="childIndex"
-      >
-        <common-button
-          :spec="buttonSpec(childItem)"
-          :disabled="childItem.disabled || $isBusy"
-        />
+      <v-list-item v-for="(childItem, childIndex) in spec.childButtons" :key="childIndex">
+        <common-button :spec="buttonSpec(childItem)" :disabled="childItem.disabled || $isBusy" />
       </v-list-item>
     </v-list>
   </v-menu>
@@ -35,7 +21,7 @@ export default {
   props: {
     spec: { type: Object, required: true }
   },
-  data: function() {
+  data: function () {
     return {
       iconStyling: false,
       textStyling: false
@@ -63,13 +49,14 @@ export default {
 .v-list-item {
   padding: 0 8px 0 8px;
 
-  > a,
-  > button {
+  >a,
+  >button {
     width: 100%;
     min-height: 48px;
     justify-content: flex-start;
   }
 }
+
 .padder {
   margin-right: 8px;
 }

package/components/_icon.vue

@@ -1,9 +1,9 @@
 <template>
-  <common-badge :spec="spec">
-    <v-icon :style="genericStyles()" :size="size" :color="color">{{
-      value
-    }}</v-icon>
-  </common-badge>
+  <!-- <common-badge :spec="spec"> -->
+  <v-icon :style="genericStyles()" :size="size" :color="color">{{
+    value
+  }}</v-icon>
+  <!-- </common-badge> -->
 </template>
 
 <script>

package/components/_responsive.vue

@@ -1,25 +1,9 @@
 <template>
-  <component
-    :is="componentName"
-    :class="cssClasses"
-    :style="$styles()"
-    :href="$href()"
-    @click="$onClick()"
-    v-on="eventHandlers"
-  >
+  <component :is="componentName" :class="cssClasses" :style="$styles()" :href="$href()" @click="$onClick()">
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
-        <glib-component
-          v-if="isColumn(item)"
-          :key="viewKey(item, index)"
-          :spec="item"
-        />
-        <div
-          v-else
-          :key="viewKey(item, index)"
-          class="full-width"
-          :style="innerStyles"
-        >
+        <glib-component v-if="isColumn(item)" :key="viewKey(item, index)" :spec="item" />
+        <div v-else :key="'else-' + viewKey(item, index)" class="full-width" :style="innerStyles">
           <glib-component :spec="item" />
         </div>
       </template>
@@ -28,7 +12,6 @@
 </template>
 
 <script>
-import Vue from "vue";
 
 export default {
   props: {
@@ -62,7 +45,7 @@ export default {
         default:
           align = "flex-start";
       }
-      Vue.set(this.innerStyles, "align-items", align);
+      Object.assign(this.innerStyles, { 'align-items': align })
     },
     isColumn(item) {
       return item.view == "panels/column-v1";
@@ -80,16 +63,19 @@ export default {
   margin-left: 0;
   margin-right: 0;
 }
+
 .full-width {
   width: 100%;
   flex: 0 0 100%;
   display: flex;
   flex-direction: column;
 }
+
 // Needed to ensure that split's sub panels have the same height
 .full-height {
   height: 100%;
 }
+
 a.panels-responsive {
   color: inherit;
   text-decoration: inherit;

package/components/avatar.vue

@@ -1,19 +1,15 @@
 <template>
-  <common-tooltip :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-badge :spec="spec">
-        <v-avatar :size="spec.size">
-          <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
-          <img
-            :style="$styles()"
-            :src="spec.url || spec.base64Data"
-            @click="$onClick()"
-            v-on="on"
-          />
-        </v-avatar>
-      </common-badge>
-    </template>
-  </common-tooltip>
+  <!-- <common-tooltip :spec="spec"> -->
+  <!-- <template v-slot:activator="{ on }"> -->
+  <!-- <common-badge :spec="spec"> -->
+  <v-avatar :size="spec.size">
+    <!-- Use `img` instead of `v-img` otherwise the rounded border will not work. -->
+    <img :style="$styles()" :src="spec.url || spec.base64Data" @click="$onClick()" />
+  </v-avatar>
+  <!-- </common-badge> -->
+  <!-- </template> -->
+  <!-- </common-tooltip>
+   -->
 </template>
 
 <script>

package/components/banners/alert.vue

@@ -1,11 +1,6 @@
 <template>
-  <v-alert
-    :style="genericStyles()"
-    :class="$classes()"
-    :value="true"
-    :color="color"
-    :outlined="!$classes().includes('frameless')"
-  >
+  <v-alert :style="genericStyles()" :class="$classes()" :value="true" :color="color"
+    :outlined="!$classes().includes('frameless') || null">
     <!-- <span class="padder" v-if="spec.icon"><common-icon :spec="spec.icon || {}" /></span> -->
     <!-- <common-icon :spec="spec.icon || {}" /> -->
     <common-message :spec="spec" />

package/components/banners/select.vue

@@ -1,34 +1,21 @@
 <template>
-  <v-banner
-    :style="genericStyles()"
-    :class="$classes()"
-    :color="spec.color || color"
-    :dark="dark"
-    single-line
-    :outlined="!$classes().includes('frameless')"
-  >
-    <common-icon v-if="spec.icon" slot="icon" :spec="spec.icon" />
+  <div :style="genericStyles()" :class="$classes()" :color="spec.color || color">
+    <v-banner>
 
-    <common-message :spec="spec" />
-
-    <template v-slot:actions>
-      <template v-for="(item, index) in spec.buttons">
-        <common-dropdownMenu
-          v-if="item.childButtons"
-          :key="index"
-          :spec="item"
-          :disabled="$isBusy"
-        />
-        <common-button
-          v-else
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-          :hide-text-on-xs="true"
-        />
+      <template v-if="spec.icon" v-slot:prepend>
+        <common-icon slot="icon" :spec="spec.icon" />
       </template>
-    </template>
-  </v-banner>
+
+      <v-banner-text>{{ spec.message }}</v-banner-text>
+
+      <v-banner-actions>
+        <template v-for="(item, index) in spec.buttons">
+          <common-dropdownMenu v-if="item.childButtons" :key="'left-' + index" :spec="item" :disabled="$isBusy" />
+          <common-button v-else :key="index" :spec="buttonSpec(item)" :disabled="$isBusy" :hide-text-on-xs="true" />
+        </template>
+      </v-banner-actions>
+    </v-banner>
+  </div>
 </template>
 
 <script>
@@ -68,11 +55,12 @@ export default {
 .frameless {
   padding: 0;
 }
+
 .v-list-item {
   padding: 0 8px 0 8px;
 
-  > a,
-  > button {
+  >a,
+  >button {
     width: 100%;
     min-height: 48px;
     justify-content: flex-start;

package/components/button.vue

@@ -1,9 +1,9 @@
 <template>
-  <common-tooltip ref="tooltip" :spec="spec">
-    <template v-slot:activator="{ on }">
-      <common-button :spec="spec" :disabled="$isBusy" :event-handlers="on" />
-    </template>
-  </common-tooltip>
+  <!-- <common-tooltip ref="tooltip" :spec="spec"> -->
+  <!-- <template v-slot:activator="{ on }"> -->
+  <common-button :spec="spec" :disabled="$isBusy" />
+  <!-- </template> -->
+  <!-- </common-tooltip> -->
 </template>
 
 <script>