glib-web 2.5.1 → 2.6.0

package/actions/components/update.js

@@ -1,5 +1,3 @@
-import Vue from "vue";
-
 export default class {
   execute(spec, component) {
     if (!spec.views.length > 1) {
@@ -12,17 +10,4 @@ export default class {
       target.$recursiveUpdate();
     }
   }
-
-  // // 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);
-  //     });
-  //   });
-  // }
 }

package/app.vue

@@ -125,15 +125,15 @@ export default {
         console.warn("Analytics not setup. Set `settings.gtagId`.");
       }
 
+      // Use setTimeout() to wait until page is rendered. Don't use nextTick() because
+      // it would execute much earlier (before all components finish initializing).
       if (Utils.history.isPoppedState(this.page)) {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onRefocus, this);
           GLib.action.execute(this.page.replayGetResponse, this);
         });
       } else {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onLoad, this);
         });
       }
@@ -194,8 +194,29 @@ body,
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
-.glib-clickable {
+// Don't override the default button's effect.
+.glib-clickable:not(.v-btn) {
   cursor: pointer;
+
+  // // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:before {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(100, 100, 100, 0.1);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    background: rgba(100, 100, 100, 0.2);
+  }
+}
+.glib-clickable.theme--light.v-list-item:hover:before {
+  opacity: 1; // Override Vuetify
 }
 /******/
 </style>

package/components/_button.vue

@@ -6,11 +6,11 @@
       :type="type"
       :disabled="disabled || $isBusy || spec.disabled"
       :style="styles()"
-      :class="$classes()"
+      :class="classes()"
       :href="$href()"
       :rel="$rel()"
       :text="linkStyling || $classes().includes('text')"
-      :small="linkStyling"
+      :small="linkStyling || $classes().includes('small')"
       :icon="$classes().includes('icon')"
       :outlined="$classes().includes('outlined')"
       :tile="$classes().includes('tile')"
@@ -50,12 +50,16 @@ export default {
       });
     },
     styles() {
-      const styles = this.genericStyles();
+      const styles = this.$styles();
       if (this.linkStyling) {
         styles["color"] = styles["color"] || "#1976d2";
       }
       return styles;
     },
+    classes() {
+      const classes = this.$classes();
+      return classes;
+    },
     $registryEnabled() {
       return false;
     }

package/components/_responsive.vue

@@ -94,21 +94,21 @@ a.panels-responsive {
   color: inherit;
   text-decoration: inherit;
 
-  // So that we can display a semi-transparent layer on hover (see below)
-  position: relative;
+  // // So that we can display a semi-transparent layer on hover (see below)
+  // position: relative;
 
-  &:hover:after {
-    content: "\A";
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  // &:hover:after {
+  //   content: "\A";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(0, 0, 0, 0.1);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
 
-  &:active:after {
-    background: rgba(0, 0, 0, 0.4);
-  }
+  // &:active:after {
+  //   background: rgba(0, 0, 0, 0.4);
+  // }
 }
 </style>

package/components/component.vue

@@ -1,10 +1,31 @@
 <template>
-  <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
-  <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
-  <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
-  <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
+  <fields-text
+    v-if="name == 'fields-text'"
+    ref="delegate"
+    :spec="spec"
+    type="text"
+  />
+  <fields-text
+    v-else-if="name == 'fields-number'"
+    ref="delegate"
+    :spec="spec"
+    type="number"
+  />
+  <fields-text
+    v-else-if="name == 'fields-email'"
+    ref="delegate"
+    :spec="spec"
+    type="email"
+  />
+  <fields-text
+    v-else-if="name == 'fields-url'"
+    ref="delegate"
+    :spec="spec"
+    type="url"
+  />
   <fields-text
     v-else-if="name == 'fields-password'"
+    ref="delegate"
     :spec="spec"
     type="password"
   />
@@ -21,12 +42,19 @@
   <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
   <fields-googlePlace
     v-else-if="spec.view == 'fields/googlePlace-v1'"
+    ref="delegate"
     :spec="spec"
   />
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component :is="name" v-else-if="name" :id="spec.id" :spec="spec" />
+  <component
+    :is="name"
+    v-else-if="name"
+    :id="spec.id"
+    ref="delegate"
+    :spec="spec"
+  />
 
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>
@@ -216,13 +244,13 @@ export default {
       name: null
     };
   },
