glib-web 3.8.0 → 3.8.2

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/nav/drawer.vue

@@ -5,14 +5,15 @@
   <div :class="cssClasses" :style="style">
     <v-navigation-drawer v-model="state" app :dark="cssClasses.includes('dark') || null"
       :permanent="mdAndUp || cssClasses.includes('permanent')" :expand-on-hover="expandOnHover()"
-      v-model:mini-variant="shrunk" @input="updateState">
+      v-model:mini-variant="shrunk" @input="updateState" @mouseenter="handleDrawerEnter" @mouseleave="handleDrawerLeave"
+      :class="isExpand ? 'left-menu-expand' : 'left-menu-shrink'">
 
       <template v-if="spec.header">
         <panels-responsive :spec="spec.header" />
       </template>
-
       <glib-component v-if="spec.body" :spec="spec.body" />
 
+
       <v-list :dense="true">
         <div v-for="(item, index) in spec.rows" :key="index" class="nav-item">
           <div v-if="item.type == 'button'" class="indicator"></div>
@@ -64,6 +65,7 @@ export default {
       state: null,
       mini: true,
       shrunk: true,
+      isExpand: false,
     };
   },
   computed: {
@@ -110,6 +112,13 @@ export default {
     expandOnHover() {
       return this.mini;
     },
+    handleDrawerEnter() {
+      this.isExpand = true;
+    },
+
+    handleDrawerLeave() {
+      this.isExpand = false;
+    },
   },
 };
 </script>

package/package.json

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