<template>
    <div class="relative">
        <label
            :for="id"
            class="block mb-2 text-sm font-medium text-gray-900">{{ label }}
        </label>
        <input
            pattern="[0-9]*"
            inputmode="numeric"
            type="number"
            :id="id"
            class="bg-slate-50 border border-gray-500 text-gray-900 text-sm rounded-lg focus:ring-blue focus:border-blue block w-full p-2.5"
            :value="value"
            @input="$emit('update:value', $event.target.value)"
            :min="min"
            :max="max"
            :placeholder="placeholder"
            :required="required">
    </div>
</template>

<script>
export default {
    name: "InputText",
    emits: ['update:value'],
    props: {
        id: {
            type: String,
            default: '',
            required: true
        },
        label: {
            type: String,
            default: ''
        },
        value: {
            type: String,
            default: ''
        },
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 99
        },
        placeholder: {
            type: String,
            default: ''
        },
        required: {
            type: Boolean,
            default: false
        },
    },
}
</script>
