glib-web 2.6.7 → 2.6.8

package/action.js

@@ -160,12 +160,12 @@ export default class Action {
     try {
       const action = new registry[actionName]();
       const logDisabled = action.logDisabled && action.logDisabled();
-      if (!logDisabled) {
+      if (!logDisabled && !spec.silent) {
         console.debug(`Executing "${actionName}"`);
       }
       return action.execute(spec, component, params);
     } catch (e) {
-      GLib.settings.errorHandler(e);
+      GLib.settings.errorHandler(e, `Failed executing "${actionName}"`);
       return null;
     }
   }

package/actions/panels/scrollTo.js

@@ -1,20 +1,45 @@
 // Scroll the main body of the current window
 export default class {
-  execute(properties, component) {
+  execute(spec, component) {
     const pageBody =
       Utils.launch.dialog.closestBody(component) || Utils.history._pageBody;
 
-    const selector = `#${properties.viewId}`;
+    const selector = `#${spec.viewId}`;
     console.debug("Scrolling to", selector);
     const element = pageBody.querySelector(selector);
-    element.scrollIntoView({
-      behavior: properties["animate"] ? "smooth" : "auto"
-    });
+
+    this.scrollIfNeeded(element, spec, component);
 
     element.classList.add("glib-scrollto");
     element.classList.add("glib-scrollto--highlighted");
+  }
+
+  // From https://gist.github.com/hsablonniere/2581101
+  scrollIfNeeded(element, spec, component, centerIfNeeded = true) {
+    const vm = this;
+    const observerOptions = {
+      threshold: 1 // Trigger callback when 100% of the element becomes/unbecomes visible
+    };
+    new IntersectionObserver(function([entry]) {
+      const ratio = entry.intersectionRatio;
+      if (ratio < 1) {
+        const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
+        element.scrollIntoView({
+          block: place,
+          inline: place,
+          behavior: spec["animate"] ? "smooth" : "auto"
+        });
+      } else {
+        vm.onScrollEnd(element, spec, component);
+        this.disconnect();
+      }
+    }, observerOptions).observe(element);
+  }
+
+  onScrollEnd(element, spec, component) {
     setTimeout(() => {
       element.classList.remove("glib-scrollto--highlighted");
-    }, 500);
+    }, 300); // Allow time so the changes can be seen by human eyes.
+    GLib.action.execute(spec.onScroll, component);
   }
 }

package/app.vue

@@ -201,7 +201,7 @@ body,
   // // So that we can display a semi-transparent layer on hover (see below)
   position: relative;
 
-  &:hover:before {
+  &:not(.no-hover):hover:before {
     content: "\A";
     width: 100%;
     height: 100%;

package/components/component.vue

@@ -241,7 +241,9 @@ export default {
   },
   data() {
     return {
-      name: null
+      name: null,
+      // See events#$recursiveUpdate().
+      $passthrough: true
     };
   },
   // beforeUpdate() {
@@ -264,7 +266,13 @@ export default {
       }
     },
     $update() {
-      this.$refs.delegate.$update();
+      this.$ready();
+
+      const delegate = this.$refs.delegate;
+      if (delegate) {
+        // Might be null if the component is getting removed as part of the update.
+        delegate.$update();
+      }
     },
     $registryEnabled() {
       return false;

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,22 +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);
 
-      setTimeout(() => {
-        this.$executeOnChange();
-      }, 500);
+      // setTimeout(() => {
+      this.$executeOnChange();
+      // }, 500);
     },
     $internalizeValue(val) {
       if (val == this.spec.checkValue) {
         return val;
       }
       return this.spec.uncheckValue;
-    },
-  },
+    }
+  }
 };
 </script>
 

package/components/fields/text.vue

@@ -9,7 +9,8 @@
       :hint="spec.hint"
       :placeholder="spec.placeholder"
       :maxlength="spec.maxLength || 255"
-      :disabled="spec.readOnly"
+      :disabled="spec.disabled"
+      :readonly="spec.readOnly"
       :type="variant.type"
       :rules="rules"
       :prepend-inner-icon="leftIconName"

package/components/fields/textarea.vue

@@ -8,12 +8,15 @@
       :hint="spec.hint"
       :placeholder="spec.placeholder"
       :maxlength="spec.maxLength || 255"
-      :disabled="spec.readOnly"
+      :disabled="spec.disabled"
+      :readonly="spec.readOnly"
       :height="height"
       :rules="$validation()"
       counter
       :outlined="$classes().includes('outlined')"
       :no-resize="$classes().includes('no-resize')"
+      :dense="$classes().includes('dense')"
+      :autofocus="spec.autoFocus || false"
       validate-on-blur
       @keyup="$onTyping"
       @input="onChange"

package/components/mixins/events.js

@@ -166,26 +166,28 @@ export default {
       // this._linkFieldModels();
       this.$ready();
     },
-    async $recursiveUpdate() {
-      this.$update();
-      this.$forceUpdate();
+    async $recursiveUpdate(stack) {
+      const children = this.$children;
+      if (this.spec) {
+        this.$update();
+        // this.$forceUpdate();
 
-      // 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();
+        if (this.$data.$passthrough && children.length > 0) {
+          // stack = stack || [];
+          // stack = stack.concat([GLib.component.vueName(this)]);
 
-      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.
+          //
+          // Not sure if this is still required if component.vue's $ready() is written as a computed property.
+          await this.$nextTick();
+        }
+      }
+
+      children.find(child => {
+        child.$recursiveUpdate(stack);
       });
     },
-    // _recursiveUpdate() {
-    //   this.$update();
-    //   this.$forceUpdate();
-
-    //   this.$children.find(child => {
-    //     child._recursiveUpdate();
-    //   });
-    // },
     $dispatchEvent(name, data) {
       const event = new Event(name, { bubbles: true });
 

package/nav/dialog.vue

@@ -5,7 +5,7 @@
     :dark="false"
     :fullscreen="fullscreen"
     :sm-and-down="false"
-    :persistent="true"
+    :persistent="!spec.closeOnBlur"
   >
     <v-card :style="hamburgerStyles" class="hamburger">
       <!-- <v-card-title v-if="title || showClose" class="text-h5" primary-title> -->

package/package.json

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

package/utils/http.js

@@ -160,7 +160,10 @@ export default class {
       url = Utils.url.appendParams(url, body);
       body = null;
     }
-    console.debug(`${method} ${url}`);
+    const silent = properties.silent;
+    if (!silent) {
+      console.debug(`${method} ${url}`);
+    }
 
     const request = new HttpRequest();
     let response = null;
@@ -195,7 +198,9 @@ export default class {
         }
       })
       .then(data => {
-        console.debug("Success", data);
+        if (!silent) {
+          console.debug("Success", data);
+        }
         jsonHandler(data, response);
       })
       .catch(error => {
@@ -209,7 +214,9 @@ export default class {
           if (errorHandler) {
             errorHandler(error, response);
           } else {
-            Utils.launch.snackbar.error(message, component);
+            if (!silent) {
+              Utils.launch.snackbar.error(message, component);
+            }
           }
         } else {
           console.info("Canceled");

package/utils/settings.js

@@ -3,8 +3,8 @@ class MutableSettings {
     this.reactive = true;
     this.themes = {};
     this.gtagId = null;
-    this.errorHandler = err => {
-      console.error(err.message);
+    this.errorHandler = (err, message) => {
+      console.error(message || err.message);
     };
     this.headerAugmenter = (_url, _method) => {
       // Set a custom augmenter to add custom HTTP headers.