1  <script setup lang="ts">
 2  import { ref, watch } from 'vue'
 3  
 4  const props = defineProps<{
 5    toggleLabel: string
 6    modelValue: boolean
 7    inputValue: boolean
 8  }>()
 9  
10  const emit = defineEmits(['update:modelValue'])
11  const toggleValue = ref(props.modelValue)
12  
13  watch(toggleValue, (newValue) => {
14    emit('update:modelValue', newValue)
15  })
16  </script>
17  
18  <template>
19    <div class="toggle">
20      <v-checkbox :model-value="modelValue" :input-value="inputValue"
21        @update:model-value="(value) => emit('update:modelValue', value)" color="red" hide-details direction="vertical"
22        density="compact">
23      </v-checkbox>
24      <div class="toggle-label">{{ props.toggleLabel }}</div>
25    </div>
26  
27  </template>
28  
29  <style>
30  .toggle {
31    margin: 0;
32    padding: 0;
33    display: flex;
34    flex-direction: column;
35    align-items: center;
36    justify-content: center;
37    padding-top: 4px;
38  }
39  
40  .toggle-label {
41    margin: 0;
42    padding: 0;
43  }
44  
45  .v-checkbox .v-selection-control {
46    min-height: 32px !important;
47  }
48  </style>