WIP Исправил ошибки ввода в числовой инпут

src/components/base/BaseInputNumber.vue

@@ -1,21 +1,22 @@
 <template lang="pug">
   base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
     q-input(
+      ref="numberInput"
       v-model="value",
       :name="name",
-      :multiple="multiple"
+      :multiple="multiple",
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize }",
       :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
       :dense="dense",
-      :type="type",
+      type="number",
       :readonly="readonly",
       :disable="disabled",
       :filled="filled",
       :bg-color="filled || standout ? '' : 'white'",
-      :rules="rule",
+      :rules="rule || ruleNumberInput",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
       :no-error-icon="noErrorIcon",
@@ -25,7 +26,7 @@
       :square="square",
       :standout="standout"
       :accept="accept",
-      :debounce="debounce",
+      :debounce="null",
       :shadow-text="shadowText"
       hide-bottom-space
     )
@@ -48,16 +49,16 @@
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
-import { v_model } from "@/shared/mixins/v-model";
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+import { ruleNumberInput } from "@/shared/utils/rulesInputs";
 
 export default {
   name: "BaseInputNumber",
   components: { BaseInput, BaseInputContainer },
-  mixins: [v_model],
   data() {
     return {
       intervalId: 0,
+      ruleNumberInput: [(val) => ruleNumberInput(val, this.max, this.min)],
     };
   },
   props: {
@@ -101,9 +102,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    type: {
-      default: "text",
-    },
     standout: {
       type: [Boolean, String],
       default: false,
@@ -124,10 +122,13 @@ export default {
     textColor: String,
     borderColor: String,
     rule: Array,
-    lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
+    lazyRule: String,
+    noErrorIcon: {
+      type: Boolean,
+      default: true,
+    },
     itemAligned: Boolean,
-    modelValue: [String, Date, Number],
+    modelValue: [Number],
     placeholder: String,
     disabled: Boolean,
     label: String,
@@ -135,26 +136,29 @@ export default {
     iconLeft: Boolean,
     name: String,
   },
+  emits: ["update:modelValue"],
   methods: {
     increment() {
-      if (this.value < this.max) {
-        this.value = Number.parseFloat(Number(this.value) + this.step).toFixed(
-          this.rounding
+      if (this.modelValue < this.max) {
+        this.$emit(
+          "update:modelValue",
+          Number((this.modelValue + this.step).toFixed(this.rounding))
         );
       } else {
         if (this.reverseValue) {
-          this.value = this.min;
+          this.$emit("update:modelValue", this.min);
         }
       }
     },
     decrement() {
-      if (this.min < this.value) {
-        this.value = Number.parseFloat(this.value - this.step).toFixed(
-          this.rounding
+      if (this.min < this.modelValue) {
+        this.$emit(
+          "update:modelValue",
+          Number((this.modelValue - this.step).toFixed(this.rounding))
         );
       } else {
         if (this.reverseValue) {
-          this.value = this.max;
+          this.$emit("update:modelValue", this.max);
         }
       }
     },
@@ -168,7 +172,20 @@ export default {
       clearInterval(this.intervalId);
     },
   },
+  watch: {
+    value(val) {
+      this.value = Number(val).toFixed(this.rounding);
+    },
+  },
   computed: {
+    value: {
+      get() {
+        return this.modelValue ? this.modelValue : 0;
+      },
+      set(value) {
+        this.$emit("update:modelValue", Number(value));
+      },
+    },
     rounding() {
       return String(this.step).split(".")[1]?.length || 0;
     },
@@ -180,6 +197,8 @@ export default {
 .q-field .q-field__control-container
   display: flex
   align-items: center
+input[type=number]::-webkit-inner-spin-button
+  -webkit-appearance: none
 </style>
 
 <style lang="sass" scoped>