Input mixins for VueJS 2 components

focus.events.js

module.exports =  {
    methods: {
        // v-on:focus="emitFocus"
        emitFocus: function() {
            this.$emit('focus')
        },
        // v-on:blur="emitBlur"
        emitBlur: function() {
            this.$emit('blur')
        },
    }
}

form.events.js

module.exports = {
    methods: {
        emitChange: function(value) {
            // https://forum.vuejs.org/t/custom-checkbox-component/1120/8
            this.$emit('change', value)
            this.$emit('input', value)
        },
        emitInput: function(value) {
            this.$emit('change', value)
            this.$emit('input', value)
        },
        emitInvalid: function() {
            this.$emit('invalid')
        },
        emitReset: function() {
            this.$emit('reset')
        },
        emitSearch: function() {
            this.$emit('search')
        },
        emitSelect: function() {
            this.$emit('select')
        },
        emitSubmit: function() {
            this.$emit('submit')
        },
    }
}

index.js

var FocusEvents = require('./focus.events.js')
var KeyboardEvents = require('./keyboard.events.js')
var MouseEvents = require('./mouse.events.js')
var FormEvents = require('./form.events.js')

module.exports = {
    mixins: [FocusEvents, KeyboardEvents, MouseEvents, FormEvents],
    props: {
        id: {
            type: String,
            required: false,
        },
        accept: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        alt: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        autocomplete: {
            type: String,
            required: false,
            // default: 'off',
            validator: function(value) {
                return ['on', 'off'].indexOf(value) > -1
            }
        },
        autofocus: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        checked: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        dirname: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        disabled: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        form: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        formaction: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        formenctype: {
            type: String,
            required: false,
            // default: false,
            validator: function(value) {
                return [
                    'application/x-www-form-urlencoded',
                    'multipart/form-data',
                    'text/plain',
                ].indexOf(value) > -1
            }
        },
        formmethod: {
            type: String,
            required: false,
            // default: false,
            validator: function(value) {
                return [
                    'get',
                    'post',
                ].indexOf(value) > -1
            }
        },
        formnovalidate: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        formtarget: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        list: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        max: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        maxlength: {
            type: Number,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        min: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        multiple: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        name: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        pattern: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        placeholder: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        readonly: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        required: {
            type: Boolean,
            required: false,
            default: false,
            // validator(value) {
            //     return true
            // }
        },
        src: {
            type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        step: {
            type: Number,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
        type: {
            type: String,
            required: false,
            default: 'text',
            validator: function(value) {
                return [
                    'button',
                    'checkbox',
                    'color',
                    'date',
                    'datetime-local',
                    'email',
                    'file',
                    'hidden',
                    'image',
                    'month',
                    'number',
                    'password',
                    'radio',
                    'range',
                    'reset',
                    'search',
                    'submit',
                    'tel',
                    'text',
                    'time',
                    'url',
                    'week',
                ].indexOf(value) > -1
            }
        },
        value: {
            // type: String,
            required: false,
            // default: false,
            // validator(value) {
            //     return true
            // }
        },
    },
    methods: {
        // ref="input" v-bind:value="value" v-on:input="emitInput($event.target.value)"
        emitInput: function(value) {
            // If the value was not already normalized,
            // manually override it to conform
            if (value !== this.value) {
                this.$refs.input.value = value
            }

            // Emit the number value through the input event
            this.$emit('input', value)
        },
    }
}

keyboard.events.js

module.exports = {
    methods: {
        // v-on:keydown="emitKeyDown"
        emitKeyDown: function() {
            this.$emit('keydown')
        },
        // v-on:keypress="emitKeyPress"
        emitKeyPress: function() {
            this.$emit('keypress')
        },
        // v-on:keyup="emitKeyUp"
        emitKeyUp: function() {
            this.$emit('keyup')
        },
    }
}

mouse.events.js

module.exports = {
    methods: {
        // v-on:mouseenter="emitMouseEnter"
        emitMouseEnter: function() {
            this.$emit('mouseenter')
        },
        // v-on:mouseover="emitMouseOver"
        emitMouseOver: function() {
            this.$emit('mouseover')
        },
        // v-on:mousemove="emitMouseMove"
        emitMouseMove: function() {
            this.$emit('mousemove')
        },
        // v-on:mousedown="emitMouseDown"
        emitMouseDown: function() {
            this.$emit('mousedown')
        },
        // v-on:mouseup="emitMouseUp"
        emitMouseUp: function() {
            this.$emit('mouseup')
        },
        // v-on:click="emitClick"
        emitClick: function() {
            this.$emit('click')
        },
        // v-on:dblclick="emitDoubleClick"
        emitDoubleClick: function() {
            this.$emit('dblclick')
        },
        // v-on:contextmenu="emitContextMenu"
        emitContextMenu: function() {
            this.$emit('contextmenu')
        },
        // v-on:wheel="emitWheel"
        emitWheel: function() {
            this.$emit('wheel')
        },
        // v-on:mouseleave="emitMouseLeave"
        emitMouseLeave: function() {
            this.$emit('mouseleave')
        },
        // v-on:mouseout="emitMouseOut"
        emitMouseOut: function() {
            this.$emit('mouseout')
        },
        // v-on:select="emitSelect"
        emitSelect: function() {
            this.$emit('select')
        },
        // v-on:pointerlockchange="emitPointerLockChange"
        emitPointerLockChange: function() {
            this.$emit('pointerlockchange')
        },
        // v-on:pointerlockerror="emitPointerLockError"
        emitPointerLockError: function() {
            this.$emit('pointerlockerror')
        },
    }
}