<template>
    <div class="My-Input">
        <label>{{ label }}</label>
        <input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
        <input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
    </div>
</template>

<script>
export default {
    name: "MyInput",
    props: [
        'label',
        'type',
        'name',
        'value'
    ],
    data() {
        return {
            currentValue: this.value
        }
    },
    methods: {
        validate() {
            this.$emit('validate', this.currentValue);
        }
    },
    watch: {
        currentValue(val) {
            this.$emit('input', val);
        }
    }
}
</script>
