glib-web 0.11.21 → 0.13.0

package/action.js

@@ -4,6 +4,7 @@ import ActionsRunMultiple from "./actions/runMultiple";
 
 import ActionsFormsSubmitV1 from "./actions/forms/submit";
 
+import ActionsHttpGetV1 from "./actions/http/get";
 import ActionsHttpPostV1 from "./actions/http/post";
 import ActionsHttpPatchV1 from "./actions/http/patch";
 import ActionsHttpDeleteV1 from "./actions/http/delete";
@@ -49,11 +50,16 @@ import ActionsAnalyticsLogEvent from "./actions/analytics/logEvent";
 
 import ActionCommandsCopy from "./actions/commands/copy";
 
+import ActionToursStart from "./actions/tours/start";
+
+import ActionComponentsUpdate from "./actions/components/update";
+
 const actions = {
   runMultiple: ActionsRunMultiple,
 
   "forms/submit": ActionsFormsSubmitV1,
 
+  "http/get": ActionsHttpGetV1,
   "http/post": ActionsHttpPostV1,
   "http/patch": ActionsHttpPatchV1,
   "http/delete": ActionsHttpDeleteV1,
@@ -96,7 +102,9 @@ const actions = {
   "auth/creditCard": ActionsCreditCard,
 
   "analytics/logEvent": ActionsAnalyticsLogEvent,
-  "commands/copy": ActionCommandsCopy
+  "commands/copy": ActionCommandsCopy,
+  "tours/start": ActionToursStart,
+  "components/update": ActionComponentsUpdate
 };
 
 export default class Action {
@@ -159,6 +167,7 @@ export default class Action {
   }
 
   static handleResponse(response, component) {
+    // 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;

package/actions/commands/copy.js

@@ -1,11 +1,11 @@
 export default class {
-  execute(properties) {
-    let spec = Object.assign({}, properties, {
-      message: "Copied",
-      styleClasses: ["success"]
-    });
+  execute(properties, component) {
+    // let spec = Object.assign({}, properties, {
+    //   message: "Copied",
+    //   styleClasses: ["success"]
+    // });
     navigator.clipboard.writeText(properties.text).then(
-      () => Utils.launch.snackbar.open(spec),
+      () => GLib.action.execute(properties.onCopy, component),
       reason => console.error("Could not copy text: " + reason)
     );
   }

package/actions/components/update.js

@@ -0,0 +1,11 @@
+export default class {
+  execute(spec, component) {
+    if (!spec.views.length > 1) {
+      console.warn("Make sure views only have 1 child!");
+    }
+    if (!component.updatables[spec.targetId])
+      console.error("no component found :" + spec.targetId);
+
+    Object.assign(component.updatables[spec.targetId].spec, spec.views[0]);
+  }
+}

package/actions/http/get.js

@@ -0,0 +1,7 @@
+export default class {
+  execute(properties, controller) {
+    GLib.http.execute(properties, "GET", controller, response =>
+      GLib.action.handleResponse(response, controller)
+    );
+  }
+}

package/actions/tours/start.js

@@ -0,0 +1,17 @@
+import Driver from "driver.js";
+import "driver.js/dist/driver.min.css";
+
+export default class {
+  execute(spec, component) {
+    let driver = new Driver(spec.options || {});
+    let steps = spec.steps;
+    steps
+      .filter(value => value.customBehavior)
+      .forEach(step => {
+        const element = document.querySelector(step.element);
+        component.driverCustomBehavior[step.customBehavior](element, driver);
+      });
+    driver.defineSteps(steps);
+    driver.start(spec.startFrom || 0);
+  }
+}

package/app.vue

@@ -42,14 +42,13 @@ import Utils from "./utils/helper";
 import ContentLayout from "./nav/content";
 import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
 import actionCableMixin from "./components/mixins/ws/actionCable.js";
-import tourMixin from "./components/mixins/tour";
 
 export default {
   components: {
     "nav-appbar": NavAppBar,
     "layouts-content": ContentLayout
   },
-  mixins: [phoenixSocketMixin, actionCableMixin, tourMixin],
+  mixins: [phoenixSocketMixin, actionCableMixin],
   props: {
     page: { type: Object, required: true }
   },
@@ -111,7 +110,6 @@ export default {
         setTimeout(() => {
           // Wait until page is rendered
           GLib.action.execute(this.page.onLoad, this);
-          this.startTour();
         });
       }
     }

package/components/_responsive.vue

@@ -9,7 +9,7 @@
   >
     <v-row no-gutters class="full-height">
       <template v-for="(item, index) in spec.childViews">
-        <ui-component
+        <glib-component
           v-if="isColumn(item)"
           :key="viewKey(item, index)"
           :spec="item"
@@ -20,7 +20,7 @@
           class="full-width"
           :style="innerStyles"
         >
-          <ui-component :spec="item" />
+          <glib-component :spec="item" />
         </div>
       </template>
     </v-row>

package/components/button.vue

@@ -19,10 +19,9 @@
 
 <script>
 import tooltipMixin from "./mixins/tooltip";
-import tourMixin from "./mixins/tour";
 
 export default {
-  mixins: [tooltipMixin, tourMixin],
+  mixins: [tooltipMixin],
   props: {
     spec: { type: Object, required: true }
   },
@@ -33,7 +32,6 @@ export default {
   },
   methods: {
     $ready() {
-      this.registerTour();
       this.tooltip = this.spec.tooltip || { disabled: true };
     }
   }

package/components/component.vue

@@ -26,7 +26,7 @@
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component :is="name" v-else-if="name" :spec="spec" />
+  <component :is="name" v-else-if="name" :id="spec.id" :spec="spec" />
 
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>

package/components/fields/check.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="$classes()" :style="$styles()">
-    <!-- <fields-hidden v-if="uncheckSpec" :spec="uncheckSpec" /> -->
     <!-- This hidden field should always be there to make sure the submitted param is not empty,
          which could cause "Not accessible" error on the server. -->
     <input type="hidden" :name="fieldName" :value="spec.uncheckValue" />
@@ -18,12 +17,7 @@
 </template>
 
 <script>
-// import HiddenField from "./hidden";
-
 export default {
-  // components: {
-  //   "fields-hidden": HiddenField
-  // },
   props: {
     spec: { type: Object, required: true }
   },
@@ -31,7 +25,6 @@ export default {
     return {
       groupName: null,
       fieldType: null
-      // uncheckSpec: null
     };
   },
   methods: {
@@ -55,10 +48,6 @@ export default {
           this.fieldType = "switch";
         }
       });
-
-      // Utils.type.ifNotNull(this.spec.uncheckValue, value => {
-      //   this.uncheckSpec = { name: this.spec.name, value: value };
-      // });
     },
     changed(event) {
       // Execute later to ensure the checkbox's checked state has been updated.

package/components/fields/checkGroup.vue

@@ -1,35 +1,60 @@
 <template>
-  <div ref="checkGroup" data-component="checkGroup" :name="spec.name">
-    <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" />
+  <div
+    ref="checkGroup"
+    class="checkgroup"
+    data-component="checkGroup"
+    :name="spec.name"
+  >
+    <!-- <fields-hidden v-if="!anyChecked" :spec="uncheckSpec" /> -->
 
     <div v-for="(item, index) in spec.childViews" :key="index">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </div>
+
+    <v-text-field
+      class="checkgroup__uncheckvalue"
+      :disabled="anyChecked"
+      :name="spec.name"
+      :value="spec.uncheckValue"
+      :rules="rules"
+    />
   </div>
 </template>
 
 <script>
-import HiddenField from "./hidden";
+// import HiddenField from "./hidden";
 
 export default {
-  components: {
-    "fields-hidden": HiddenField
-  },
+  // components: {
+  //   "fields-hidden": HiddenField
+  // },
   props: {
     spec: { type: Object, required: true }
   },
   data() {
     return {
-      anyChecked: false
+      anyChecked: false,
+      errorMessage: null,
+      rules: [
+        _v => {
+          return this.anyChecked || this.errorMessage || true;
+        }
+      ]
     };
   },
-  computed: {
-    uncheckSpec() {
-      return { name: this.spec.name, value: this.spec.uncheckValue };
-    }
-  },
+  // computed: {
+  //   uncheckSpec() {
+  //     return { name: this.spec.name, value: this.spec.uncheckValue };
+  //   }
+  // },
   methods: {
     $ready() {
+      const validation = this.spec.validation || {};
+
+      Utils.type.ifObject(validation.required, required => {
+        this.errorMessage = required.message;
+      });
+
       this.detectChecked();
       const vm = this;
       this.$el.addEventListener(
@@ -48,6 +73,7 @@ export default {
         .forEach(function(checkbox) {
           if (checkbox.checked) {
             vm.anyChecked = true;
+            return;
           }
         });
     }
@@ -55,4 +81,20 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+// Hide the uncheck field, but continue to show the validation div.
+.checkgroup__uncheckvalue {
+  padding-top: 0px;
+
+  .v-input__slot {
+    display: none;
+  }
+
+  // Hide the entire component unless there is a validation message.
+  display: none;
+
+  &.error--text {
+    display: block;
+  }
+}
+</style>

package/components/fields/location.vue

@@ -50,17 +50,17 @@
         @dragend="onDrag"
       />
     </gmap-map>
-    <ui-component
+    <glib-component
       v-if="latitudeField"
       ref="latitudeView"
       :spec="latitudeField"
     />
-    <ui-component
+    <glib-component
       v-if="longitudeField"
       ref="longitudeView"
       :spec="longitudeField"
     />
-    <ui-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
+    <glib-component v-if="zoomField" ref="zoomView" :spec="zoomField" />
   </v-container>
 </template>
 

package/components/fields/richText.vue

@@ -12,8 +12,8 @@
     <input
       v-for="(imageKey, index) in imageKeys"
       :key="index"
-      type="hidden"
-      name="imageUrls[]"
+      type="text"
+      :name="imageUploader.name"
       :value="images[imageKey]"
     />
 
@@ -52,7 +52,8 @@ export default {
     cleanValue: "",
     images: {},
     imageKeys: [],
-    progress: { value: -1 }
+    progress: { value: -1 },
+    imageUploader: {}
   }),
   // mounted: function () {
   //   const vm = this
@@ -92,10 +93,12 @@ export default {
           return "{{IMAGE_NOT_FOUND}}";
         }
       );
+
+      this.imageUploader = this.spec.imageUploader;
     },
     uploadImage: function(file, editor, cursorLocation) {
       let vm = this;
-      const uploaderSpec = this.spec.imageUploader;
+      const uploaderSpec = this.imageUploader;
       // const input = this.$refs.directUploadFile
       const upload = new Uploader(
         file,

package/components/markdown.vue

@@ -34,9 +34,9 @@ export default {
       }
       // Set all links to be openWeb or open in a new tab by default
       if (!this.spec.openWeb) {
-        let anchors = document.querySelectorAll('a');
+        let anchors = document.querySelectorAll("a");
         for (let i = 0; i < anchors.length; i++) {
-          anchors[i].setAttribute('target', '_blank')
+          anchors[i].setAttribute("target", "_blank");
         }
       }
     },
@@ -56,4 +56,10 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style lang="scss">
+.views-markdown {
+  & > span > :last-child {
+    margin-bottom: 0;
+  }
+}
+</style>

package/components/mixins/styles.js

@@ -1,5 +1,6 @@
 import Hash from "../../utils/hash";
 import Vue from "vue";
+import launch from "../../utils/launch";
 
 var jsonLogic = require("json-logic-js");
 
@@ -46,19 +47,7 @@ export default {
         this.$internalizeValue(val)
       );
 
-      const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
-      // Make sure value has changed and make sure that it is different from the original value.
-      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
-      // from `null` to `this.spec.value`).
-      if (
-        dirtyCheckEnabled &&
-        !window.vueApp.isFormDirty &&
-        val != oldVal &&
-        val != this.spec.value
-      ) {
-        console.log("Form is now dirty");
-        window.vueApp.isFormDirty = true;
-      }
+      this._checkDirtyState(val, oldVal);
     }
   },
   methods: {
@@ -66,6 +55,26 @@ export default {
     genericStyles(spec) {
       return this.$styles(spec);
     },
+    _checkDirtyState(val, oldVal) {
+      const dirtyCheckEnabled = !this.spec.disableDirtyCheck;
+      // Make sure value has changed and make sure that it is different from the original value.
+      // Be strict with this so it doesn't execute when the component is just initializing (e.g value changing
+      // from `null` to `this.spec.value`).
+      if (dirtyCheckEnabled && val != oldVal && val != this.spec.value) {
+        const topDialog = Utils.launch.dialog.topDialog();
+        if (topDialog) {
+          if (!topDialog.isFormDirty) {
+            console.log("Dialog form is now dirty");
+            topDialog.isFormDirty = true;
+          }
+        } else {
+          if (!window.vueApp.isFormDirty) {
+            console.log("Window form is now dirty");
+            window.vueApp.isFormDirty = true;
+          }
+        }
+      }
+    },
     // NOTE: Styles are dynamic, do not save it in $ready().
     $styles(spec) {
       const properties = spec || this.spec;

package/components/panels/carousel.vue

@@ -7,7 +7,7 @@
     :show-arrows-on-hover="$classes().includes('show-arrows-on-hover')"
   >
     <v-carousel-item v-for="(item, i) in spec.childViews" :key="i">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </v-carousel-item>
   </v-carousel>
 </template>

package/components/panels/flow.vue

@@ -6,7 +6,7 @@
         remaining space on the new line.
       -->
       <div :key="index" :style="innerStyles">
-        <ui-component :spec="item" />
+        <glib-component :spec="item" />
       </div>
     </template>
   </div>

package/components/panels/grid.vue

@@ -2,7 +2,7 @@
   <div :class="$classes()" :style="cssStyles">
     <template v-for="(item, index) in spec.childViews">
       <div :key="index">
-        <ui-component :spec="item" />
+        <glib-component :spec="item" />
       </div>
     </template>
   </div>

package/components/panels/horizontal.vue

@@ -7,7 +7,7 @@
     @click="$onClick()"
   >
     <template v-for="(item, index) in spec.childViews">
-      <ui-component :key="index" :spec="item" />
+      <glib-component :key="index" :spec="item" />
     </template>
   </component>
 </template>

package/components/panels/list.vue

@@ -127,7 +127,8 @@ export default {
           fieldCheckName: `${prefix}[checked]`,
           fieldTitleName: this.spec.fieldTitleName
             ? `${prefix}[${this.spec.fieldTitleName}]`
-            : null
+            : null,
+          fieldCheckValueIf: this.spec.fieldCheckValueIf
         });
       }
       return row;

package/components/panels/scroll.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="cssClasses" :style="cssStyles">
     <!-- <template v-for="(item, index) in spec.childViews">
-      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :key="`${index}_${item.view}`" :spec="item" />
     </template> -->
     <panels-responsive :spec="spec" />
   </div>

package/components/panels/split.vue

@@ -8,7 +8,7 @@
       <panels-responsive v-if="spec.center" :spec="spec.center" />
     </div>
 
-    <!-- <ui-component :spec="spec.centerView" v-if="spec.centerView" class="panels-split__expand"/>
+    <!-- <glib-component :spec="spec.centerView" v-if="spec.centerView" class="panels-split__expand"/>
     <div class="panels-split__expand" v-else></div> -->
 
     <div v-if="spec.right" class="layouts-split__side layouts-split__right">

package/components/panels/table.vue

@@ -65,7 +65,7 @@
               v-else
               :key="index"
             >
-              <ui-component :spec="cell" />
+              <glib-component :spec="cell" />
             </th>
           </tr>
         </thead>
@@ -84,9 +84,9 @@
                 :style="colStyles(row, cellIndex)"
               >
                 <!-- Prevent double links -->
-                <ui-component v-if="$href(cell)" :spec="cell" />
+                <glib-component v-if="$href(cell)" :spec="cell" />
                 <a v-else :href="$href(row)" @click="$onClick($event, row)">
-                  <ui-component :spec="cell" />
+                  <glib-component :spec="cell" />
                 </a>
               </td>
             </tr>

package/components/panels/ul.vue

@@ -2,7 +2,7 @@
   <ul :style="$styles()" :class="$classes()">
     <!-- Use view name for key to avoid component reuse issue -->
     <li v-for="(item, index) in spec.childViews" :key="`${index}_${item.view}`">
-      <ui-component :spec="item" />
+      <glib-component :spec="item" />
     </li>
   </ul>
 </template>

package/components/panels/vertical.vue

@@ -8,7 +8,7 @@
   >
     <template v-for="(item, index) in spec.childViews">
       <!-- Use view name for key to avoid component reuse issue -->
-      <ui-component :key="`${index}_${item.view}`" :spec="item" />
+      <glib-component :key="`${index}_${item.view}`" :spec="item" />
     </template>
   </component>
 </template>

package/components/shareButton.vue

@@ -115,7 +115,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 a[class^="share-network-"] {
   flex: none;
   color: #ffffff;
@@ -127,8 +127,10 @@ a[class^="share-network-"] {
   align-content: center;
   align-items: center;
   cursor: pointer;
-  margin: 0 10px 10px 0;
   text-decoration: none;
+
+  // Avoid hardcoding styling
+  // margin: 0 10px 10px 0;
 }
 
 a[class^="share-network-"] .fah {

package/index.js

@@ -67,9 +67,6 @@ Vue.component("common-dropdownMenu", CommonDropdownMenu);
 Vue.component("common-responsive", CommonResponsive);
 Vue.component("templates-menu", CommonTemplateMenu);
 
-// TODO: Deprecate
-Vue.component("ui-component", Component);
-
 Vue.component("glib-component", Component);
 Vue.component("glib-icon", CommonIcon);
 Vue.component("glib-panels-responsive", ResponsivePanel);
@@ -125,6 +122,12 @@ window.GLib = Framework;
 import { settings } from "./utils/settings";
 export { settings };
 
+import driverCustomBehavior from "./plugins/driverCustomBehavior";
+Vue.use(driverCustomBehavior);
+
+import updatableComponent from "./plugins/updatableComponent";
+Vue.use(updatableComponent);
+
 // TODO: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
 // Vue.component('async-webpack-example', function (resolve) {
 //   // This special require syntax will instruct Webpack to

package/nav/dialog.vue

@@ -61,7 +61,9 @@ export default {
       model: null,
       url: null,
       urlLoaded: false,
-      showClose: false
+      showClose: false,
+      isFormDirty: false,
+      isFormSubmitted: false
     };
   },
   watch: {
@@ -77,14 +79,15 @@ export default {
 
       this.show(false);
       this.stack.push(this);
-      console.log("DIALOG READY1", this.stack.length);
     },
     $tearDown() {
       console.log("Dialog destroyed");
       this.stack.remove(this);
     },
     close() {
-      this.model = false;
+      if (Utils.http.proceedEvenWhenDirty()) {
+        this.model = false;
+      }
     },
     click(spec, event) {
       const onClick = spec["onClick"];
@@ -92,9 +95,11 @@ export default {
       Action.execute(onClick, this);
     },
     reload(newSpec) {
-      this.spec = newSpec;
-      this.urlLoaded = false;
-      this.show(true);
+      if (Utils.http.proceedEvenWhenDirty()) {
+        this.spec = newSpec;
+        this.urlLoaded = false;
+        this.show(true);
+      }
     },
     show(reload) {
       const spec = this.spec;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "0.11.21",
+  "version": "0.13.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -21,8 +21,6 @@
     "marked": "^4.0.0",
     "phoenix": "^1.5.3",
     "push.js": "^1.0.12",
-    "sass": "^1.38.0",
-    "sass-loader": "10.1.1",
     "vue": "2.6.14",
     "vue-chartkick": "^0.6.1",
     "vue-gtag": "^1.1.2",

package/plugins/driverCustomBehavior.js

@@ -0,0 +1,13 @@
+export default {
+  install: (Vue, options) => {
+    let driverCustomBehavior = {};
+    driverCustomBehavior.clickToNext = (element, driver) => {
+      element.addEventListener("click", () => driver.moveNext());
+    };
+    driverCustomBehavior.focusToNext = (element, driver) => {
+      element.addEventListener("focus", () => driver.moveNext());
+    };
+
+    Vue.prototype.driverCustomBehavior = driverCustomBehavior;
+  }
+};

package/plugins/updatableComponent.js

@@ -0,0 +1,15 @@
+export default {
+  install: (Vue, options) => {
+    Vue.prototype.updatables = {};
+    Vue.mixin({
+      created: function() {
+        let spec = this.spec;
+        if (spec && spec.compId) {
+          Object.assign(this.updatables, {
+            [spec.compId]: this
+          });
+        }
+      }
+    });
+  }
+};

package/templates/thumbnail.vue

@@ -23,11 +23,13 @@
     >
       <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
 
-      <v-checkbox
+      <!-- <v-checkbox
         v-if="spec.fieldCheckName"
         :name="spec.fieldCheckName"
         :value="true"
-      ></v-checkbox>
+      ></v-checkbox> -->
+
+      <fields-check v-if="checkSpec" :spec="checkSpec" />
 
       <div v-if="spec.leftButtons" class="left-universal">
         <template v-for="(item, index) in spec.leftButtons">
@@ -96,7 +98,12 @@
 </template>
 
 <script>
+import CheckField from "../components/fields/check";
+
 export default {
+  components: {
+    "fields-check": CheckField
+  },
   props: {
     spec: { type: Object, required: true },
     responsiveCols: { type: Number, default: () => 0 }
@@ -104,7 +111,8 @@ export default {
   data() {
     return {
       accessory: {},
-      editButtons: []
+      editButtons: [],
+      checkSpec: null
       // chips: []
     };
   },
@@ -135,6 +143,15 @@ export default {
     $ready() {
       this.accessory = { childViews: this.spec.accessoryViews };
       this.editButtons = this.spec.editButtons || [];
+
+      if (this.spec.fieldCheckName) {
+        this.checkSpec = {
+          view: "fields/checkGroup",
+          name: this.spec.fieldCheckName,
+          checkValue: true,
+          valueIf: this.spec.fieldCheckValueIf
+        };
+      }
     },
     buttonSpec(item) {
       return Object.assign({}, item, {

package/utils/form.js

@@ -6,6 +6,8 @@ export default class {
   static submitData(form, component) {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
+      // Prevent onUnload dirty prompt.
+      Utils.http.clearDirtyState();
       form.submit();
     } else {
       const url = form.getAttribute("action");
@@ -15,6 +17,7 @@ export default class {
         const data = {
           url: Utils.url.appendParams(url, formData)
         };
+        Utils.http.notifyFormSubmitted();
         Utils.http.load(data, component);
       } else {
         const data = {

package/utils/http.js

@@ -76,7 +76,7 @@ export default class {
     const featureAnalytics = pageAnalytics.feature;
 
     const headers = {};
-    if (featureAnalytics) {
+    if (featureAnalytics && component.spec) {
       const componentAnalytics = component.spec.analytics || {};
       if (componentAnalytics.disabled) {
         return headers;
@@ -206,32 +206,44 @@ export default class {
 
   // See generic.js
   static forceComponentUpdate(handler) {
+    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(() => {
-      window.vueApp.isFormSubmitted = false;
-      window.vueApp.isFormDirty = false;
+      dirtyContext.isFormSubmitted = false;
+      dirtyContext.isFormDirty = false;
       handler();
       window.vueApp.isStale = false;
     }, 0);
   }
 
   static promptIfDirtyOnUnload() {
-    window.onbeforeunload = function() {
-      return window.vueApp.isFormDirty ? dirtyPrompt : null;
+    window.onbeforeunload = () => {
+      return this.dirtyContext().isFormDirty ? dirtyPrompt : null;
     };
   }
 
+  static dirtyContext() {
+    return Utils.launch.dialog.topDialog() || window.vueApp;
+  }
+
+  static clearDirtyState() {
+    this.dirtyContext().isFormDirty = false;
+  }
+
   static notifyFormSubmitted() {
-    window.vueApp.isFormSubmitted = true;
+    this.dirtyContext().isFormSubmitted = true;
   }
 
+  // `context` can be either window or dialog.
   static proceedEvenWhenDirty() {
+    const dirtyContext = this.dirtyContext();
     // Don't prompt if this is a result of form submission
     if (
-      window.vueApp.isFormDirty &&
-      !window.vueApp.isFormSubmitted &&
+      dirtyContext.isFormDirty &&
+      !dirtyContext.isFormSubmitted &&
       !confirm(dirtyPrompt)
     ) {
       return false;

package/utils/launch.js

@@ -19,6 +19,18 @@ export default class {
 }
 
 class LaunchDialog {
+  static _initStack() {
+    if (!this.stack) {
+      this.stack = [];
+    }
+  }
+
+  static topDialog() {
+    this._initStack();
+
+    return this.stack.last();
+  }
+
   static open(properties, component) {
     if (!this.stack) {
       this.stack = [];

package/components/mixins/tour.js

@@ -1,75 +0,0 @@
-import Driver from "driver.js";
-import "driver.js/dist/driver.min.css";
-
-class TourHelper {
-  constructor() {
-    this.keys = [];
-    this.storage = window.localStorage;
-
-    this.driver = new Driver({
-      doneBtnText: "Done",
-      closeBtnText: "Skip tour",
-      nextBtnText: "Next tip",
-      prevBtnText: "Prev",
-      onHighlighted: element => {
-        console.log("onHighlighted", element);
-        // TODO
-        // this.keys.forEach(value => this.storage.removeItem(value));
-        // this.storage.setItem(element.node.dataset.key, 1);
-      }
-    });
-
-    this.elements = [];
-  }
-}
-
-const helper = new TourHelper();
-
-export default {
-  methods: {
-    registerTour() {
-      if (this.spec.tour) {
-        helper.elements.push(this);
-      }
-    },
-    startTour() {
-      if (helper.elements && helper.elements.length > 0) {
-        helper.elements = Array.from(helper.elements).sort(
-          (a, b) => a.index - b.index
-        );
-        let stepDefinitions = helper.elements.map(element => {
-          const tourSpec = element.spec.tour;
-
-          return {
-            element: element.$el,
-            popover: {
-              title: tourSpec.title,
-              description: tourSpec.message,
-              position: tourSpec.position
-            }
-          };
-        });
-
-        // TODO
-        // this.keys = helper.elements.map(value => value.dataset.key);
-
-        helper.driver.defineSteps(stepDefinitions);
-
-        helper.driver.start(this.latestTourStep());
-      }
-    },
-    latestTourStep() {
-      let step = 0;
-
-      // TODO
-      // Array.from(this.elements).forEach(element => {
-      //   if (this.storage.getItem(element.dataset.key)) {
-      //     step = parseInt(element.dataset.index);
-      //   }
-      // });
-      // return step;
-
-      return step;
-    }
-  }
-};