glib-web 2.6.1 → 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

@@ -2,6 +2,6 @@ export default class {
   execute(properties, component) {
     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/checkGroup.vue

@@ -29,17 +29,17 @@ export default {
   //   "fields-hidden": HiddenField
   // },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data() {
     return {
       anyChecked: false,
       errorMessage: null,
       rules: [
-        _v => {
+        (_v) => {
           return this.anyChecked || this.errorMessage || true;
-        }
-      ]
+        },
+      ],
     };
   },
   // computed: {
@@ -51,7 +51,7 @@ export default {
     $ready() {
       const validation = this.spec.validation || {};
 
-      Utils.type.ifObject(validation.required, required => {
+      Utils.type.ifObject(validation.required, (required) => {
         this.errorMessage = required.message;
       });
 
@@ -59,7 +59,7 @@ export default {
       const vm = this;
       this.$el.addEventListener(
         "change",
-        function(e) {
+        function (e) {
           vm.detectChecked();
         },
         false
@@ -70,7 +70,7 @@ export default {
       const vm = this;
       this.$el
         .querySelectorAll("input[type=checkbox]")
-        .forEach(function(checkbox) {
+        .forEach(function (checkbox) {
           if (checkbox.checked) {
             vm.anyChecked = true;
             return;
@@ -79,12 +79,15 @@ export default {
     },
     childSpec(item) {
       if (this.spec.readOnly) {
-        return Object.assign(item, { readOnly: this.spec.readOnly });
+        return Object.assign(item, {
+          readOnly: this.spec.readOnly,
+          onChange: this.spec.onChange,
+        });
       }
 
-      return item;
-    }
-  }
+      return Object.assign(item, { onChange: this.spec.onChange });
+    },
+  },
 };
 </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/richText.vue

@@ -55,7 +55,7 @@ import bus from "../../utils/eventBus";
 Quill.register("modules/imageDropAndPaste", QuillImageDropAndPaste);
 
 var ImageBlot = Quill.import("formats/image");
-ImageBlot.sanitize = function(url) {
+ImageBlot.sanitize = function (url) {
   return url;
 };
 
@@ -69,16 +69,16 @@ class Parser {
     turndownService.use(gfm);
     turndownService.addRule("strikethrough", {
       filter: ["del", "s", "strike"],
-      replacement: function(content) {
+      replacement: function (content) {
         return "~~" + content + "~~";
-      }
+      },
     });
 
     turndownService.addRule("codeblock", {
       filter: ["pre"],
-      replacement: function(content) {
+      replacement: function (content) {
         return "```\n" + content + "```";
-      }
+      },
     });
     return turndownService.turndown(data);
   }
@@ -124,8 +124,12 @@ class TextEditor {
 
   // replace {{image1}} to real image1 url
   replaceWithRealImage(html) {
+    if (!html) {
+      return "";
+    }
+
     const vm = this.context;
-    return html.replace(/\{\{image([0-9]+)\}\}/g, function(_, index) {
+    return html.replace(/\{\{image([0-9]+)\}\}/g, function (_, index) {
       const image = vm.spec.images[index - 1];
       if (
         image &&
@@ -143,10 +147,14 @@ class TextEditor {
 
   // replace image1 url with {{image1}}
   replaceWithFakeImage(html) {
+    if (!html) {
+      return "";
+    }
+
     const vm = this.context;
     let index = 0;
     vm.imageKeys.clear();
-    return html.replace(/src="([^"]+)"|\!\[\]\((.+)\)/g, function(_, g1, g2) {
+    return html.replace(/src="([^"]+)"|\!\[\]\((.+)\)/g, function (_, g1, g2) {
       var imageValue = g1 || g2;
       // It seems that quill encodes '&' in the URL to '&' which would screw up key matching.
       var decodedValue = imageValue.replace(/&/g, "&");
@@ -164,28 +172,28 @@ class TextEditor {
 export default {
   components: { VueEditor },
   props: {
-    spec: { type: Object, required: true }
+    spec: { type: Object, required: true },
   },
   data: () => ({
     customToolbar: [
       ["bold", "italic", "strike"],
       [{ header: 1 }, { header: 2 }, { header: 3 }],
       [{ list: "ordered" }, { list: "bullet" }],
-      ["image", "link"]
+      ["image", "link"],
     ],
     editorSettings: {
       modules: {
         imageDropAndPaste: {
           // add an custom image handler
-          handler: function(imageDataUrl, type, imageData) {
+          handler: function (imageDataUrl, type, imageData) {
             bus.$emit("richText/dropOrPaste", {
               file: imageData.toFile(),
               editor: this.quill,
-              cursorLocation: this.getIndex()
+              cursorLocation: this.getIndex(),
             });
-          }
-        }
-      }
+          },
+        },
+      },
     },
     richEditorValue: "",
     rawEditorValue: "",
@@ -197,7 +205,7 @@ export default {
     textEditor: null,
     mode: null,
     produce: null,
-    accept: null
+    accept: null,
   }),
   computed: {
     showProgress() {
@@ -205,7 +213,7 @@ export default {
     },
     rawMode() {
       return this.mode == 1;
-    }
+    },
   },
   watch: {},
   mounted() {
@@ -235,7 +243,7 @@ export default {
         this.produce
       );
     },
-    uploadImage: function(file, editor, cursorLocation) {
+    uploadImage: function (file, editor, cursorLocation) {
       let vm = this;
       const uploaderSpec = this.imageUploader;
       // const input = this.$refs.directUploadFile
@@ -274,34 +282,34 @@ export default {
         "html"
       );
     },
-    onRichTextEditorChanged: eventFiltering.debounce(function() {
+    onRichTextEditorChanged: eventFiltering.debounce(function () {
       this.producedValue = this.textEditor.producedValue(
         this.richEditorValue,
         "html",
         this.produce
       );
 
-      this.$executeOnChange();
+      this.$executeOnChange(this.producedValue);
     }),
-    onRawTextEditorChanged: eventFiltering.debounce(function() {
+    onRawTextEditorChanged: eventFiltering.debounce(function () {
       this.producedValue = this.textEditor.producedValue(
         this.rawEditorValue,
         "markdown",
         this.produce
       );
 
-      this.$executeOnChange();
+      this.$executeOnChange(this.producedValue);
     }),
-    insertImage: function(file, Editor, cursorLocation, blob) {
+    insertImage: function (file, Editor, cursorLocation, blob) {
       let vm = this;
       var reader = new FileReader();
-      reader.onload = function(e) {
+      reader.onload = function (e) {
         // vm.fileUrl = e.target.result;
         if (file.type.indexOf("image") !== -1) {
           var image = new Image();
           image.src = URL.createObjectURL(file);
 
-          image.onload = function() {
+          image.onload = function () {
             Editor.insertEmbed(cursorLocation, "image", image.src);
           };
 
@@ -312,7 +320,7 @@ export default {
       reader.readAsDataURL(file);
       vm.progress.value = -1;
     },
-    updateToolbar: function(wrapper, toolbar, container) {
+    updateToolbar: function (wrapper, toolbar, container) {
       if (wrapper.scrollTop >= container.offsetTop) {
         toolbar.classList.add("sticky");
         toolbar.style.top = `${wrapper.offsetTop}px`;
@@ -325,7 +333,7 @@ export default {
         toolbar.style.width = "auto";
       }
     },
-    registerScrollEvent: function() {
+    registerScrollEvent: function () {
       const wrapper = document.querySelector(".v-dialog") || window;
       const toolbar = this.$el.querySelector(".ql-toolbar");
       const container = this.$el.querySelector(".ql-container");
@@ -338,8 +346,8 @@ export default {
           this.updateToolbar(wrapper, toolbar, container)
         );
       }
-    }
-  }
+    },
+  },
 };
 </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.1",
+  "version": "2.6.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -47,4 +47,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

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");
+  }
 }