<template>
  <div class="Input flex-col">
    <input
        v-model="text"
        :type="type"
        :id="makeId()"
        :step="step"
        :min="min"
        :max="max"
        :required="required"
        placeholder=" "
        @blur="emit('blur')"
    />
    <label :for="makeId()">{{ label }}</label>
  </div>
</template>

<script setup lang="ts">
type Props = {
  type ?: 'text' | 'number'
  max ?: number
  min ?: number
  step ?: number
  required ?: boolean
  label : string
  id : string
  uid : number
}

const {
  type = 'text',
  required = false,
  step = 0.01,
  min = 1,
  max,
  label,
  id,
  uid,
} = defineProps<Props>()

const emit = defineEmits(['blur'])

const text = defineModel()

const makeId = () => `${id}_${uid}`
</script>