glib-web 3.8.0 → 3.8.1

package/components/fields/_otp.vue

@@ -20,51 +20,29 @@ export default {
     return {
       otpLength: this.spec.length,
       otp: new Array(6).fill(''),
-      hint: false
+      hint: false,
+      isValueChanged: false
     };
   },
-  created() {
-    if (this.spec.value) {
-      const valueString = this.spec.value.toString();
-
-      for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
-        this.otp[i] = valueString[i];
-      }
-
-    }
-
-  },
-  mounted() {
-    if (this.spec.valueIf) {
-      const valueString = this.fieldModel.toString();
-
-      for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
-        this.otp[i] = valueString[i];
-      }
-    }
-  },
   watch: {
-    fieldModel(newFieldModel) {
-      let valueString = '';
-
-      if (newFieldModel !== '') {
-        valueString = isNaN(newFieldModel) ? '' : parseInt(newFieldModel).toString();
-      }
-      this.otp = [];
-      for (let i = 0; i < valueString.length; i++) {
-        this.otp[i] = valueString[i];
-      }
-
+    fieldModel: {
+      handler(val) {
+        this.updateOtp(val)
+      },
+      immediate: true
     }
   },
   methods: {
     $ready() {
-      if (this.spec.value) {
-        const valueString = this.spec.value.toString();
+      this.updateOtp(this.fieldModel)
+    },
+    updateOtp(val) {
+      if (!val) return;
 
-        for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
-          this.otp[i] = valueString[i];
-        }
+      const valueString = isNaN(val) ? '' : parseInt(val).toString();
+      this.otp = [];
+      for (let i = 0; i < this.otpLength && i < valueString.length; i++) {
+        this.otp[i] = valueString[i];
       }
     },
     onInput(index) {

package/components/mixins/styles.js

@@ -9,6 +9,8 @@ export default {
       fieldName: null,
       fieldModel: null,
       _show: true,
+      _watchers: [],
+      _isValueChanged: false,
       // Some components do not support null or empty string value, so we need to use an intermediary value.
       // See https://github.com/vuetifyjs/vuetify/issues/8876
       vuetifyEmptyString: "<EMPTY_STRING>"
@@ -57,33 +59,57 @@ export default {
             valueChanged = false;
           }
           this._linkFieldModels(valueChanged);
+          this._initConditional(oldSpec);
         }
       },
       immediate: true
     }
   },
-  // watch showIf and valueIf
-  mounted() {
-    if (this.spec && this.spec.valueIf) {
-      watchFieldModels(this.spec.valueIf, (value) => this.fieldModel = this.$sanitizeValue(this.$externalizeValue(value)));
-    }
-
-    if (this.spec && (this.spec.showIf || this.spec.loadIf)) {
-      watchFieldModels(this.spec.showIf || this.spec.loadIf, (value) => {
-        if (value) {
-          this._show = true;
-        } else {
-          this._show = false;
-        }
-      });
-    }
-  },
   unmounted() {
     if (fieldModels[this.fieldName]) {
       delete fieldModels[this.fieldName];
     }
   },
   methods: {
+    _initConditional(oldSpec) {
+      // unreg old fieldName
+      if (oldSpec && fieldModels[oldSpec.name]) {
+        delete fieldModels[oldSpec.name];
+      }
+      // unreg watchers if there is
+      this._watchers.forEach(watcher => {
+        if (typeof watcher == Function) {
+          watcher();
+        }
+      });
+
+      let watcher1, watcher2;
+
+      //  watch showIf & loadIf
+      if (this.spec && this.spec.valueIf) {
+        watcher1 = watchFieldModels(this.spec.valueIf, (value) => {
+          // prevent override spec.value
+          if (!this._isValueChanged && this.spec.value) {
+            this._isValueChanged = true;
+            return;
+          }
+
+          this.fieldModel = this.$sanitizeValue(this.$externalizeValue(value));
+        });
+        this._watchers.push(watcher1);
+      }
+
+      if (this.spec && (this.spec.showIf || this.spec.loadIf)) {
+        watcher2 = watchFieldModels(this.spec.showIf || this.spec.loadIf, (value) => {
+          if (value) {
+            this._show = true;
+          } else {
+            this._show = false;
+          }
+        });
+        this._watchers.push(watcher2);
+      }
+    },
     // TODO: Deprecated
     genericStyles(spec) {
       return this.$styles(spec);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -41,4 +41,4 @@
     "prettier": "^1.18.2",
     "typescript": "^4.9.5"
   }
-}
+}