<template>
  <InputGroup
    :label="label"
    type="number"
    :id="id"
    :placeholder="placeholder"
    :model-value="modelValue"
    :required="required"
    :disabled="disabled"
    :input-class="inputClass"
    :icon="icon"
    :icon-width="iconWidth"
    :icon-height="iconHeight"
    :datalist-id="datalistId"
    v-bind="numberAttrs"
    @update:model-value="$emit('update:modelValue', $event)"
  />
</template>

<script setup>
import { computed } from 'vue'
import InputGroup from './InputGroup.vue'

const props = defineProps({
  label:       { type: String, default: '' },
  id:          { type: String, required: true },
  placeholder: { type: String, default: '' },
  modelValue:  { type: [String, Number], default: 0 },
  min:         { type: [String, Number], default: '' },
  max:         { type: [String, Number], default: '' },
  required:    { type: Boolean, default: false },
  disabled:    { type: Boolean, default: false },
  inputClass:  { type: String, default: '' },
  icon:        { type: String, default: '' },
  iconWidth:   { type: [String, Number], default: '40px' },
  iconHeight:  { type: [String, Number], default: '40px' },
  datalistId:  { type: String, default: '' },
})

defineEmits(['update:modelValue'])

const numberAttrs = computed(() => {
  const attrs = {}
  if (props.min !== '') attrs.min = props.min
  if (props.max !== '') attrs.max = props.max
  return attrs
})
</script>
