<script setup lang="ts">
import { ref, watch } from 'vue';

const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  value: {
    type: Number,
    default: 1
  },
  class: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:timeValue'])
const timeValue = ref(1)

watch(timeValue, (newValue) => {
  emit('update:timeValue', newValue)
})
</script>

<template>
  <div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
    <input v-model="timeValue" autocomplete="off" type="number" :placeholder="placeholder" :disabled="disabled"
      :readonly="readonly" inputmode="numeric" pattern="[0-9.]*"
      onblur="this.value = parseInt(this.value) ? this.value : 1"
      oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
      class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
  </div>
</template>
