astra-frontend/src/components/base/BaseInputNumber.vue

<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",
      :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="number",
      :readonly="readonly",
      :disable="disabled",
      :filled="filled",
      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule || ruleNumberInput",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
      :no-error-icon="noErrorIcon",
      :mask="mask",
      :maxlength="maxLength",
      :autogrow="autogrow",
      :square="square",
      :standout="standout"
      :accept="accept",
      :debounce="null",
      :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 BaseInputContainer from "@/components/base/BaseInputContainer.vue";
import { ruleNumberInput } from "@/shared/utils/rulesInputs";
import { roundNumber } from "@/shared/utils/methodsObjects";

export default {
  name: "BaseInputNumber",
  components: { BaseInput, BaseInputContainer },
  data() {
    return {
      intervalId: 0,
      timeoutId: 0,
      ruleNumberInput: [(val) => ruleNumberInput(val, this.max, this.min)],
      roundNumber: roundNumber,
    };
  },
  props: {
    step: {
      type: Number,
      default: 1,
    },
    max: {
      type: Number,
      default: 1,
    },
    min: {
      type: Number,
      default: 0,
    },
    reverseValue: Boolean,
    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,
    },
    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: String,
    noErrorIcon: {
      type: Boolean,
      default: true,
    },
    itemAligned: Boolean,
    modelValue: [Number],
    placeholder: String,
    disabled: Boolean,
    label: String,
    readonly: Boolean,
    iconLeft: Boolean,
    name: String,
  },
  emits: ["update:modelValue"],
  methods: {
    increment() {
      if (this.modelValue < this.max) {
        this.$emit(
          "update:modelValue",
          Number((this.modelValue + this.step).toFixed(this.rounding))
        );
      } else {
        if (this.reverseValue) {
          this.$emit("update:modelValue", this.min);
        }
      }
    },
    decrement() {
      if (this.min < this.modelValue) {
        this.$emit(
          "update:modelValue",
          Number((this.modelValue - this.step).toFixed(this.rounding))
        );
      } else {
        if (this.reverseValue) {
          this.$emit("update:modelValue", this.max);
        }
      }
    },
    fastIncrement() {
      this.timeoutId = setTimeout(() => {
        this.intervalId = setInterval(() => this.increment(), 100);
      }, 500);
    },
    fastDecrement() {
      this.timeoutId = setTimeout(() => {
        this.intervalId = setInterval(() => this.decrement(), 100);
      }, 500);
    },
    deleteInterval() {
      clearTimeout(this.timeoutId);
      clearInterval(this.intervalId);
    },
  },
  watch: {
    value(val) {
      this.value = this.roundNumber(val, 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;
    },
  },
};
</script>

<style lang="sass">
.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>
.arrow
  color: var(--font-grey-color)
  &:hover
    color: var(--font-dark-blue-color)
</style>