glib-web 2.6.0 → 2.6.2

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/forms/submit.js

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

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/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

@@ -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' }">
@@ -124,6 +124,10 @@ 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) {
       const image = vm.spec.images[index - 1];
@@ -143,6 +147,10 @@ class TextEditor {
 
   // replace image1 url with {{image1}}
   replaceWithFakeImage(html) {
+    if (!html) {
+      return "";
+    }
+
     const vm = this.context;
     let index = 0;
     vm.imageKeys.clear();
@@ -281,7 +289,7 @@ export default {
         this.produce
       );
 
-      this.onChange(this.producedValue);
+      this.$executeOnChange(this.producedValue);
     }),
     onRawTextEditorChanged: eventFiltering.debounce(function () {
       this.producedValue = this.textEditor.producedValue(
@@ -290,22 +298,8 @@ export default {
         this.produce
       );
 
-      this.onChange(this.producedValue);
+      this.$executeOnChange(this.producedValue);
     }),
-    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) {
       let vm = this;
       var reader = new FileReader();

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.2",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -47,4 +47,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}

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;
   }