<template>
    <div class="form-floating" :class="formClass">
        <input :type="type" class="form-control" :class="inputClass" :placeholder="placeholder" 
               :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" 
               :readonly="readOnly" :disabled="disabled">
        <label :class="labelClass">{{ labelText }}</label>
    </div>
</template>
<script>
export default{
    props:{
        label:{ type:[String,Number], default:"Enter Value"},
        type:{ type:String, default:"text"},
        formClass:{ type:String, default:" "},
        placeholder:{ type:String, default:"value" },
        inputClass:{ type:String, default:" "},
        labelClass:{ type:String, default:" "},
        modelValue:[String,Number,Date,File,Object],
        readonly:{type:Boolean,default:false},
        disabled:{type:Boolean,default:false},
    },
    data(){
        return {
            readOnly:this.readonly
        }
    },
    computed:{
        labelText(){
            return this.readOnly? this.label+' [Read-Only]' : this.label;
        }
    },
    watch:{
        readonly(n){
            this.readOnly = n;
        }
    }
}
</script>