VkInput.vue

<script>
'use strict'

const VkInput = {
  data() {
    return {

    }
  },

  props: {
    type: {
      type: String,
      default: 'text'
    },

    placeholder: {
      type: String
    },

    icon: {
      type: String
    },

    color: {
      type: String
    },

    disabled: {
      type: Boolean
    },

    size: {
      type: String
    },

    wide: {
      type: String
    },

    flipIcon: {
      type: Boolean
    }
  },

  computed: {
    iconName() {
      if(this.icon)
        return 'uk-icon-' + this.icon
    },

    colorName() {
      if(this.color)
        return 'uk-form-' + this.color
    },

    sizeName() {
      if(this.size)
        return 'uk-form-' + this.size
    },

    wideName() {
      if(this.wide)
        return 'uk-form-width-' + this.size
    }
  },

  methods: {
    focus() {
      this.$refs.input.focus()
    },

    onChange(e) {
      this.$emit('change', e.target.value)
    }
  },

  created() {
    
  }
}

if(typeof exports === 'object' && typeof module === 'object') {
  module.exports = VkInput
} else if(typeof define === 'function' && define.amd) {
  define(function () { return VkInput })
} else if (typeof window !== 'undefined') {
  window.VkInput = VkInput
}
</script>

<template>
  <span :class="['uk-form', {'uk-form-icon': icon}]">
    <i v-if="icon" :class="[iconName, {'flip-icon': flipIcon}]"></i>
    <input
      ref="input"
      :type="type"
      :class="[colorName, wideName, sizeName]"
      name=""
      tabindex="-1"
      :placeholder="placeholder"
      autocomplete="off"
      :disabled="disabled"
      @input="onChange"
      >
  </span>
</template>