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>