Main Input Component

Input.vue

<template>
  <div class="Input">

    <v-text-field 
    v-if="Type === 'field-box'" 
    :readonly="readonly"
    :disabled="disabled"
    :color="color"
    :background-color="background"
    :prepend-icon="icon_prepend"
    :prepend-inner-icon="icon_prepend_in"
    :append-icon="icon_append"
    :append-outer-icon="icon_append_out"
    :hint="hint"
    :persistent-hint="hint_focus"
    :counter="counter"
    :maxlength="maxlength"
    :placeholder="placeholder" 
    :label="label"
    box></v-text-field>
    
    <v-text-field
    v-else-if="Type === 'field-solo'" 
    :readonly="readonly"
    :disabled="disabled"
    :color="color"
    :background-color="background"
    :prepend-icon="icon_prepend"
    :prepend-inner-icon="icon_prepend_in"
    :append-icon="icon_append"
    :append-outer-icon="icon_append_out"
    :hint="hint"
    :persistent-hint="hint_focus"
    :counter="counter"
    :maxlength="maxlength"
    :label="label"
    solo></v-text-field>
    
    <v-text-field
    v-else-if="Type === 'field-outline'" 
    :readonly="readonly"
    :disabled="disabled"
    :color="color"
    :background-color="background"
    :prepend-icon="icon_prepend"
    :prepend-inner-icon="icon_prepend_in" 
    :append-icon="icon_append"
    :append-outer-icon="icon_append_out"
    :hint="hint"
    :persistent-hint="hint_focus"
    :counter="counter"
    :maxlength="maxlength"
    :label="label" 
    outline></v-text-field>
    
    <v-text-field
    v-model="title"
    v-else 
    :readonly="readonly" 
    :disabled="disabled"
    :color="color"
    :background-color="background"
    :prepend-icon="icon_prepend"
    :prepend-inner-icon="icon_prepend_in" 
    :append-icon="icon_append"
    :append-outer-icon="icon_append_out"
    :hint="hint"
    :persistent-hint="hint_focus"
    :counter="counter"
    :maxlength="maxlength"
    :placeholder="placeholder"
    :label="label"></v-text-field>


    <v-textarea v-if="Type === 'area-solo'"></v-textarea>
    <v-textarea v-else-if="Type === 'area-box'"></v-textarea>
    <v-textarea v-else-if="Type === 'area-outline'"></v-textarea>

  </div>
</template>

<script>

  export default {
    name: 'Input',
    props: {

      Type: {
        type: String,
        default: "regular"
      },
      Placeholder:{
        type: String,
        default: "Default Placeholder"
      },
      Label:{
        type: String,
        default: "Default Label"
      },
      ReadOnly:{
        type: Boolean
      },
      Disable:{
        type: Boolean
      },
      Color:{ // Cursor Color
        type: String,
        default: "primary"
      },
      Background:{ // Background color of text field
        type: String,
        default: undefined
      },
      IconPrepend:{
        type: String,
        default: undefined
      },
      IconPrependIn:{
        type: String,
        default: undefined
      },
      IconAppend:{
        type: String,
        default: undefined
      },
      IconAppendOut:{
        type: String,
        default: undefined
      },
      Hint:{
        type: String,
        default: undefined
      },
      HintFocus:{
        type: Boolean
      },
      Counter:{
        type: [ Boolean, Number, String],
        default: undefined
      },
      MaxNumbers:{
        type: [String, Number],
        default: undefined
      }
    },
    data() {
      return {
        placeholder: this.Placeholder,
        label: this.Label,
        readonly: this.ReadOnly,
        disabled: this.Disable,
        color: this.Color,
        background: this.Background,
        icon_prepend: this.IconPrepend,
        icon_prepend_in: this.IconPrependIn,
        icon_append: this.IconAppend,
        icon_append_out: this.IconAppendOut,
        hint: this.Hint,
        hint_focus: this.HintFocus,
        counter: this.Counter,
        maxlength: this.MaxNumbers,
        title: ''
      }
    },

    methods:{
      submit(){
        alert(this.title)
      }
    }
  }
</script>