-  beforeUpdate() {
-    // NOTE: Not sure what this is for
-    // Make sure vuejs will not attempt to render old data.
-    // if (this._mountedUrl !== window.location.href) {
-    //   this.name = null;
-    // }
-  },
+  // beforeUpdate() {
+  //   // NOTE: Not sure what this is for
+  //   // Make sure vuejs will not attempt to render old data.
+  //   // if (this._mountedUrl !== window.location.href) {
+  //   //   this.name = null;
+  //   // }
+  // },
   methods: {
     $ready() {
       const name = Utils.app.componentName(this.spec.view);
@@ -235,6 +263,9 @@ export default {
         }
       }
     },
+    $update() {
+      this.$refs.delegate.$update();
+    },
     $registryEnabled() {
       return false;
     }

package/components/fields/check.vue

@@ -58,12 +58,6 @@ export default {
         );
       }, 100);
 
-      // if (this.spec.submitOnChange) {
-      //   setTimeout(() => {
-      //     this.$dispatchEvent("forms/submit");
-      //   }, 200);
-      // }
-
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
           GLib.action.execute(onChange, this);

package/components/mixins/events.js

@@ -29,21 +29,38 @@ export default {
     this.$created();
   },
   mounted() {
-    this._executeIfReady(false);
+    // this._executeIfReady(false);
+    this._ready();
     this.$mounted();
   },
   updated() {
-    this._executeIfReady(true);
+    if (!this._renderingTheSamePage()) {
+      this.$tearDown();
+      this._ready();
+    }
+    // this._executeIfReady(true);
     this.$updated();
   },
