<template>
  <div class="container">
    <div class="row" style="font-size: .875rem;">
      <button v-on:click="$emit('leftButton')" class="input-button-left">-</button>
      <input type="text" v-model="inputFieldValue" size="3" class="input-style" />
      <button v-on:click="$emit('rightButton')" class="input-button-right">+</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "InputButton",
  props: ["value"],
  computed: {
    inputFieldValue: {
      get() {
        //this function will determine what is displayed in the input
        return this.value;
      },
      set(newVal) {
        //this function will run whenever the input changes
        this.$emit("onInput", newVal);
      }
    }
  }
};
</script>

<style>
.input-style {
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  height: 30px;
}

.input-button-left {
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  border-radius: 0.25rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 30px;
}
.input-button-right {
  height: 30px;
  border: none;
  background-color: #6c757d;
  color: white;
  text-align: center;
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>