[PhotonClient] Vite and Typescript complete refactor (#884)

photon-client/src/components/common/cv-switch.vue

@@ -1,51 +1,50 @@
+<script setup lang="ts">
+import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+import { computed } from "vue";
+
+const props = withDefaults(defineProps<{
+  label?: string,
+  tooltip?: string,
+  // TODO fully update v-model usage in custom components on Vue3 update
+  value: boolean,
+  disabled?: boolean,
+  labelCols?: number,
+  switchCols?: number
+}>(), {
+  disabled: false,
+  labelCols: 2
+});
+
+const emit = defineEmits<{
+  (e: "input", value: boolean): void
+}>();
+
+const localValue = computed({
+  get: () => props.value,
+  set: v => emit("input", v)
+});
+</script>
+
 <template>
   <div>
     <v-row
       dense
       align="center"
     >
-      <v-col :cols="textCols || 2">
+      <v-col :cols="(12 - switchCols) || labelCols">
         <tooltipped-label
           :tooltip="tooltip"
-          :text="name"
+          :label="label"
         />
       </v-col>
-      <v-col :cols="12 - (textCols || 2)">
+      <v-col :cols="switchCols || (12 - labelCols)">
         <v-switch
           v-model="localValue"
           dark
           :disabled="disabled"
           color="#ffd843"
-          @change="$emit('rollback', localValue)"
         />
       </v-col>
     </v-row>
   </div>
 </template>
-
-<script>
-import TooltippedLabel from "./cv-tooltipped-label";
-
-export default {
-    name: 'CVSwitch',
-    components: {
-        TooltippedLabel,
-    },
-  // eslint-disable-next-line vue/require-prop-types
-    props: ['name', 'value', 'disabled', 'textCols', 'tooltip'],
-    computed: {
-        localValue: {
-            get() {
-                return this.value;
-            },
-            set(value) {
-                this.$emit('input', value)
-            }
-        }
-    }
-}
-</script>
-
-<style lang="" scoped>
-
-</style>