AbstractFormField.vue

<script>
    import HasErrors from '../../mixins/HasErrors'
    import TitleCase from "../../mixins/TitleCase"
    export default {
        mixins: [HasErrors, TitleCase],
        data(){
            return {
                propValue: this.value,
            }
        },
        props: {
            value: {
                type: [String, Number, Boolean, Object],
                required: false,
            },
            field: {
                type: [String],
                required: true,
                default: ()=> 'field'
            },
            label: {
                type: [String],
                required: false,
                default: () => null
            },
            errors: {
                type: [Object],
                required: false,
                default: () => {
                    return {}
                },
            },
            options: {
                type: [Array],
                required: false,
                default: () => [],
            },
            inputClass: {
                type: [String],
                required: false,
                default: () => ''
            },
            disabled: {
                required: false,
                type: [Boolean],
                default: () => false
            },
            readOnly: {
                required: false,
                type: [Boolean],
                default: () => false
            },
            showLabel: {
                required: false,
                type: [Boolean],
                default: () => true
            },
            autoFocus: {
                required: false,
                type: [Boolean],
                default: () => false
            },
            default: {
                required: false,
                default: () => ''
            },
        },
        watch: {
            errors: {
                deep:true,
                immediate:true,
                handler(newValue, oldValue) {
                    this.mix_errors = newValue
                }
            },
            disabled: {
                handler(isDisabled, oldValue) {
                    if(isDisabled === false){
                        this.propValue = this.getFieldValue(this.value)
                        setTimeout(()=>this.focusInput(), 100)
                    }
                }
            },
            propValue: {
                deep:true,
                handler(newValue, oldValue) {
                    this.propValue = this.getFieldValue(newValue)
                    this.$emit('input', this.propValue)
                }
            },
            value: {
                deep:true,
                immediate:true,
                handler(newValue, oldValue) {
                    this.propValue = this.getFieldValue(newValue)
                }
            },
        },
        methods: {
            getFieldValue(newValue){
                return newValue || this.default
            },
            focusInput(){
                setTimeout(()=>{
                    if(this.autoFocus && this.$refs.input){
                        this.$refs.input.focus()
                        if(['textarea', 'text', 'number'].includes(this.$refs.input.type)){
                            this.$refs.input.setSelectionRange(0,  this.$refs.input.value.length)
                        }
                    }
                }, 100)
            }
        },
        computed:{
            inputClasses(){
                return `${this.inputClass} ${this.disabled ? 'disabled' : ''}`
            },
            fieldLabel(){
                return this.label ? this.label : this.titleCase(this.field.replace('.', ' '))
            }
        },
        mounted() {
            this.focusInput()
        }
    }
</script>
<template>
    <div class="form-group">
        <label v-if="showLabel" class="mb-1 font-weight-bold small">
            {{ fieldLabel }}
        </label>
        <input
            ref="input"
            type="text"
            class="form-control"
            v-model="propValue"
            :disabled="disabled"
            :class="inputClasses"
            @keydown.tab="$emit('keydownTab')"
            @keydown.esc="$emit('keydownEsc')"
            @keydown.enter="$emit('keydownEnter')"
        />
        <p v-if="hasErrors(field)" class="small form-text text-danger">
            {{ getError(field) }}
        </p>
    </div>
</template>