github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/TriState.vue (about)

     1  <template>
     2    <v-chip @click="onClick" :color="color" small>
     3      <b>{{ labels[innerState] }}</b>
     4    </v-chip>
     5  </template>
     6  
     7  <script lang="ts">
     8  import Vue from "vue";
     9  import Component from "vue-class-component";
    10  
    11  const TriStateProps = Vue.extend({
    12    props: {
    13      values: Array as () => number[],
    14      labels: Array as () => string[],
    15      value: Number,
    16      color: String
    17    },
    18    model: {
    19      prop: "value",
    20      event: "change"
    21    }
    22  });
    23  
    24  @Component({})
    25  export default class TriState extends TriStateProps {
    26    get innerState() {
    27      return this.values.indexOf(this.value);
    28    }
    29  
    30    onClick() {
    31      const newInnerState = (this.innerState + 1) % 3;
    32      this.$emit("change", this.values[newInnerState]);
    33    }
    34  }
    35  </script>
    36  
    37  <style>
    38  .v-chip__content {
    39    min-width: 10px;
    40  }
    41  </style>