<template>
    <div class="inputtext field" :class="this.class" :style="style">
        <label v-if="label" class="p-label" :class="{'p-error': this.fieldErrors.includes(label)}">
            {{ label.concat(required ? ' *' : '') }}
        </label>
        <prime-input-text
            :id="id"
            class="p-inputtext-sm"
            :class="{'p-invalid': this.fieldErrors.includes(label)}"
            :disabled="disabled"
            :value="modelValue"
            @input="onInput"
        />
    </div>
</template>

<script>
import PrimeInputText from 'primevue/inputtext'
import {mapGetters} from "vuex";

export default {
    name: 'inputtext',
    components: {
        PrimeInputText
    },
    props: {
        id: {
            type: String
        },
        label: {
            type: String,
            required: true
        },
        class: {
            type: String,
            default: 'col-6'
        },
        style: {
            type: String
        },
        disabled: {
            type: Boolean,
            default: false
        },
        required: {
            type: Boolean,
            default: false
        },
        modelValue: {
            type: [String, Number],
        },
    },
    computed: {
        ...mapGetters(['fieldErrors']),
    },
    methods: {
        onInput(event) {
            this.$emit("update:modelValue", event.target.value);
        }
    }
}
</script>

<style lang="scss" scoped>

.inputtext.field {
    .p-label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
    }

    .p-inputtext-sm {
        width: 100%;
    }
}
</style>
