glib-web 3.5.3 → 3.5.4

package/actions/windows/close.js

@@ -3,6 +3,11 @@ import { vueApp } from "../../store";
 export default class {
   execute(properties, component) {
     vueApp.richTextValues = {};
+
+    if (!executeGlobalEvent('onbeforewindowsclose')) {
+      return;
+    }
+
     Utils.history.back();
 
     Utils.type.ifObject(properties["onClose"], it => {

package/actions/windows/open.js

@@ -1,8 +1,13 @@
-import { vueApp } from "../../store";
+import { executeGlobalEvent, vueApp } from "../../store";
 
 export default class {
   execute(properties, component) {
     vueApp.richTextValues = {};
+
+    if (!executeGlobalEvent('onbeforewindowsopen')) {
+      return;
+    }
+
     Utils.http.load(properties, component);
   }
 }

package/actions/windows/reload.js

@@ -1,9 +1,13 @@
-import { vueApp } from "../../store";
+import { executeGlobalEvent, vueApp } from "../../store";
 
 export default class {
   execute(properties, component) {
     vueApp.richTextValues = {};
 
+    if (!executeGlobalEvent('onbeforewindowsreload')) {
+      return;
+    }
+
     if (Utils.settings.reactive) {
       Utils.http.reload(properties, component);
     } else {

package/app.vue

@@ -33,6 +33,9 @@ import Utils from "./utils/helper";
 // import actionCableMixin from "./components/mixins/ws/actionCable.js";
 import FormPanel from "./components/panels/form.vue";
 import { vueApp } from "./store";
+import { useDirtyState } from "./components/composable/dirtyState";
+
+const { watchDirtyState } = useDirtyState();
 
 export default {
   components: {
@@ -88,7 +91,7 @@ export default {
     );
     Utils.history.saveInitialContent(this.page);
     Utils.history.restoreOnBackOrForward();
-    Utils.http.promptIfDirtyOnUnload();
+    watchDirtyState();
   },
   methods: {
     $mounted() {

package/components/composable/dirtyState.js

@@ -0,0 +1,39 @@
+import { watchEffect } from "vue";
+import { vueApp, glibevent, dialogStates } from "../../store";
+
+export function useDirtyState() {
+  const ctx = dialogStates.slice(-1)[0] || vueApp;
+  const prompt = "Changes you made have not been saved. Are you sure?";
+
+  const isDirty = () => {
+    return ctx.isFormDirty && !ctx.isFormSubmitted && !confirm(prompt);
+  };
+
+  const clearDirtyState = () => {
+    ctx.isFormDirty = false;
+  };
+
+  const updateDirtyState = (val, oldVal, spec) => {
+    if (!spec.disableDirtyCheck && val != oldVal && val != spec.value) {
+      ctx.isFormDirty = true;
+    }
+  };
+
+  const watchDirtyState = () => {
+    return watchEffect(() => {
+      if (ctx.isFormDirty) {
+        window.onbeforeunload = () => !isDirty();
+        glibevent.onbeforewindowsopen = () => !isDirty();
+        glibevent.onbeforewindowsclose = () => !isDirty();
+        glibevent.onbeforewindowsreload = () => !isDirty();
+      } else {
+        window.onbeforeunload = null;
+        glibevent.onbeforewindowsopen = null;
+        glibevent.onbeforewindowsclose = null;
+        glibevent.onbeforewindowsreload = null;
+      }
+    });
+  };
+
+  return { clearDirtyState, updateDirtyState, watchDirtyState, isDirty };
+}

package/components/fab.vue

@@ -1,33 +1,19 @@
 <template>
-  <v-btn
-    color="indigo"
-    @click="$onClick()"
-    :disabled="$isBusy"
-    :style="genericStyles()"
-    :class="$classes()"
-    :href="$href()"
-    :rel="$rel()"
-    fab
-    fixed
-    bottom
-    right
-    >
-    <!-- Using `white--text` as recommended in https://github.com/vuetifyjs/vuetify/issues/1030 -->
-    <common-icon v-if="spec.icon" :spec="spec.icon" class="white--text" />
-  </v-btn>
+  <div class="fab">
+    <common-button :spec="spec"></common-button>
+  </div>
 </template>
 
 <script>
 export default {
   props: ['spec']
-}
+};
 </script>
 
 <style scoped>
-
-/* Attempts to fix icon alignment issue on production */
-.v-btn--floating .v-icon {
-  display: inline-flex
+.fab {
+  position: fixed;
+  right: 48px;
+  bottom: 24px;
 }
-
 </style>

package/components/fields/_select.vue

@@ -4,7 +4,17 @@
       :multiple="spec.multiple" :disabled="spec.readOnly" :clearable="!spec.readOnly" :hint="spec.hint"
       :placeholder="spec.placeholder" :rules="rules" persistent-hint :append-icon="append.icon" validate-on="blur"
       item-title='text' :variant="variant" :closable-chips="spec.multiple" :density="density" persistent-placeholder
-      @update:modelValue="onChange" />
+      @update:modelValue="onChange">
+
+      <template #item="data">
+        <v-list-subheader v-if="data.props.title.header">
+          {{ data.props.title.header }}
+        </v-list-subheader>
+        <v-divider v-else-if="data.props.title.divider"></v-divider>
+        <v-list-item v-else v-bind="data.props" />
+      </template>
+
+    </v-autocomplete>
 
     <input v-for="(item, index) in values" :key="index" type="hidden" :name="fieldName" :value="item" />
   </div>

package/components/fields/location.vue

@@ -6,9 +6,9 @@
     <div ref="map" class="map"></div>
 
     <div style="padding-top: 8px">
-      <fields-text ref="latField" v-if="spec.latitudeField" :spec="spec.latitudeField"></fields-text>
-      <fields-text ref="lngField" v-if="spec.longitudeField" :spec="spec.longitudeField"></fields-text>
-      <fields-text ref="zoomField" v-if="spec.zoomField" :spec="spec.zoomField"></fields-text>
+      <fields-text ref="latField" v-if="spec.latitudeField" :spec="spec.latitudeField" type="text"></fields-text>
+      <fields-text ref="lngField" v-if="spec.longitudeField" :spec="spec.longitudeField" type="text"></fields-text>
+      <fields-text ref="zoomField" v-if="spec.zoomField" :spec="spec.zoomField" type="number"></fields-text>
     </div>
 
   </div>

package/components/image.vue

@@ -1,7 +1,10 @@
 <template>
-  <v-img :eager="true" :src="spec.url || spec.base64Data" @click="$onClick()" :style="styles" :class="$classes()"
-    :max-width="width" :max-height="height" cover>
-  </v-img>
+  <common-badge v-if="spec.badge" :spec="spec">
+    <img :src="spec.url || spec.base64Data" @click="$onClick()" :style="styles" :height="height" :width="width"
+      :class="$classes()" />
+  </common-badge>
+  <img v-else :src="spec.url || spec.base64Data" @click="$onClick()" :style="styles" :height="height" :width="width"
+    :class="$classes()" />
 </template>
 
 <script>
@@ -21,7 +24,7 @@ export default {
     $ready() {
       // this.$initAccessories();
 
-      const styles = this.genericStyles(Object.assign({}, this.spec));
+      let styles = this.genericStyles(Object.assign({}, this.spec));
       this.styles = styles;
 
       if (this.spec.url) {
@@ -58,9 +61,9 @@ export default {
         }
       }
 
-      Object.assign(this.styles, { width, height });
-      this.width = width
-      this.height = height
+      Object.assign(this.styles, { width, height, objectFit: 'contain' });
+      this.width = width;
+      this.height = height;
     },
     fitCrop(image) {
       let width, height;
@@ -73,10 +76,12 @@ export default {
         height = `${this.spec.height}px`;
       }
 
-      Object.assign(this.styles, { width, height });
-      this.width = width
-      this.height = height
+      Object.assign(this.styles, { width, height, objectFit: 'cover' });
+      this.width = width;
+      this.height = height;
     }
   }
 };
 </script>
+
+<style scoped></style>

package/components/mixins/styles.js

@@ -1,6 +1,7 @@
-import { vueApp } from "../../store";
 import Hash from "../../utils/hash";
 import { fieldModels, watchFieldModels } from "../composable/conditional";
+import { useDirtyState } from "../composable/dirtyState";
+const { updateDirtyState } = useDirtyState();
 
 export default {
   data: function () {
@@ -21,7 +22,7 @@ export default {
 
       Object.assign(fieldModels, { [this.fieldName]: this.$internalizeValue(val) });
 
-      this._checkDirtyState(val, oldVal);
+      updateDirtyState(val, oldVal, this.spec);
     },
     spec: {
       handler(spec, oldSpec) {
@@ -52,31 +53,36 @@ export default {
       });
     }
   },
+  unmounted() {
+    if (fieldModels[this.fieldName]) {
+      delete fieldModels[this.fieldName];
+    }
+  },
   methods: {
     // TODO: Deprecated
     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.debug("Dialog form is now dirty");
-            topDialog.isFormDirty = true;
-          }
-        } else {
-          if (vueApp.isFormDirty) {
-            console.log("Window form is now dirty");
-            vueApp.isFormDirty = true;
-          }
-        }
-      }
-    },
+    // _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.debug("Dialog form is now dirty");
+    //         topDialog.isFormDirty = true;
+    //       }
+    //     } else {
+    //       if (vueApp.isFormDirty) {
+    //         console.log("Window form is now dirty");
+    //         vueApp.isFormDirty = true;
+    //       }
+    //     }
+    //   }
+    // },
     // NOTE: Styles are dynamic, do not save it in $ready().
     $styles(spec) {
       const properties = spec || this.spec;

package/nav/dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <v-dialog :model-value="model" :width="spec.width || 600" :dark="false" :fullscreen="fullscreen" :sm-and-down="false"
-    :persistent="!spec.closeOnBlur">
+    :persistent="true" @click:outside="clickOutside">
     <v-card :style="hamburgerStyles" class="hamburger">
 
       <panels-responsive v-if="header" :spec="header" />
@@ -43,10 +43,17 @@
 import Http from "../utils/http";
 import Action from "../action";
 import FormPanel from "../components/panels/form.vue";
-import { vueApp } from "../store";
-
+import { useDirtyState } from "../components/composable/dirtyState";
+import { dialogStates } from "../store";
+import { reactive } from "vue";
 
 export default {
+  setup() {
+    const { isDirty } = useDirtyState();
+    const context = reactive({ isFormDirty: false });
+
+    return { isDirty, context };
+  },
   components: {
     "panels-form": FormPanel,
   },
@@ -66,8 +73,6 @@ export default {
       url: null,
       urlLoaded: false,
       disableCloseButton: false,
-      isFormDirty: false,
-      isFormSubmitted: false,
       isMobile: false,
       formSpec: null,
     };
@@ -98,10 +103,19 @@ export default {
   watch: {
     model: function (val, oldVal) {
       if (!val) {
-        this.stack.remove(this);
+        if (!this.isDirty()) {
+          this.stack.remove(this);
+          dialogStates.remove(this.context);
+        } else {
+          this.model = true;
+        }
       }
     },
   },
+  mounted() {
+    this.stack.push(this);
+    dialogStates.push(this.context);
+  },
   methods: {
     $mounted() {
       window.addEventListener(
@@ -115,7 +129,6 @@ export default {
     $ready() {
       this.onResize();
       this.show(false);
-      this.stack.push(this);
 
       this.$nextTick(() => {
         this.updateMainHeight();
@@ -127,7 +140,10 @@ export default {
     //   this.stack.remove(this);
     // },
     close() {
-      if (Utils.http.proceedEvenWhenDirty()) {
+      this.model = false;
+    },
+    clickOutside() {
+      if (this.spec.closeOnBlur) {
         this.model = false;
       }
     },
@@ -137,11 +153,9 @@ export default {
       Action.execute(onClick, this);
     },
     reload(newSpec) {
-      if (Utils.http.proceedEvenWhenDirty()) {
-        this.spec.url = newSpec.url;
-        this.urlLoaded = false;
-        this.show(true);
-      }
+      this.spec.url = newSpec.url;
+      this.urlLoaded = false;
+      this.show(true);
     },
     onResize() {
       this.isMobile = window.innerWidth < 600;

package/package.json

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

package/plugins/updatableComponent.js

@@ -1,33 +1,33 @@
 export default {
   install: (Vue, options) => {
     Vue.mixin({
-      mounted: function () {
-        let spec = this.spec;
-        if (spec && spec.id && this.$registryEnabled()) {
-          const id = spec.id
-          const existingComponent = GLib.component.findById(id)
-          // A component with the same ID in a different page shouldn't be considered a
-          // duplicate. See `utils/components#deregister` for more details.
-          if (existingComponent && existingComponent._mountedUrl == this._mountedUrl) {
-            console.warn(
-              "Duplicate component ID:",
-              id,
-              "Existing:",
-              GLib.component.vueName(existingComponent),
-              "New:",
-              GLib.component.vueName(this)
-            );
-          }
-          GLib.component.register(id, this);
-        }
-      },
-      unmounted: function () {
-        let spec = this.spec;
-        if (spec && spec.id && this.$registryEnabled()) {
-          GLib.component.deregister(spec.id, this);
-        }
-      },
       methods: {
+        $ready() {
+          let spec = this.spec;
+          if (spec && spec.id && this.$registryEnabled()) {
+            const id = spec.id;
+            const existingComponent = GLib.component.findById(id);
+            // A component with the same ID in a different page shouldn't be considered a
+            // duplicate. See `utils/components#deregister` for more details.
+            if (existingComponent) {
+              console.warn(
+                "Duplicate component ID:",
+                id,
+                "Existing:",
+                GLib.component.vueName(existingComponent),
+                "New:",
+                GLib.component.vueName(this)
+              );
+            }
+            GLib.component.register(id, this);
+          }
+        },
+        $tearDown() {
+          let spec = this.spec;
+          if (spec && spec.id && this.$registryEnabled()) {
+            GLib.component.deregister(spec.id, this);
+          }
+        },
         $registryEnabled() {
           // Common classes such as `_select` need to return false so that it doesn't override its parent (e.g. `select`).
           return true;

package/store.js

@@ -15,4 +15,20 @@ export const vueApp = reactive({
     temp: {},
     richTextValues: {},
     draggedComponent: null
-});
+});
+
+export const dialogStates = reactive([]);
+
+export const glibevent = reactive({
+    onbeforewindowsopen: null,
+    onbeforewindowsclose: null,
+    onbeforewindowsreload: null
+});
+
+export function executeGlobalEvent(name) {
+    if (!glibevent[name]) {
+        return true;
+    }
+
+    return glibevent[name]();
+}

package/utils/component.js

@@ -32,7 +32,7 @@ export default class {
     // component will get registered before the old component gets deregistered, in which case we
     // should skip the deregistering or else we'd accidentally deregister the new component.
     if (this._registry[id] == component) {
-      console.debug("Deregistering component with ID", id)
+      console.debug("Deregistering component with ID", id);
       delete this._registry[id];
     }
   }
@@ -42,13 +42,13 @@ export default class {
     // return component.$options._componentTag;
     if (!component.name && component.spec) {
       if (component.spec.view == 'panels/fullPageForm') {
-        component.name = 'panels-form'
+        component.name = 'panels-form';
       } else {
-        component.name = (component.spec.view || '').replace('/', '-').replace('-v1', '')
+        component.name = (component.spec.view || '').replace('/', '-').replace('-v1', '');
       }
     }
 
-    return component.name
+    return component.name;
   }
 
   static async preserveScroll(promise) {

package/utils/form.js

@@ -1,3 +1,5 @@
+import { vueApp } from "../store";
+
 export default class {
   // Execution flows:
   // Button -> Button.onClick() -> Utils.http.execute() -- doesn't save autofill values
@@ -7,7 +9,8 @@ export default class {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
       // Prevent onUnload dirty prompt.
-      Utils.http.clearDirtyState();
+      // Utils.http.clearDirtyState();
+      vueApp.isFormDirty = false;
       form.submit();
     } else {
       const url = overrideUrl ? overrideUrl : form.getAttribute("action");

package/utils/http.js

@@ -4,7 +4,6 @@ import { nextTick } from 'vue';
 import { vueApp } from "../store";
 
 let loading = false;
-const dirtyPrompt = "Changes you made have not been saved. Are you sure?";
 
 class HttpRequest {
   constructor() {
@@ -72,9 +71,9 @@ export default class {
     const domainMatched = window.location.hostname == url.hostname;
 
     // If this is an external domain, we rely on `onUnload()` instead.
-    if (domainMatched && !this.proceedEvenWhenDirty()) {
-      return;
-    }
+    // if (domainMatched && !this.proceedEvenWhenDirty()) {
+    //   return;
+    // }
 
     if (Utils.settings.reactive && domainMatched) {
       const currentUrl = window.location.href;
@@ -268,31 +267,25 @@ export default class {
     });
   }
 
-  static promptIfDirtyOnUnload() {
-    window.onbeforeunload = () => {
-      vueApp.isFormDirty ? dirtyPrompt : null;
-    };
-  }
-
-  static clearDirtyState() {
-    vueApp.isFormDirty = false;
-  }
+  // static clearDirtyState() {
+  //   vueApp.isFormDirty = false;
+  // }
 
   static notifyFormSubmitted() {
     vueApp.isFormSubmitted = true;
   }
 
   // `context` can be either window or dialog.
-  static proceedEvenWhenDirty() {
-    const dirtyContext = vueApp;
-    // Don't prompt if this is a result of form submission
-    if (
-      dirtyContext.isFormDirty &&
-      !dirtyContext.isFormSubmitted &&
-      !confirm(dirtyPrompt)
-    ) {
-      return false;
-    }
-    return true;
-  }
+  // static proceedEvenWhenDirty() {
+  //   const dirtyContext = vueApp;
+  //   // Don't prompt if this is a result of form submission
+  //   if (
+  //     dirtyContext.isFormDirty &&
+  //     !dirtyContext.isFormSubmitted &&
+  //     !confirm(dirtyPrompt)
+  //   ) {
+  //     return false;
+  //   }
+  //   return true;
+  // }
 }