<template>
        <input :readonly='readonly' :type="type" :id="id" class="form-control-sm form-control input-form" :value="value" :attribute="name" :label="label" :group="group" :placeholder="placeholder" @input="$emit('update:value', $event.target.value)" @blur="$emit('blur')">
</template>
<script lang="ts">
export default {
    name: 'InputForm',
    props: {
        id: { type: String, default: '' },
        name: { type: String, default: '' },
        label: { type: String, default: '' },
        value: { type: String, default: '' },
        placeholder : { type: String, default: '' },
        group: { type: String, default: '' },
        type: { type: String, default: 'text' },
        invalid: { type: Boolean, default: false },
        readonly: { type: Boolean, default: false },
    },
    data: ()=>{
        return {
            isEditing: false
        }
    },
    watch:{
        value: function(){
            this.isEditing = true;
            this.$emit('update:isEditing', this.isEditing);
        }
    },
}
</script>
<style scoped>
.input-form{
    background: var(--input-background-color);
    border-radius: 0px;
    border-style: none;
    border-bottom: 1px dashed #d1d3e2;
    font-size: var(--input-label-font-size);
}

.validation-icon{
    color: #946464;
}

.label{
    font-size: var(--input-label-font-size);
    color: var(--label-form-color);
}
</style>