Vue component for .ui.input

input.js

//  ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"

export default {
    props: {
        disabled: {
            type: Boolean,
            required: false,
            default: false
        },
        placeholder: {
            type: String
        },
        type: {
            type: String,
            default: 'text'
        },
        value: {
            type: String
        }
    },
    methods: {
        updateValue(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)
        }
    }
}

Input.vue

<template lang="html">
    <div v-bind:class="['ui', { 'disabled' : disabled }, iconClasses(), 'input', { 'focus' : focus }, { 'loading' : dLoading }, { 'error' : error }]">
        <input v-bind:type="'text'" v-bind:placeholder="placeholder" v-bind:disabled="disabled"
            ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)">
        <i v-bind:class="[dIcon.value, 'icon']" v-if="dIcon.value"></i>
      </div>
</template>

<script>
import Input from '../mixins/common/input.js'

export default {
    mixins: [Input],
    data() {
        return {
            dIcon: {
                value: this.icon,
                position: this.iconPosition
            },
            dLoading: this.loading
        }
    },
    props: {
        focus: {
            type: Boolean,
            required: false,
            default: false
        },
        loading: {
            type: Boolean,
            required: false,
            // default: dLoading
        },
        error: {
            type: Boolean,
            required: false,
            default: false
        },
        icon: {
            type: String,
            required: false,
            // default: false
        },
        iconPosition: {
            type: String,
            required: false,
            default: 'right',
            validator(value) {
                return value == 'right' || value == 'left'
            }
        },
        // leftIcon: {
        //     type: String,
        //     required: false,
        //     // default: 'right',
        //     // validator(value) {
        //     //     return true
        //     // }
        // }
    },
    created() {
        if (this.loading && !this.icon) {
            this.dIcon.value = 'notched circle loading';
            this.dIcon.position = 'left';
        }
    },
    methods: {
        iconClasses() {
            if (this.dIcon.value) {
                return (this.dIcon.position == 'right' ? 'icon' : this.dIcon.position + ' icon')
            }

            return false
        }
    }
}
</script>