geoproject-app/src/components/ui/NumberInput.vue

<template>
  <div class="number-input">
    <input
      type="number"
      :value="modelValue"
      :min="min"
      :max="max"
      :step="step"
      :id="id"
      :class="inputClass"
      :disabled="disabled"
      @input="handleInput"
    />
    <div class="spinner-buttons">
      <button
        type="button"
        class="spinner-btn spinner-up"
        @click="increment"
        :disabled="disabled || (max !== undefined && modelValue >= max)"
        tabindex="-1"
      >
        <svg
          width="8"
          height="6"
          viewBox="0 0 8 6"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M4 0L7.4641 6H0.535898L4 0Z" fill="currentColor" />
        </svg>
      </button>
      <button
        type="button"
        class="spinner-btn spinner-down"
        @click="decrement"
        :disabled="disabled || (min !== undefined && modelValue <= min)"
        tabindex="-1"
      >
        <svg
          width="8"
          height="6"
          viewBox="0 0 8 6"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M4 6L0.535898 0H7.4641L4 6Z" fill="currentColor" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Number,
    required: true,
  },
  min: {
    type: Number,
    default: undefined,
  },
  max: {
    type: Number,
    default: undefined,
  },
  step: {
    type: Number,
    default: 1,
  },
  id: {
    type: String,
    default: undefined,
  },
  inputClass: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:modelValue']);

const handleInput = (event) => {
  const value = Number(event.target.value);
  emit('update:modelValue', value);
};

const increment = () => {
  const newValue = props.modelValue + props.step;
  if (props.max === undefined || newValue <= props.max) {
    emit('update:modelValue', newValue);
  }
};

const decrement = () => {
  const newValue = props.modelValue - props.step;
  if (props.min === undefined || newValue >= props.min) {
    emit('update:modelValue', newValue);
  }
};
</script>