glib-web 2.6.0 → 2.6.1

package/action.js

@@ -53,6 +53,7 @@ import ActionCommandsCustom from "./actions/commands/custom";
 import ActionCommandsEnqueue from "./actions/commands/enqueue";
 
 import ActionToursStart from "./actions/tours/start";
+import ActionToursStop from "./actions/tours/stop";
 
 import ActionComponentsUpdate from "./actions/components/update";
 
@@ -110,6 +111,7 @@ const actions = {
   "commands/enqueue": ActionCommandsEnqueue,
 
   "tours/start": ActionToursStart,
+  "tours/stop": ActionToursStop,
   "components/update": ActionComponentsUpdate
 };
 
@@ -170,10 +172,10 @@ export default class Action {
       }
       action.execute(spec, component, params);
     } catch (e) {
-      console.error(
-        "Failed executing command",
-        actionName,
-        `Error: '${e.message}'`
+      GLib.settings.errorHandler(
+        new Error(
+          `Failed executing command "${actionName}". Error: ${e.message}`
+        )
       );
     }
   }

package/actions/panels/scrollTo.js

@@ -1,7 +1,9 @@
 // Scroll the main body of the current window
 export default class {
-  execute(properties) {
-    const pageBody = Utils.history._pageBody;
+  execute(properties, component) {
+    const pageBody =
+      Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
+
     const selector = `#${properties.viewId}`;
     console.log("Scrolling to", selector);
     const element = pageBody.querySelector(selector);

package/actions/tours/start.js

@@ -1,9 +1,11 @@
 import Driver from "driver.js";
 import "driver.js/dist/driver.min.css";
 
+let driver = null;
+
 export default class {
   execute(spec, component) {
-    let driver = new Driver(spec.options || {});
+    driver = new Driver(spec.options || {});
     let steps = spec.steps;
     steps
       .filter(value => value.customBehavior)
@@ -14,4 +16,11 @@ export default class {
     driver.defineSteps(steps);
     driver.start(spec.startFrom || 0);
   }
+
+  static stopTour() {
+    if (driver) {
+      driver.reset();
+      driver = null;
+    }
+  }
 }

package/actions/tours/stop.js

@@ -0,0 +1,7 @@
+import tour from "./start.js";
+
+export default class {
+  execute(spec, component) {
+    tour.stopTour();
+  }
+}

package/components/fields/check.vue

@@ -58,11 +58,7 @@ export default {
         );
       }, 100);
 
-      Utils.type.ifObject(this.spec.onChange, onChange => {
-        this.$nextTick(() => {
-          GLib.action.execute(onChange, this);
-        });
-      });
+      this.$executeOnChange();
     },
     $internalizeValue(val) {
       if (val == this.spec.checkValue) {

package/components/fields/file.vue

@@ -2,14 +2,28 @@
   <div ref="fileUploadContainer" class="mb-3" :style="$styles()">
     <label class="v-label v-label--active">{{ spec.label }}</label>
     <div class="preview-container">
-      <v-avatar v-if="placeholder.type == 'avatar'" :style="genericStyles(placeholder)" class="mr-4">
+      <v-avatar
+        v-if="placeholder.type == 'avatar'"
+        :style="genericStyles(placeholder)"
+        class="mr-4"
+      >
         <img :src="fileImage || placeholder.url" />
       </v-avatar>
-      <img v-else-if="placeholder.type == 'image'" class="square-image mr-4" :style="genericStyles(placeholder)"
-        :src="fileImage || placeholder.url" />
-
-      <v-text-field v-else-if="placeholder.type == 'input'" :value="fileTitle" outlined prominent
-        placholder="Upload your file" disabled />
+      <img
+        v-else-if="placeholder.type == 'image'"
+        class="square-image mr-4"
+        :style="genericStyles(placeholder)"
+        :src="fileImage || placeholder.url"
+      />
+
+      <v-text-field
+        v-else-if="placeholder.type == 'input'"
+        :value="fileTitle"
+        outlined
+        prominent
+        placholder="Upload your file"
+        disabled
+      />
 
       <span v-else class="mr-4">{{ fileTitle }}</span>
 
@@ -33,7 +47,12 @@
         </v-btn>
       </span>
     </div>
-    <input ref="directUploadFile" style="display: none;" type="file" @change="uploadFiles" />
+    <input
+      ref="directUploadFile"
+      style="display: none;"
+      type="file"
+      @change="uploadFiles"
+    />
 
     <!-- <input type="file" :name="spec.name" ref='directUploadFile' @change='uploadFiles' v-show='!uploaded'/> -->
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
@@ -73,7 +92,7 @@ export default {
     };
   },
   computed: {
-    showProgress: function () {
+    showProgress: function() {
       return this.progress.value >= 0;
     }
   },
@@ -129,6 +148,10 @@ export default {
             this.uploaded = true;
             this.progress.value = -1;
             this.displayImagePreview(file, blob);
+
+            // This only works for single uploads. For multi-uploads, we'll need to make sure
+            // that all uploads have finished successfully.
+            this.$executeOnChange();
           }
 
           input.disabled = false;

package/components/fields/otpField.vue

@@ -1,18 +1,40 @@
 <template>
   <div>
-    <input
-      v-for="(digit, index) in digits"
-      ref="input"
-      :key="index"
-      v-model="otp[index]"
-      maxlength="1"
-      class="otp-input"
-      @input="handleInput($event, index)"
-      @keydown="handleKeydown($event, index)"
-      @paste="handlePaste($event, index)"
-      @focus="handleFocus($event, index)"
-      @blur="handleBlur($event, index)"
-    />
+    <div v-if="spec.type === 'text'">
+      <input
+        v-for="(digit, index) in digits"
+        ref="input"
+        :key="index"
+        v-model="otp[index]"
+        type="text"
+        maxlength="1"
+        class="otp-input"
+        @input="handleInput($event, index)"
+        @keydown="handleKeydown($event, index)"
+        @paste="handlePaste($event, index)"
+        @focus="handleFocus($event, index)"
+        @blur="handleBlur($event, index)"
+        @click="handleClick($event)"
+      />
+    </div>
+    <div v-else>
+      <input
+        v-for="(digit, index) in digits"
+        ref="input"
+        :key="index"
+        v-model="otp[index]"
+        type="number"
+        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
+        maxlength="1"
+        class="otp-input"
+        @input="handleInput($event, index)"
+        @keydown="handleKeydown($event, index)"
+        @paste="handlePaste($event, index)"
+        @focus="handleFocus($event, index)"
+        @blur="handleBlur($event, index)"
+        @click="handleClick($event)"
+      />
+    </div>
     <input type="hidden" :name="spec.name" :value="otpValue" />
   </div>
 </template>
@@ -37,8 +59,8 @@ export default {
   },
   methods: {
     $ready() {
-      this.digits = this.spec.lengths;
-      this.otp = Array(this.spec.lengths).fill("");
+      this.digits = this.spec.length;
+      this.otp = Array(this.spec.length).fill("");
     },
     handleInput(event, index) {
       if (event.target.value.length === 1) {
@@ -48,8 +70,12 @@ export default {
     handleKeydown(event, index) {
       if (event.key === "Backspace") {
         event.preventDefault();
-        this.focusPrevious(index);
-        this.$set(this.otp, index, "");
+        if (this.otp[index] !== "") {
+          this.$set(this.otp, index, "");
+        } else {
+          this.focusPrevious(index);
+          this.$set(this.otp, index - 1, "");
+        }
       }
     },
     handlePaste(event, index) {
@@ -81,6 +107,9 @@ export default {
       if (index > 0) {
         this.$refs.input[index - 1].focus();
       }
+    },
+    handleClick(event) {
+      event.target.select();
     }
   }
 };
@@ -95,4 +124,16 @@ export default {
   font-size: 24px;
   margin: 8px;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
 </style>

package/components/fields/radioGroup.vue

@@ -34,11 +34,7 @@ export default {
   },
   methods: {
     onChange() {
-      Utils.type.ifObject(this.spec.onChange, onChange => {
-        this.$nextTick(() => {
-          GLib.action.execute(onChange, this);
-        });
-      });
+      this.$executeOnChange();
     },
     updateValue(variable) {
       if (variable.value) {

package/components/fields/richText.vue

@@ -14,9 +14,9 @@
       v-model="richEditorValue"
       :editor-toolbar="customToolbar"
       use-custom-image-handler
+      :editor-options="editorSettings"
       @text-change="onRichTextEditorChanged"
       @image-added="uploadImage"
-      :editorOptions="editorSettings"
     />
     <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
     <div :style="{ display: rawMode ? 'block' : 'none' }">
@@ -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);
   }
@@ -125,7 +125,7 @@ class TextEditor {
   // replace {{image1}} to real image1 url
   replaceWithRealImage(html) {
     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 &&
@@ -146,7 +146,7 @@ class TextEditor {
     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 '&amp;' which would screw up key matching.
       var decodedValue = imageValue.replace(/&amp;/g, "&");
@@ -164,28 +164,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 +197,7 @@ export default {
     textEditor: null,
     mode: null,
     produce: null,
-    accept: null,
+    accept: null
   }),
   computed: {
     showProgress() {
@@ -205,7 +205,7 @@ export default {
     },
     rawMode() {
       return this.mode == 1;
-    },
+    }
   },
   watch: {},
   mounted() {
@@ -235,7 +235,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,48 +274,34 @@ export default {
         "html"
       );
     },
-    onRichTextEditorChanged: eventFiltering.debounce(function () {
+    onRichTextEditorChanged: eventFiltering.debounce(function() {
       this.producedValue = this.textEditor.producedValue(
         this.richEditorValue,
         "html",
         this.produce
       );
 
-      this.onChange(this.producedValue);
+      this.$executeOnChange();
     }),
-    onRawTextEditorChanged: eventFiltering.debounce(function () {
+    onRawTextEditorChanged: eventFiltering.debounce(function() {
       this.producedValue = this.textEditor.producedValue(
         this.rawEditorValue,
         "markdown",
         this.produce
       );
 
-      this.onChange(this.producedValue);
+      this.$executeOnChange();
     }),
-    onChange(producedValue) {
-      Utils.type.ifObject(this.spec.onChange, (onChange) => {
-        this.$nextTick(() => {
-          const params = {
-            [this.spec.paramNameForFormData || "formData"]: {
-              [this.fieldName]: producedValue,
-            },
-          };
-
-          const data = Object.assign({}, onChange, params);
-          GLib.action.execute(data, this);
-        });
-      });
-    },
-    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);
           };
 
@@ -326,7 +312,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`;
@@ -339,7 +325,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");
@@ -352,8 +338,8 @@ export default {
           this.updateToolbar(wrapper, toolbar, container)
         );
       }
-    },
-  },
+    }
+  }
 };
 </script>
 

package/components/fields/text.vue

@@ -137,22 +137,8 @@ export default {
       return this.$classes().concat("g-text-field--hintless");
     },
     onChange: eventFiltering.debounce(function() {
-      this.executeActionWithParams();
-    }, 300),
-    executeActionWithParams() {
-      Utils.type.ifObject(this.spec.onChange, onChange => {
-        this.$nextTick(() => {
-          const params = {
-            [this.spec.paramNameForFormData || "formData"]: {
-              [this.fieldName]: this.fieldModel
-            }
-          };
-
-          const data = Object.assign({}, onChange, params);
-          GLib.action.execute(data, this);
-        });
-      });
-    }
+      this.$executeOnChange();
+    }, 300)
   }
 };
 </script>

package/components/fields/textarea.vue

@@ -16,6 +16,7 @@
       :no-resize="$classes().includes('no-resize')"
       validate-on-blur
       @keyup="$onTyping"
+      @input="onChange"
     ></v-textarea>
     <input
       v-if="spec.readOnly"
@@ -27,6 +28,8 @@
 </template>
 
 <script>
+import eventFiltering from "../../utils/eventFiltering";
+
 export default {
   props: {
     spec: { type: Object, required: true }
@@ -45,7 +48,10 @@ export default {
     },
     classes() {
       return this.$classes().concat("g-text-field--hintless");
-    }
+    },
+    onChange: eventFiltering.debounce(function() {
+      this.$executeOnChange();
+    }, 300)
   }
 };
 </script>

package/nav/dialog.vue

@@ -7,24 +7,34 @@
     :sm-and-down="false"
     :persistent="true"
   >
-    <v-card>
-      <v-card-title v-if="title || showClose" class="text-h5" primary-title>
-        {{ title }}
+    <v-card :style="hamburgerStyles" class="hamburger">
+      <!-- <v-card-title v-if="title || showClose" class="text-h5" primary-title> -->
+      <div>
+        <panels-responsive v-if="header" :spec="header" />
+        <div v-if="title" class="dialogs-title theme--light v-subheader">
+          {{ title }}
+        </div>
+
         <v-btn v-if="showClose" text icon class="dialog-close" @click="close">
           <v-icon>close</v-icon>
         </v-btn>
-      </v-card-title>
+      </div>
+      <!-- </v-card-title> -->
 
-      <component :is="containerComponent" :spec="formSpec">
-        <div v-if="message" class="dialog-message">
-          <common-message :spec="{ message: message }" />
-        </div>
-        <panels-responsive v-if="body" :spec="body" />
-      </component>
+      <div class="dialogs-body">
+        <component :is="containerComponent" :spec="formSpec">
+          <div v-if="message" class="dialog-message">
+            <common-message :spec="{ message: message }" />
+          </div>
+          <panels-responsive v-if="body" :spec="body" />
+        </component>
+      </div>
 
-      <v-divider></v-divider>
+      <panels-responsive v-if="footer" :spec="footer" />
 
       <v-card-actions v-if="spec.buttons">
+        <v-divider></v-divider>
+
         <v-spacer></v-spacer>
 
         <v-btn
@@ -36,8 +46,6 @@
         >
           {{ button.text }}
         </v-btn>
-
-        <panels-responsive v-if="footer" :spec="footer" />
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -59,9 +67,11 @@ export default {
   },
   data: function() {
     return {
+      mainHeight: 0,
       title: null,
       message: null,
       body: null,
+      header: null,
       footer: null,
       model: null,
       url: null,
@@ -88,6 +98,12 @@ export default {
       } else {
         return false;
       }
+    },
+    hamburgerStyles() {
+      if (this.spec.height == "matchParent") {
+        return `height: ${this.mainHeight}px;`;
+      }
+      return null;
     }
   },
   watch: {
@@ -98,11 +114,24 @@ export default {
     }
   },
   methods: {
+    $mounted() {
+      window.addEventListener(
+        "resize",
+        event => {
+          this.updateMainHeight();
+        },
+        true
+      );
+    },
     $ready() {
       this.$root.vueApp = this.vueApp;
       this.onResize();
       this.show(false);
       this.stack.push(this);
+
+      this.$nextTick(() => {
+        this.updateMainHeight();
+      });
     },
     $tearDown() {
       console.log("Dialog destroyed");
@@ -128,7 +157,6 @@ export default {
     onResize() {
       this.isMobile = window.innerWidth < 600;
     },
-
     show(reload) {
       const spec = this.spec;
       this.url = spec.url;
@@ -146,6 +174,7 @@ export default {
               this.title = response.title;
               this.message = "";
               this.formSpec = response.fullPageForm;
+              this.header = response.header;
               this.body = response.body;
               this.footer = response.footer;
               this.showClose = this.spec.showClose || false;
@@ -161,12 +190,19 @@ export default {
       }
 
       this.model = true;
+    },
+    updateMainHeight() {
+      console.debug("Setting body height");
+      this.mainHeight = window.innerHeight - 140;
     }
   }
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.dialogs-title {
+  padding: 16px 16px 0px 16px;
+}
 .dialog-message {
   padding: 16px 16px 20px 16px;
   /* white-space: pre-wrap; */
@@ -179,4 +215,31 @@ export default {
 .v-card__text {
   padding: 0 !important;
 }
+.hamburger {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0;
+}
+.dialogs-body {
+  // height: 100%;
+  // overflow-y: overlay;
+  overflow-y: auto;
+}
+</style>
+
+<style lang="scss">
+.v-dialog {
+  // Hide superfluous scrollbar (Edge)
+  -ms-overflow-style: none;
+  * {
+    -ms-overflow-style: initial;
+  }
+
+  // Hide superfluous scrollbar (Webkit)
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
 </style>

package/package.json

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

package/utils/launch.js

@@ -19,6 +19,14 @@ export default class {
 }
 
 class LaunchDialog {
+  static closestBody(component) {
+    const dialog = component.$el.closest(".v-dialog");
+    if (dialog) {
+      return dialog.querySelector(".dialogs-body");
+    }
+    return null;
+  }
+
   static _initStack() {
     if (!this.stack) {
       this.stack = [];

package/utils/public.js

@@ -6,6 +6,7 @@ import Form from "./form";
 import Component from "./component";
 import Hash from "./hash";
 import Queue from "./queue";
+import Settings from "./settings";
 
 const _queue = new Queue();
 
@@ -31,6 +32,9 @@ export default class {
   static get Hash() {
     return Hash;
   }
+  static get settings() {
+    return Settings;
+  }
   static get queue() {
     return _queue;
   }

package/utils/settings.js

@@ -3,6 +3,9 @@ class MutableSettings {
     this.reactive = true;
     this.themes = {};
     this.gtagId = null;
+    this.errorHandler = err => {
+      console.error(err.message);
+    };
   }
 }
 const settings = new MutableSettings();
@@ -17,6 +20,10 @@ export default class ImmutableSettings {
     return settings.themes;
   }
 
+  static get errorHandler() {
+    return settings.errorHandler;
+  }
+
   static get env() {
     return process.env.NODE_ENV;
   }