WIP Добавил базовый компонент для числового инпута

src/components/base/BaseNumberInput.vue

@@ -0,0 +1,169 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
+    q-input(
+      v-model="value",
+      :name="name",
+      :multiple="multiple"
+      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
+      :placeholder="placeholder",
+      :outlined="outlined",
+      :dense="dense",
+      :type="type",
+      :readonly="readonly",
+      :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
+      :mask="mask",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
+      :accept="accept",
+      :debounce="debounce",
+      :shadow-text="shadowText"
+      hide-bottom-space
+    )
+      .flex.flex-col.mb-1
+        q-icon.cursor-pointer.-rotate-90.arrow(
+          name="arrow_forward_ios", 
+          size="15px",
+          @click="increment",
+          @mousedown="fastIncrement",
+          @mouseup="deleteInterval"
+          )
+        q-icon.cursor-pointer.-rotate-90.arrow(
+          name="arrow_back_ios", 
+          size="15px",
+          @click="decrement",
+          @mousedown="fastDecrement",
+          @mouseup="deleteInterval"
+          )
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import { v_model } from "@/shared/mixins/v-model";
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseNumberInput",
+  components: { BaseInput, BaseInputContainer },
+  mixins: [v_model],
+  data() {
+    return {
+      intervalId: 0,
+    };
+  },
+  props: {
+    step: {
+      type: Number,
+      default: 1,
+    },
+    multiple: Boolean,
+    circle: Boolean,
+    doc: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      default: "text",
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    shadowText: String,
+    mask: String,
+    debounce: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
+    itemAligned: Boolean,
+    modelValue: [String, Date, Number],
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    iconLeft: Boolean,
+    name: String,
+  },
+  methods: {
+    increment() {
+      this.value = Number.parseFloat(Number(this.value) + this.step).toFixed(
+        this.rounding
+      );
+    },
+    decrement() {
+      this.value = Number.parseFloat(this.value - this.step).toFixed(
+        this.rounding
+      );
+    },
+    fastIncrement() {
+      this.intervalId = setInterval(() => this.increment(), 100);
+    },
+    fastDecrement() {
+      this.intervalId = setInterval(() => this.decrement(), 100);
+    },
+    deleteInterval() {
+      clearInterval(this.intervalId);
+    },
+  },
+  computed: {
+    rounding() {
+      return String(this.step).split(".")[1]?.length || 0;
+    },
+  },
+};
+</script>
+
+<style lang="sass">
+.q-field .q-field__control-container
+  display: flex
+  align-items: center
+</style>
+
+<style lang="sass" scoped>
+.arrow
+  color: var(--font-grey-color)
+  &:hover
+    color: var(--font-dark-blue-color)
+</style>