AppBasic.js

export default {
  /**
   */
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    label: {
      type: String,
      default: 'text'
    },
    error: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: ''
    },
    under: {
      type: String,
      default: ''
    },
    mask: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    }
  },
  /**
   */
  data: () => ({
    className: 'form-group',
    classNameInput: 'form-control mask',
    customAttrs: {}
  }),
  /**
   */
  computed: {
    /**
     * @returns {Array}
     */
    classNames () {
      const classNames = [this.className, this.width]
      if (this.error) {
        classNames.push('has-error')
      }
      return classNames
    },
    /**
     * @returns {Object}
     */
    attrs () {
      return {
        id: this.id,
        name: this.name,
        value: this.value,
        type: this.type,
        class: this.classNameInput,
        autocomplete: 'disable-fill',
        ...this.customAttrs
      }
    },
    /**
     * @returns {Object}
     */
    listeners () {
      return {
        input: this.input,
        focus: this.focus,
        blur: this.blur
      }
    },
    /**
     * @returns {string}
     */
    id () {
      return `field-${this.name}`
    }
  },
  /**
   */
  methods: {
    /**
     * @param {Object} $event
     */
    input ($event) {
      this.$emit('input', $event.target.value)
    },
    /**
     * @param {Object} $event
     */
    focus ($event) {
      this.focused = true
      this.$emit('focus', $event)
    },
    /**
     * @param {Object} $event
     */
    blur ($event) {
      if (this.focused) {
        this.$emit('blur', $event)
      }
      this.focused = false
    },
    /**
     * @param {Object} $event
     */
    change ($event) {
      this.$emit('change', $event)
    }
  }
}

AppCheckbox.vue

<template>
  <div :class="classNames">
    <div class="form-check">
      <input
        v-bind="attrs"
        v-on="listeners"
      >
      <label
        :for="id"
        class="label"
      >
        <slot name="label">{{ label }}:</slot>
      </label>
    </div>
  </div>
</template>

<script type="text/javascript">
import AppBasic from './AppBasic'

export default {
  name: 'AppCheckbox',
  /**
   */
  mixins: [
    AppBasic
  ],
  /**
   */
  props: {
    value: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'checkbox'
    }
  },
  /**
   */
  data: () => ({
    className: '',
    classNameInput: ''
  }),
  /**
   */
  computed: {
    /**
     * @returns {Object}
     */
    listeners () {
      return {
        change: this.input,
        focus: this.focus,
        blur: this.blur
      }
    }
  },
  /**
   */
  methods: {
    input ($event) {
      this.$emit('input', $event.target.checked)
    }
  }
}
</script>

<style scoped>

</style>

AppInput.vue

<template>
  <div :class="classNames">
    <slot name="top" />
    <input
      v-if="mask"
      v-bind="attrs"
      v-on="listeners"
      v-mask="mask"
    >
    <input
      v-else
      v-bind="attrs"
      v-on="listeners"
    >
    <label :for="id">
      <slot name="label">{{ label }}:</slot>
    </label>
    <slot name="under">
      <p
        v-if="under"
        class="small"
        v-html="under"
      />
    </slot>
    <slot name="message">
      <p
        class="small message"
        v-html="message"
      />
    </slot>
  </div>
</template>

<script type="text/javascript">
import AppBasic from './AppBasic'

export default {
  name: 'AppInput',
  /**
   */
  mixins: [
    AppBasic
  ]
}
</script>

<style scoped>

</style>