Gadgety_Euclidean_Sequencer_Web_Interface/components/beat.vue

<template>
  <div class="beat-wrapper">
      <input v-model="divisioni" type="number" min="1" oninput="validity.valid||(value='');">
      <!--- trovare modo per prevenire scrittura di input-->
      <div class="division-wrapper">
        <div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j"  >
          <div class="suddivisione-content" :style="{'background-color': colore }"></div>
        </div>
    </div>
  </div>
</template>
<script>
    export default {
      props: [ 'id', 'line' ],
      data() {
        return {
          nome:'',
          colore: 'red',
          divisioni: 1,
          timing: 0
        }
      },
      computed: {
        nDivisioni() {
          var n = parseInt(this.divisioni);
          return isNaN(n) ? 0 : n;
        }
      },
      methods: {
        titolo(progressivo){
          this.nome = "nomeBeat" + progressivo;
        }
    }
    }
</script>

<style>
  .suddivisione-wrapper{
    flex: 1 1 auto;
    width: 100%;
    height:1em;
    display:flex;
}

.active{
  background-color:black;
}

input {
  background:transparent;
  width:2em;
}

.division-wrapper {
  flex:1 1 auto;
  display: flex;
}

.suddivisione-content{
  flex:1 1 auto;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
    padding-left:0.2em;
    color:lightgray;
    border:none;
}
</style>