Fix min/max settings for number fields #76

Cockpit-HQ · Feb 10, 2023 · abbcef3 · abbcef3
1 parent 91760ca
commit abbcef3
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/modules/App/assets/vue-components/field-number.js b/modules/App/assets/vue-components/field-number.js
@@ -1,4 +1,8 @@
 
+const isNumeric = function(mixed_var){
+    return (typeof(mixed_var)==='number' || typeof(mixed_var)==='string') && mixed_var !== '' && !isNaN(mixed_var);
+}
+
 export default {
 
     _meta: {
@@ -52,14 +56,33 @@ export default {
     },
 
     methods: {
+
+        check() {
+
+            let newVal = null;
+
+            if (isNumeric(this.min) && isNumeric(this.val) && this.val < this.min) {
+                newVal = this.min;
+            }
+
+            if (isNumeric(this.max) && isNumeric(this.val) && this.val > this.max) {
+                newVal = this.max;
+            }
+
+            if (newVal !== null) {
+                this.val = newVal;
+                this.update();
+            }
+        },
+
         update() {
-            this.$emit('update:modelValue', this.val)
+            this.$emit('update:modelValue', this.val === '' ? null : this.val)
         }
     },
 
     template: /*html*/`
         <div field="number">
-            <input type="number" class="kiss-input kiss-width-1-1" v-model.number="val" @input="update" :placeholder="placeholder" :max="max" :min="min" :step="step" :readonly="readonly">
+            <input type="number" class="kiss-input kiss-width-1-1" v-model.number="val" @input="update" @change="check" :placeholder="placeholder" :max="max" :min="min" :step="step" :readonly="readonly">
         </div>
     `,
 }