glib-web 2.5.1 → 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/components/update.js

@@ -1,5 +1,3 @@
-import Vue from "vue";
-
 export default class {
   execute(spec, component) {
     if (!spec.views.length > 1) {
@@ -12,17 +10,4 @@ export default class {
       target.$recursiveUpdate();
     }
   }
-
-  // // TODO: Use $recursiveUpdate(). See mixins/events
-  // updateComponent(component) {
-  //   component.$ready();
-  //   component.$forceUpdate();
-
-  //   // Execute on next tick to ensure that the child has received the updated spec.
-  //   Vue.nextTick(() => {
-  //     component.$children.find(child => {
-  //       this.updateComponent(child);
-  //     });
-  //   });
-  // }
 }

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/app.vue

@@ -125,15 +125,15 @@ export default {
         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).
       if (Utils.history.isPoppedState(this.page)) {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onRefocus, this);
           GLib.action.execute(this.page.replayGetResponse, this);
         });
       } else {
         setTimeout(() => {
-          // Wait until page is rendered
           GLib.action.execute(this.page.onLoad, this);
         });
       }
@@ -194,8 +194,29 @@ body,
 .glib-scrollto--highlighted {
   background: yellow !important;
 }
-.glib-clickable {
+// Don't override the default button's effect.
+.glib-clickable:not(.v-btn) {
   cursor: pointer;
+
+  // // So that we can display a semi-transparent layer on hover (see below)
+  position: relative;
+
+  &:hover:before {
+    content: "\A";
+    width: 100%;
+    height: 100%;
+    background: rgba(100, 100, 100, 0.1);
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:active:before {
+    background: rgba(100, 100, 100, 0.2);
+  }
+}
+.glib-clickable.theme--light.v-list-item:hover:before {
+  opacity: 1; // Override Vuetify
 }
 /******/
 </style>

package/components/_button.vue

@@ -6,11 +6,11 @@
       :type="type"
       :disabled="disabled || $isBusy || spec.disabled"
       :style="styles()"
-      :class="$classes()"
+      :class="classes()"
       :href="$href()"
       :rel="$rel()"
       :text="linkStyling || $classes().includes('text')"
-      :small="linkStyling"
+      :small="linkStyling || $classes().includes('small')"
       :icon="$classes().includes('icon')"
       :outlined="$classes().includes('outlined')"
       :tile="$classes().includes('tile')"
@@ -50,12 +50,16 @@ export default {
       });
     },
     styles() {
-      const styles = this.genericStyles();
+      const styles = this.$styles();
       if (this.linkStyling) {
         styles["color"] = styles["color"] || "#1976d2";
       }
       return styles;
     },
+    classes() {
+      const classes = this.$classes();
+      return classes;
+    },
     $registryEnabled() {
       return false;
     }

package/components/_responsive.vue

@@ -94,21 +94,21 @@ a.panels-responsive {
   color: inherit;
   text-decoration: inherit;
 
-  // So that we can display a semi-transparent layer on hover (see below)
-  position: relative;
+  // // So that we can display a semi-transparent layer on hover (see below)
+  // position: relative;
 
-  &:hover:after {
-    content: "\A";
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.1);
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
+  // &:hover:after {
+  //   content: "\A";
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(0, 0, 0, 0.1);
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  // }
 
-  &:active:after {
-    background: rgba(0, 0, 0, 0.4);
-  }
+  // &:active:after {
+  //   background: rgba(0, 0, 0, 0.4);
+  // }
 }
 </style>

package/components/component.vue

@@ -1,10 +1,31 @@
 <template>
-  <fields-text v-if="name == 'fields-text'" :spec="spec" type="text" />
-  <fields-text v-else-if="name == 'fields-number'" :spec="spec" type="number" />
-  <fields-text v-else-if="name == 'fields-email'" :spec="spec" type="email" />
-  <fields-text v-else-if="name == 'fields-url'" :spec="spec" type="url" />
+  <fields-text
+    v-if="name == 'fields-text'"
+    ref="delegate"
+    :spec="spec"
+    type="text"
+  />
+  <fields-text
+    v-else-if="name == 'fields-number'"
+    ref="delegate"
+    :spec="spec"
+    type="number"
+  />
+  <fields-text
+    v-else-if="name == 'fields-email'"
+    ref="delegate"
+    :spec="spec"
+    type="email"
+  />
+  <fields-text
+    v-else-if="name == 'fields-url'"
+    ref="delegate"
+    :spec="spec"
+    type="url"
+  />
   <fields-text
     v-else-if="name == 'fields-password'"
+    ref="delegate"
     :spec="spec"
     type="password"
   />
@@ -21,12 +42,19 @@
   <!-- <fields-latLong v-else-if="spec.view == 'fields/latLong-v1'" :spec="spec" /> -->
   <fields-googlePlace
     v-else-if="spec.view == 'fields/googlePlace-v1'"
+    ref="delegate"
     :spec="spec"
   />
 
   <!-- <panels-responsive v-else-if="spec.view == 'panels/scroll-v1'" :spec="spec" /> -->
 
-  <component :is="name" v-else-if="name" :id="spec.id" :spec="spec" />
+  <component
+    :is="name"
+    v-else-if="name"
+    :id="spec.id"
+    ref="delegate"
+    :spec="spec"
+  />
 
   <div v-else>Unsupported view: {{ spec.view }}</div>
 </template>
@@ -216,13 +244,13 @@ export default {
       name: null
     };
   },
-  beforeUpdate() {
-    // NOTE: Not sure what this is for
-    // Make sure vuejs will not attempt to render old data.
-    // if (this._mountedUrl !== window.location.href) {
-    //   this.name = null;
-    // }
-  },
+  // beforeUpdate() {
+  //   // NOTE: Not sure what this is for
+  //   // Make sure vuejs will not attempt to render old data.
+  //   // if (this._mountedUrl !== window.location.href) {
+  //   //   this.name = null;
+  //   // }
+  // },
   methods: {
     $ready() {
       const name = Utils.app.componentName(this.spec.view);
@@ -235,6 +263,9 @@ export default {
         }
       }
     },
+    $update() {
+      this.$refs.delegate.$update();
+    },
     $registryEnabled() {
       return false;
     }

package/components/fields/check.vue

@@ -58,17 +58,7 @@ export default {
         );
       }, 100);
 
-      // if (this.spec.submitOnChange) {
-      //   setTimeout(() => {
-      //     this.$dispatchEvent("forms/submit");
-      //   }, 200);
-      // }
-
-      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) {