glib-web 2.6.2 → 2.6.3

package/action.js

@@ -2,7 +2,9 @@ import TypeUtils from "./utils/type";
 
 import ActionsRunMultiple from "./actions/runMultiple";
 
-import ActionsFormsSubmitV1 from "./actions/forms/submit";
+import ActionsFormsSubmit from "./actions/forms/submit";
+import ActionsFieldsReset from "./actions/fields/reset";
+import ActionsFieldsFocus from "./actions/fields/focus";
 
 import ActionsHttpGetV1 from "./actions/http/get";
 import ActionsHttpPostV1 from "./actions/http/post";
@@ -60,7 +62,9 @@ import ActionComponentsUpdate from "./actions/components/update";
 const actions = {
   runMultiple: ActionsRunMultiple,
 
-  "forms/submit": ActionsFormsSubmitV1,
+  "forms/submit": ActionsFormsSubmit,
+  "fields/reset": ActionsFieldsReset,
+  "fields/focus": ActionsFieldsFocus,
 
   "http/get": ActionsHttpGetV1,
   "http/post": ActionsHttpPostV1,

package/actions/fields/focus.js

@@ -0,0 +1,6 @@
+export default class {
+  execute(properties, component) {
+    const target = GLib.component.findById(properties.targetId);
+    target.action_focus();
+  }
+}

package/actions/fields/reset.js

@@ -0,0 +1,12 @@
+import Vue from "vue";
+
+export default class {
+  execute(properties, component) {
+    const target = GLib.component.findById(properties.targetId);
+    target.action_resetValue();
+
+    Vue.nextTick(() => {
+      GLib.action.execute(properties["onReset"], component);
+    });
+  }
+}

package/actions/forms/submit.js

@@ -1,10 +1,7 @@
 export default class {
   execute(properties, component) {
-    setTimeout(() => {
-      component.$dispatchEvent("forms/directSubmit", {
-        url: properties.overrideUrl
-      });
-    }, 500)
-
+    component.$dispatchEvent("forms/directSubmit", {
+      url: properties.overrideUrl
+    })
   }
 }

package/app.vue

@@ -114,16 +114,17 @@ export default {
       this.$wsInitPhoenixSocket(this.page.phoenixSocket);
       this.$wsInitActionCable(this.page.actionCable);
 
-      if (this.$gtag) {
-        if (!Utils.settings.isDev) {
-          console.log(`Tracking analytics: ${window.location}`);
-          this.$gtag.pageview({
-            page_location: window.location
-          });
-        }
-      } else {
-        console.warn("Analytics not setup. Set `settings.gtagId`.");
-      }
+      // TODO: Remove gtag dependency
+      // if (this.$gtag) {
+      //   if (!Utils.settings.isDev) {
+      //     console.log(`Tracking analytics: ${window.location}`);
+      //     this.$gtag.pageview({
+      //       page_location: window.location
+      //     });
+      //   }
+      // } else {
+      //   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).

package/components/_chip.vue

@@ -7,12 +7,19 @@
           :style="genericStyles()"
           :class="$classes()"
           :href="$href()"
+          :small="$classes().includes('small')"
           @click="$onClick()"
           v-on="on"
         >
           {{ spec.text }}
         </v-chip>
-        <v-chip v-else :style="genericStyles()" :class="$classes()" v-on="on">
+        <v-chip
+          v-else
+          :style="genericStyles()"
+          :class="$classes()"
+          :small="$classes().includes('small')"
+          v-on="on"
+        >
           {{ spec.text }}
         </v-chip>
       </common-badge>

package/components/fields/check.vue

@@ -20,12 +20,12 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
       groupName: null,
-      fieldType: null
+      fieldType: null,
     };
   },
   methods: {
@@ -35,7 +35,7 @@ export default {
       let groupName = null;
       this.$type.ifObject(
         this.groupElement,
-        val => (groupName = val.getAttribute("name"))
+        (val) => (groupName = val.getAttribute("name"))
       );
 
       this.fieldName = this.spec.name || groupName;
@@ -44,7 +44,7 @@ export default {
         ? this.spec.checkValue
         : this.spec.value;
 
-      Utils.type.ifArray(this.spec.styleClasses, classes => {
+      Utils.type.ifArray(this.spec.styleClasses, (classes) => {
         if (classes.remove("switch")) {
           this.fieldType = "switch";
         }
@@ -53,20 +53,22 @@ export default {
     changed(event) {
       // Execute later to ensure the checkbox's checked state has been updated.
       setTimeout(() => {
-        this.$type.ifObject(this.groupElement, val =>
+        this.$type.ifObject(this.groupElement, (val) =>
           val.dispatchEvent(new Event("change"))
         );
       }, 100);
 
-      this.$executeOnChange();
+      setTimeout(() => {
+        this.$executeOnChange();
+      }, 500);
     },
     $internalizeValue(val) {
       if (val == this.spec.checkValue) {
         return val;
       }
       return this.spec.uncheckValue;
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/file.vue

@@ -49,7 +49,7 @@
     </div>
     <input
       ref="directUploadFile"
-      style="display: none;"
+      style="display: none"
       type="file"
       @change="uploadFiles"
     />
@@ -78,7 +78,7 @@ import Uploader from "../../utils/uploader";
 
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
@@ -88,13 +88,13 @@ export default {
       fileImage: null,
       fileValue: null,
       inputElement: null,
-      placeholder: {}
+      placeholder: {},
     };
   },
   computed: {
-    showProgress: function() {
+    showProgress: function () {
       return this.progress.value >= 0;
-    }
+    },
   },
   methods: {
     $ready() {
@@ -119,7 +119,7 @@ export default {
     },
     displayImagePreview(file, blob) {
       let reader = new FileReader();
-      reader.onload = e => {
+      reader.onload = (e) => {
         this.fileTitle = file.name;
         this.fileImage = e.target.result;
         this.fileValue = blob.signed_id;
@@ -151,7 +151,9 @@ export default {
 
             // This only works for single uploads. For multi-uploads, we'll need to make sure
             // that all uploads have finished successfully.
-            this.$executeOnChange();
+            setTimeout(() => {
+              this.$executeOnChange();
+            }, 500);
           }
 
           input.disabled = false;
@@ -165,15 +167,15 @@ export default {
       }
     },
     uploadFiles(e) {
-      Array.from(e.target.files).forEach(file => this.uploadFile(file));
-    }
+      Array.from(e.target.files).forEach((file) => this.uploadFile(file));
+    },
     // toggleDisplayProgressIndicator() {
     //   this.showProgress = !this.showProgress
     // },
     // updateProgressIndicator(e) {
     //   this.valueProgress = e.detail.progress
     // }
-  }
+  },
 };
 </script>
 

package/components/fields/radioGroup.vue

@@ -30,11 +30,13 @@
 <script>
 export default {
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   methods: {
     onChange() {
-      this.$executeOnChange();
+      setTimeout(() => {
+        this.$executeOnChange();
+      }, 500);
     },
     updateValue(variable) {
       if (variable.value) {
@@ -50,8 +52,8 @@ export default {
       } else {
         return "";
       }
-    }
-  }
+    },
+  },
 };
 </script>
 

package/components/fields/text.vue

@@ -1,6 +1,7 @@
 <template>
   <div :style="$styles()" :class="classes()">
     <v-text-field
+      ref="field"
       v-model="fieldModel"
       :label="spec.label"
       :name="fieldName"
@@ -136,6 +137,9 @@ export default {
     classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
+    action_focus() {
+      this.$refs.field.focus();
+    },
     onChange: eventFiltering.debounce(function() {
       this.$executeOnChange();
     }, 300)

package/components/image.vue

@@ -57,15 +57,23 @@ export default {
       let width, height;
       const aspectRatio = image.naturalWidth / image.naturalHeight;
 
+      console.log("FIT1");
+
       if (this.spec.width == "matchParent") {
+        console.log("FIT2");
+
         width = "100%";
         // This breaks the image height when displayed in a badge.
         // height = `${100 / aspectRatio}%`;
       } else {
         if (this.spec.width) {
+          console.log("FIT3");
+
           width = `${this.spec.width}px`;
           height = `${this.spec.width / aspectRatio}px`;
         } else if (this.spec.height) {
+          console.log("FIT4", this.spec.height);
+
           width = `${this.spec.height * aspectRatio}px`;
           height = `${this.spec.height}px`;
         }

package/components/mixins/events.js

@@ -166,17 +166,26 @@ export default {
       // this._linkFieldModels();
       this.$ready();
     },
-    $recursiveUpdate() {
+    async $recursiveUpdate() {
       this.$update();
       this.$forceUpdate();
 
-      // Execute on next tick to ensure that the child has received the updated spec.
-      this.$nextTick(() => {
-        this.$children.find(child => {
-          child.$recursiveUpdate();
-        });
+      // Execute on next tick to ensure that the children have received the updated spec.
+      // Important: The nextTick() needs to be used in each of the recursion.
+      await this.$nextTick();
+
+      this.$children.find(child => {
+        child.$recursiveUpdate();
       });
     },
+    // _recursiveUpdate() {
+    //   this.$update();
+    //   this.$forceUpdate();
+
+    //   this.$children.find(child => {
+    //     child._recursiveUpdate();
+    //   });
+    // },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/components/mixins/styles.js

@@ -205,6 +205,9 @@ export default {
         this.fieldModel = this._sanitizeValue(this.spec.value);
       }
     },
+    action_resetValue() {
+      this.fieldModel = this._sanitizeValue(this.spec.value);
+    },
     $classes(spec, defaultViewName) {
       const properties = Object.assign(
         { view: defaultViewName },

package/components/panels/custom.vue

@@ -12,6 +12,7 @@
       methods because those methods use `spec` attributes, which will force $ready() to be called.
     -->
     <component
+      ref="ccomp"
       :is="template"
       v-if="customData"
       :name="spec.template"
@@ -29,14 +30,14 @@ export default {
   components: {
     "template-thumbnail": ThumbnailTemplate,
     "template-featured": FeaturedTemplate,
-    "template-unsupported": UnsupportedTemplate
+    "template-unsupported": UnsupportedTemplate,
   },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
-      customData: null
+      customData: null,
     };
   },
   computed: {
@@ -51,16 +52,19 @@ export default {
         }
         return "template-unsupported";
       }
-    }
+    },
   },
   methods: {
     $ready() {
       const onClick = this.spec.onClick ? { onClick: this.spec.onClick } : {};
       this.customData = Object.assign(onClick, this.spec.data);
+      if (this.$refs.ccomp) {
+        this.$refs.ccomp.$forceUpdate();
+      }
     },
     $registryEnabled() {
       return false;
-    }
-  }
+    },
+  },
 };
 </script>

package/components/panels/horizontal.vue

@@ -29,6 +29,7 @@
     >
       <!-- Using `item.id` as key is important to make sure the item gets updated
            when dragging ends. -->
+      <!-- TODO: This div is causing image issue -->
       <div
         v-for="(item, index) in childViews"
         :key="item.id || index"

package/extensions/string.js

@@ -41,3 +41,7 @@ String.prototype.compare = function(str) {
   }
   return 0;
 };
+
+String.prototype.squish = function() {
+  return this.replace(/\s+/g, " ").trim();
+};

package/package.json

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

package/utils/component.js

@@ -1,14 +1,17 @@
+import Vue from "vue";
+
 export default class {
   static get _registry() {
     return window.vueApp.registeredComponents;
   }
 
   static findById(id) {
-    const component = this._registry[id];
-    if (component) {
-      return component;
-    }
-    console.error("Component not found: " + id);
+    return this._registry[id];
+    // const component = this._registry[id];
+    // if (component) {
+    //   return component;
+    // }
+    // console.error("Component not found: " + id);
   }
 
   // static clearRegistry() {
@@ -37,4 +40,21 @@ export default class {
   static vueName(component) {
     return component.$options._componentTag;
   }
+
+  static async preserveScroll(promise) {
+    const pageBody = this.$pageBody;
+    const originalTop = pageBody.scrollTop;
+    const originalLeft = pageBody.scrollLeft;
+
+    await promise;
+
+    Vue.nextTick(() => {
+      pageBody.scrollTop = originalTop;
+      pageBody.scrollLeft = originalLeft;
+    });
+  }
+
+  static get $pageBody() {
+    return document.getElementById("page_body");
+  }
 }