Minimalistic Vue Inputs with Spectre.css classes

LongTextInput.vue

<template>
  <div class="form-group mb-4">
    <label class="text-bold">{{label}}</label>
    <textarea @keyup="emitValue" v-model="text" class="form-input" :id="id" :placeholder="placeholder" :name="name" rows="2" />
    <small style="float: right;" v-if="wordcount && textValue.words > 1">Count: {{textValue.words}} words</small>
  </div>
</template>

<script>
/*
 * Input: 
 * => id: ID to be placed on the input element
 * => placeholder: For the Text input element
 * => label: Text that is used as a label for the Text input area
 * => inputName: Text that's used for the input element's name
 * => wordcount: Whether or whether not wordcount shall be shown below the text area
 * 
 * Output: 
 * => textValue: Object with these props: 
 * | -> text: Text - content of the text area
 * | -> len: Number of characters used in the text area
 * | -> words: Number of words used in the text area
 * 
 * Events: 
 * => @changeLongText: Fires when the Text - input changes
 */

export default {
  props: {
    id: String,
    placeholder: String,
    label: String,
    inputName: String, 
    wordcount: Boolean
  },

  data() {
    return {
      text: ""
    };
  },

  computed: {
    textValue() {
      return {
        text: this.text,
        len: this.text.length, 
        words: this.text.split(" ").length
      };
    }
  },

  methods: {
    emitValue() {
      this.$emit("changeLongText", this.textValue);
    }
  }
};
</script>

PercentageSelection.vue

<template>
  <div class="form-group">
    <label class="text-bold">{{label}}</label>
    <div class="input-group">
      <select v-model="select" @change="emitSelectionValue" class="form-sqelect">
        <option disabled>Choose one ...</option>
        <option v-for="item in items" :key="item" :value="item.value">{{item.text}}</option>
      </select>
      <select v-model="percent" @change="emitSelectionValue" class="form-sqelect">
        <option disabled>I am this sure ...</option>
        <option v-for="item in percentPool" :key="item" :value="item">{{item}}</option>
      </select>
      <span class="input-group-addon">% Percent</span>
    </div>
  </div>
</template>

<script>
/*
 * Input: 
 * => id: ID to be placed on the input element
 * => placeholder: For the Text input element
 * => label: Text that is used as a label for the Text input area
 * => items: Array of objects with the following structure: 
 * | -> item.text: Text that is shown in the selection field
 * | -> item.value: Value for the corresponding option
 * 
 * Output: 
 * => selectionValue: Number that uses an expection - value calculated from the seleciton's value & the percentage
 * 
 * Events: 
 * => @changeSelection: Fires when the Text - input or the percentage changes
 */

export default {
  props: {
    id: String,
    placeholder: String,
    label: String,
    items: Array,
  },

  data() {
    return {
      min: 25, 
      max: 100, 
      select: "",
      percent: 25,
      percentPool: [25, 50, 75, 100]
    };
  },

  computed: {
    selectionValue() {
      return Math.ceil(this.select * 100/this.percent);
    }
  },

  methods: {
    emitSelectionValue() {
      this.$emit("changeSelection", this.selectionValue);
    }
  }
};
</script>

<style>
</style>

Radio.vue

<template>
  <!-- form radio control -->
  <div class="form-group">
    <label class="text-bold">{{label}}</label>
    <div v-for="item in items" :key="item">
      <label class="form-radio">
        <input @change="emitRadioValue" v-model="radioValue" :name="inputName" type="radio" :value="item.value" />
        <i class="form-icon"></i>
        {{item.text}}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    label: String,
    items: Array, 
    inputName: String
  }, 

  data() {
      return {
          radioValue: 1, 
      }
  }, 

  methods: {
      emitRadioValue() {
          this.$emit("changeRadio", this.radioValue); 
      }
  }
};
</script>

Selection.vue

<template>
  <div class="form-group">
    <label class="text-bold">{{label}}</label>
    <select v-model="selectValue" @change="emitSelectionValue" class="form-select">
      <option disabled>Choose one ...</option>
      <option v-for="item in items" :key="item" :value="item.value">{{item.text}}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    label: String,
    items: Array
  }, 

  data() {
    return {
      selectValue: ""
    }
  }, 

  methods: {
    emitSelectionValue() {
      this.$emit("changeSelection", this.selectValue); 
    }
  }
};
</script>

Switcher.vue

<template>
  <div class="form-group">
    <label class="form-switch">
      <input v-model="switcherValue" @change="emitValue()" type="checkbox" />
      <i class="form-icon"></i>
      {{label}} | {{switcherText}}
    </label>
  </div>
</template>


<script>
/*
 * Input:
 * => label: Text is used as a label for the switcher
 * Output:
 * => switcherValue: Boolean
 */

export default {
  props: {
    label: String
  },

  data() {
    return {
      switcherValue: false
    };
  },

  methods: {
    emitValue() {
      this.$emit("changeSwitcher", this.switcherValue);
    }
  },

  computed: {
    switcherText() {
      return this.switcherValue === true ? "Yes" : "No";
    }
  }
};
</script>