+  // _executeIfReady(updated) {
+  //   if (updated) {
+  //     if (!this._renderingTheSamePage()) {
+  //       this.$tearDown();
+  //       this._ready();
+  //     }
+  //   } else {
+  //     this._ready();
+  //   }
+  // },
   destroyed() {
     this.$tearDown();
   },
   watch: {
     // See Utils.http
     "$root.vueApp.isStale": function(val, oldVal) {
-      // Make sure $ready() will be called in the next update
-      this._mountedUrl = null;
+      if (val === true) {
+        // Make sure $ready() will be called in the next update
+        this._mountedUrl = null;
+      }
     }
   },
   methods: {
@@ -102,16 +119,6 @@ export default {
       window.removeEventListener("resize", handler);
       this._pageBody.removeEventListener("scroll", handler);
     },
-    _executeIfReady(updated) {
-      if (updated) {
-        if (!this._renderingTheSamePage()) {
-          this.$tearDown();
-          this._ready();
-        }
-      } else {
-        this._ready();
-      }
-    },
     _renderingTheSamePage() {
       return this._mountedUrl === window.location.href;
     },
@@ -152,8 +159,15 @@ export default {
     $updated() {
       // To be overridden
     },
-    $recursiveUpdate() {
+    // Override to provide customization
+    $update() {
+      // This causes user input getting removed which is not what we want in some situations.
+      // // This is so that the field's value gets updated to the new `value` property.
+      // this._linkFieldModels();
       this.$ready();
+    },
+    $recursiveUpdate() {
+      this.$update();
       this.$forceUpdate();
 
       // Execute on next tick to ensure that the child has received the updated spec.
@@ -193,11 +207,15 @@ export default {
       Utils.type.ifObject(this.spec.onChange, onChange => {
         this.$nextTick(() => {
           const value = newValue || this.fieldModel;
-          const params = {
-            [this.spec.paramNameForFormData || "formData"]: {
-              [this.fieldName]: value
-            }
+
+          const formData = {
+            [this.fieldName]: value
           };
+          const params = this.spec.paramNameForFormData
+            ? {
+                [this.spec.paramNameForFormData]: formData
+              }
+            : formData;
           const data = Object.assign({}, onChange, params);
           GLib.action.execute(data, this);
         });

package/components/panels/form.vue

@@ -78,20 +78,21 @@ export default {
       this.url = url;
       this.params = params;
 
-      let firstAutoFocus = false;
       this.modifiedSpec = this.spec;
-      this.modifiedSpec.childViews.map(childView => {
-        if (
-          childView.view.startsWith("fields/") &&
-          childView.view !== "fields/hidden-v1" &&
-          !firstAutoFocus
-        ) {
-          childView.autoFocus = true;
-          firstAutoFocus = true;
-        }
+      if (this.spec.autoFocus) {
+        let firstAutoFocus = false;
 
-        return childView;
-      });
+        this.modifiedSpec.childViews.forEach(childView => {
+          if (
+            childView.view.startsWith("fields/") &&
+            childView.view !== "fields/hidden-v1" &&
+            !firstAutoFocus
+          ) {
+            childView.autoFocus = true;
+            firstAutoFocus = true;
+          }
+        });
+      }
     },
     onSubmit(event) {
       event.preventDefault();

package/components/panels/horizontal.vue

@@ -92,7 +92,10 @@ export default {
       return styles;
     },
     childStyles() {
-      const styles = {};
+      const styles = {
+        width: "100%",
+        height: "100%"
+      };
 
       switch (this.spec.align) {
         case "middle":
@@ -114,7 +117,7 @@ export default {
   methods: {
     $ready() {
       this.dragSupport = this.spec.dragSupport;
-      this.childViews = this.spec.childViews;
+      this.childViews = this.spec.childViews || [];
     },
     $displayValue() {
       return "flex";
@@ -132,7 +135,8 @@ export default {
         return;
       }
 
-      console.log("DRAG1", this.childViews);
+      // Ensure $ready() of its children gets called.
+      this.$recursiveUpdate();
 
       const itemId = event.clone.dataset.dragitemid; // The item that got dragged/dropped
       const oldPanelId = event.from.dataset.dragpanelid;
@@ -148,11 +152,11 @@ export default {
         }
       });
 
-      console.log("DRAG2", mergedSpec, event.clone, event);
-
       GLib.action.execute(mergedSpec, this);
-
-      console.log("DRAG3", this.childViews);
+    },
+    action_merge(mergedSpec) {
+      Object.assign(this.spec, mergedSpec);
+      this.$ready();
     }
   }
 };
@@ -173,22 +177,22 @@ a.panels-horizontal {
   color: inherit;
   text-decoration: inherit;
 
-  // So that we can display a semi-transparent layer on hover (see below)
-  position: relative;
-
-  &:hover:after {
-    content: "\A";
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.2);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  // // So that we can display a semi-transparent layer on hover (see below)
+  // position: relative;
 
-  &:active:after {
-    background: rgba(0, 0, 0, 0.4);
-  }
+  // &:hover:after {
+  //   content: "\A";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(0, 0, 0, 0.2);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
+
+  // &:active:after {
+  //   background: rgba(0, 0, 0, 0.4);
+  // }
 }
 </style>
 

package/components/panels/list.vue

@@ -32,7 +32,7 @@
             :ref="`row_${sectionIndex}_${rowIndex}`"
             :data-dragRowId="row.id"
           >
-            <v-divider v-if="!spec.responsiveCols && rowIndex == 0" />
+            <!-- <v-divider v-if="!spec.responsiveCols && rowIndex == 0" /> -->
 
             <component
               :is="template(row)"
@@ -40,13 +40,13 @@
               :responsive-cols="spec.responsiveCols"
               :index="rowIndex"
             />
-            <v-divider
+            <!-- <v-divider
               v-if="
                 !spec.responsiveCols &&
                   (rowIndex != section.rows.length - 1 ||
                     sectionIndex != sections.length - 1)
               "
-            />
+            /> -->
           </div>
         </draggable>
 
@@ -230,6 +230,10 @@ export default {
         console.log("Reordering canceled");
         return;
       }
+
+      // Ensure $ready() of its children gets called.
+      this.$recursiveUpdate();
+
       const targetSectionIndex = this.getSectionIndex(event.to);
       // const targetSection = this.getSection(targetSectionIndex);
 

package/components/panels/split.vue

@@ -1,4 +1,4 @@
-<template v-if="content">
+<template>
   <div :class="classes()" :style="genericStyles()">
     <div v-if="spec.left" class="layouts-split__side">
       <panels-responsive :spec="spec.left" />

package/components/panels/vertical.vue

@@ -72,22 +72,22 @@ a.panels-vertical {
   color: inherit;
   text-decoration: inherit;
 
-  // So that we can display a semi-transparent layer on hover (see below)
-  position: relative;
+  // // So that we can display a semi-transparent layer on hover (see below)
+  // position: relative;
 
-  &:hover:after {
-    content: "\A";
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.2);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  // &:hover:after {
+  //   content: "\A";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(0, 0, 0, 0.2);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
 
-  &:active:after {
-    background: rgba(0, 0, 0, 0.4);
-  }
+  // &:active:after {
+  //   background: rgba(0, 0, 0, 0.4);
+  // }
 }
 </style>
 

package/extensions/string.js

@@ -23,3 +23,21 @@ String.prototype.presence = function() {
 String.prototype.truncate = function(n) {
   return this.length > n ? this.slice(0, n - 1) + "..." : this.toString();
 };
+
+// See https://stackoverflow.com/questions/3586775/what-is-the-correct-way-to-check-for-string-equality-in-javascript
+String.prototype.equals = function(str) {
+  // Perform comparison on the primitive string values
+  return this.valueOf() == str.valueOf();
+};
+
+String.prototype.compare = function(str) {
+  const str1 = this.valueOf();
+  const str2 = str.valueOf();
+  if (str1 < str2) {
+    return -1;
+  }
+  if (str1 > str2) {
+    return 1;
+  }
+  return 0;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "",
   "main": "index.js",
   "scripts": {

package/plugins/updatableComponent.js

@@ -1,12 +1,18 @@
 export default {
   install: (Vue, options) => {
     Vue.mixin({
-      created: function() {
+      mounted: function() {
         let spec = this.spec;
         if (spec && spec.id && this.$registryEnabled()) {
           GLib.component.register(spec.id, this);
         }
       },
+      destroyed: function() {
+        let spec = this.spec;
+        if (spec && spec.id && this.$registryEnabled()) {
+          GLib.component.deregister(spec.id);
+        }
+      },
       methods: {
         $registryEnabled() {
           // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).

package/templates/thumbnail.vue

@@ -1,34 +1,10 @@
 <template>
-  <div style="display:flex;" class="thumbnail" :class="cssClasses">
-    <div
-      v-if="spec.leftOuterButtons"
-      class="left-universal"
-      style="display:flex; margin-top:10px;"
-    >
-      <template v-for="(item, index) in spec.leftOuterButtons">
-        <common-button
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-        />
-      </template>
-    </div>
-
-    <v-list-item
-      v-longclick="$onLongPress"
-      :href="$href()"
-      class="item-content"
-      :style="columnStyles()"
-      @[clickCondition]="$onClick()"
-    >
-      <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
-
-      <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
-      <fields-check v-if="checkSpec" :key="checkSpec.name" :spec="checkSpec" />
-
-      <div v-if="spec.leftButtons" class="left-universal">
-        <template v-for="(item, index) in spec.leftButtons">
-          <rich-button
+  <div class="thumbnail" :class="cssClasses" @[clickCondition]="$onClick()">
+    <panels-responsive :spec="spec.header" />
+    <div style="display:flex;">
+      <div v-if="spec.leftOuterButtons" style="display:flex; margin-top:10px;">
+        <template v-for="(item, index) in spec.leftOuterButtons">
+          <common-button
             :key="index"
             :spec="buttonSpec(item)"
             :disabled="$isBusy"
@@ -36,59 +12,83 @@
         </template>
       </div>
 
-      <v-list-item-avatar
-        v-if="$type.isString(spec.imageUrl)"
-        :tile="!spec.avatar"
-        style="display:flex;"
-        class="left-thumbnail"
-        :size="spec.imageSize"
+      <v-list-item
+        v-longclick="$onLongPress"
+        :href="$href()"
+        class="item-content"
+        :style="columnStyles()"
       >
-        <img :src="spec.imageUrl" />
-      </v-list-item-avatar>
-      <!-- <v-list-item-avatar v-else-if="$type.isObject(spec.icon)">
-      <common-icon :spec="spec.icon" />
-    </v-list-item-avatar> -->
-      <div v-else class="left-icon">
-        <v-list-item-avatar v-if="$type.isObject(spec.icon)">
-          <common-icon :spec="spec.icon" />
-        </v-list-item-avatar>
-      </div>
+        <!-- <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon> -->
 
-      <v-list-item-content style="display:flex;">
-        <v-text-field
-          v-if="spec.fieldTitleName"
-          :name="spec.fieldTitleName"
-          :value="spec.title"
+        <!-- Specify a key to prevent reuse which causes an issue where the checkbox would use the previous name. -->
+        <fields-check
+          v-if="checkSpec"
+          :key="checkSpec.name"
+          :spec="checkSpec"
         />
-        <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
-
-        <v-list-item-subtitle v-if="spec.subtitle">{{
-          spec.subtitle
-        }}</v-list-item-subtitle>
-        <v-list-item-subtitle v-if="spec.subsubtitle">{{
-          spec.subsubtitle
-        }}</v-list-item-subtitle>
-
-        <div class="chips">
-          <template v-for="(item, index) in chips">
-            <common-chip :key="index" :spec="item" />
+
+        <div v-if="spec.leftButtons">
+          <template v-for="(item, index) in spec.leftButtons">
+            <rich-button
+              :key="index"
+              :spec="buttonSpec(item)"
+              :disabled="$isBusy"
+            />
           </template>
         </div>
 
-        <!-- NOTE: Experimental -->
-        <panels-responsive :spec="spec.accessory" />
-      </v-list-item-content>
+        <v-list-item-avatar
+          v-if="$type.isString(spec.imageUrl)"
+          :tile="!spec.avatar"
+          style="display:flex;"
+          class="left-thumbnail"
+          :size="spec.imageSize"
+        >
+          <img :src="spec.imageUrl" />
+        </v-list-item-avatar>
 
-      <template v-for="(item, index) in spec.rightButtons">
-        <rich-button
-          :key="index"
-          :spec="buttonSpec(item)"
-          :disabled="$isBusy"
-        />
-      </template>
+        <div v-else class="left-icon">
+          <v-list-item-avatar v-if="$type.isObject(spec.icon)">
+            <common-icon :spec="spec.icon" />
+          </v-list-item-avatar>
+        </div>
+
+        <v-list-item-content style="display:flex;">
+          <v-text-field
+            v-if="spec.fieldTitleName"
+            :name="spec.fieldTitleName"
+            :value="spec.title"
+          />
+          <v-list-item-title v-else>{{ spec.title }}</v-list-item-title>
 
-      <templates-menu :edit-buttons="editButtons" />
-    </v-list-item>
+          <v-list-item-subtitle v-if="spec.subtitle">{{
+            spec.subtitle
+          }}</v-list-item-subtitle>
+          <v-list-item-subtitle v-if="spec.subsubtitle">{{
+            spec.subsubtitle
+          }}</v-list-item-subtitle>
+
+          <div class="chips">
+            <template v-for="(item, index) in chips">
+              <common-chip :key="index" :spec="item" />
+            </template>
+          </div>
+
+          <panels-responsive :spec="spec.body" />
+        </v-list-item-content>
+
+        <template v-for="(item, index) in spec.rightButtons">
+          <rich-button
+            :key="index"
+            :spec="buttonSpec(item)"
+            :disabled="$isBusy"
+          />
+        </template>
+
+        <templates-menu :edit-buttons="editButtons" />
+      </v-list-item>
+    </div>
+    <panels-responsive :spec="spec.footer" />
   </div>
 </template>
 
@@ -169,9 +169,12 @@ export default {
       this.editButtons = this.spec.editButtons || [];
     },
     buttonSpec(item) {
+      // return Object.assign({}, item, {
+      //   view: "button-v1",
+      //   styleClasses: item.text ? ["text"] : ["icon"]
+      // });
       return Object.assign({}, item, {
-        view: "button-v1",
-        styleClasses: item.text ? ["text"] : ["icon"]
+        view: "button-v1"
       });
     },
     columnStyles() {
@@ -206,9 +209,9 @@ export default {
     // margin-left: 16px;
     margin-left: 4px;
   }
-  .left-universal {
-    padding-left: 16px;
-  }
+  // .left-universal {
+  //   padding-left: 16px;
+  // }
   // .handle {
   //   // margin-left: 10px;
   //   cursor: move;

package/utils/component.js

@@ -2,6 +2,7 @@ export default class {
   static get _registry() {
     return window.vueApp.registeredComponents;
   }
+
   static findById(id) {
     const component = this._registry[id];
     if (component) {
@@ -9,6 +10,11 @@ export default class {
     }
     console.error("Component not found: " + id);
   }
+
+  // static clearRegistry() {
+  //   window.vueApp.registeredComponents = {};
+  // }
+
   static register(id, component) {
     if (this._registry[id]) {
       console.warn(
@@ -20,8 +26,14 @@ export default class {
         this.vueName(component)
       );
     }
+
     this._registry[id] = component;
   }
+
+  static deregister(id) {
+    delete this._registry[id];
+  }
+
   static vueName(component) {
     return component.$options._componentTag;
   }

package/utils/http.js

@@ -1,5 +1,6 @@
 import Type from "./type";
 import Action from "../action";
+import Vue from "vue";
 
 let loading = false;
 const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
@@ -206,17 +207,19 @@ export default class {
 
   // See generic.js
   static forceComponentUpdate(handler) {
+    // GLib.component.clearRegistry();
+
     const dirtyContext = this.dirtyContext();
 
     window.vueApp.isStale = true;
 
     // Queue the execution so the first isStale has time to resets state before handler gets executed
-    setTimeout(() => {
+    Vue.nextTick(() => {
       dirtyContext.isFormSubmitted = false;
       dirtyContext.isFormDirty = false;
       handler();
       window.vueApp.isStale = false;
-    }, 0);
+    });
   }
 
   static promptIfDirtyOnUnload() {

package/utils/queue.js

@@ -54,14 +54,6 @@ export default class {
         console.log("Waiting for next job2...");
       }
     }
-    // console.log("JOB1");
-    // const job = this.dequeue();
-    // console.log("JOB2", job);
-    // job();
-    // Vue.nextTick(() => {
-    //   this.start();
-    // });
-    // await this.next();
   }
   [Symbol.asyncIterator]() {
     // Todo: Use AsyncIterator.from()