glib-web 3.1.0 → 3.2.0

package/actions/panels/scrollTo.js

@@ -35,6 +35,7 @@ export default class {
     };
     new IntersectionObserver(function([entry]) {
       const ratio = entry.intersectionRatio;
+
       if (ratio < 1) {
         // const place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
         const place = ratio <= 0 ? alignment : "nearest";
@@ -42,9 +43,15 @@ export default class {
           block: place,
           inline: place,
           behavior: spec["animate"] ? "smooth" : "auto",
-
         });
       } else {
+        if (spec.force) {
+          element.scrollIntoView({
+            block: alignment,
+            inline: alignment,
+            behavior: spec["animate"] ? "smooth" : "auto",
+          });
+        }
         vm.onScrollEnd(element, spec, component);
         this.disconnect();
       }

package/components/fields/_select.vue

@@ -20,7 +20,7 @@ export default {
     spec: { type: Object, required: true },
     defaultValue: { type: String, default: null }
   },
-  data () {
+  data() {
     return {
       options: null,
       append: {},
@@ -28,7 +28,7 @@ export default {
     };
   },
   computed: {
-    values () {
+    values() {
       // Depends on whether the field is single or multiple
       if (this.$type.isArray(this.fieldModel)) {
         return this.fieldModel.length > 0 ? this.fieldModel : this.emptyValue;
@@ -38,18 +38,18 @@ export default {
       // return this.emptyValue;
     },
     // To avoid empty param error
-    emptyValue () {
+    emptyValue() {
       return [null];
     },
-    density () {
+    density() {
       return determineDensity(this.spec.styleClasses)
     }
   },
   methods: {
-    $ready () {
+    $ready() {
       this.updateData(false);
     },
-    normalizedOptions () {
+    normalizedOptions() {
       return this.spec.options.map(i => {
         switch (i.type) {
           case "label":
@@ -61,13 +61,13 @@ export default {
         }
       });
     },
-    classes () {
+    classes() {
       return this.$classes().concat("g-text-field--hintless");
     },
-    onChange () {
+    onChange() {
       this.$executeOnChange();
     },
-    updateData (reinitValue) {
+    updateData(reinitValue) {
       this.options = this.normalizedOptions();
       this.append = this.spec.append || {};
       this.rules = this.$validation();
@@ -80,7 +80,7 @@ export default {
         this.fieldModel = this.defaultValue;
       }
     },
-    $registryEnabled () {
+    $registryEnabled() {
       return false;
     }
   }

package/components/fields/otpField.vue

@@ -5,6 +5,7 @@
         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)" />
+      <label class="hint">{{ spec.hint }}</label>
     </div>
     <div v-else>
       <input v-for="(digit, index) in digits" ref="input" :key="index" v-model="otp[index]" type="number"
@@ -12,6 +13,7 @@
         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)" />
+      <label class="hint">{{ spec.hint }}</label>
     </div>
     <input type="hidden" :name="spec.name" :value="otpValue" />
   </div>
@@ -26,22 +28,21 @@ export default {
   },
   data() {
     return {
-      digits: 0,
-      otp: []
-    };
+      otp: (this.spec.value || '').toString().split("")
+    }
   },
-
   computed: {
     otpValue() {
+      if (!this.otp) return ''
+
       // concatenate the digits into a single string
       return this.otp.join("");
-    }
+    },
+    digits() {
+      return this.spec.length
+    },
   },
   methods: {
-    $ready() {
-      this.digits = this.spec.length;
-      this.otp = Array(this.spec.length).fill("");
-    },
     handleInput(event, index) {
       if (event.target.value.length === 1) {
         this.focusNext(index);
@@ -51,10 +52,10 @@ export default {
       if (event.key === "Backspace") {
         event.preventDefault();
         if (this.otp[index] !== "") {
-          this.$set(this.otp, index, "");
+          this.otp[index] = ""
         } else {
           this.focusPrevious(index);
-          this.$set(this.otp, index - 1, "");
+          this.otp[index - 1] = ""
         }
       }
     },
@@ -116,4 +117,14 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+.hint {
+  display: none;
+}
+
+input:focus~.hint,
+input:focus-visible~.hint {
+  display: block;
+  padding: 8px 16px;
+}
 </style>

package/components/mixins/inputVariant.js

@@ -1,16 +1,13 @@
 const variants = ['outlined', 'plain', 'underlined', 'filled', 'solo', 'solo-inverted', 'solo-filled']
 
 export default {
-    data: function () {
-        return {
-            variant: 'outlined'
-        }
-    },
-    methods: {
-        $ready() {
-            variants.forEach((value) => {
-                if (this.$classes().includes(value)) this.variant = value
+    computed: {
+        variant() {
+            let val = null
+            variants.forEach((vari) => {
+                if (this.$classes().includes(vari)) val = vari
             })
+            return val || 'outlined'
         }
     }
 }

package/nav/dialog.vue

@@ -138,6 +138,7 @@ export default {
     },
     reload(newSpec) {
       if (Utils.http.proceedEvenWhenDirty()) {
+        this.spec.url = newSpec.url;
         this.urlLoaded = false;
         this.show(true);
       }

package/package.json

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