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

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

@@ -1,66 +1,70 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import TooltippedLabel from "@/components/common/cv-tooltipped-label.vue";
+
+interface SelectItem {
+  name: string | number,
+  value: string | number,
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  label?: string,
+  tooltip?: string,
+  selectCols?: number,
+  // TODO fully update v-model usage in custom components on Vue3 update
+  value: number,
+  disabled?: boolean,
+  items: string[] | number[] | SelectItem[]
+}>(), {
+  selectCols: 9,
+  disabled: false
+});
+
+const emit = defineEmits<{
+  (e: "input", value: number): void
+}>();
+
+const localValue = computed({
+  get: () => props.value,
+  set: v => emit("input", v)
+});
+
+// Computed in case items changes
+const items = computed<SelectItem[]>(() => {
+  // Check if the prop exists on the object to infer object type
+  if((props.items[0] as SelectItem).name) {
+    return props.items as SelectItem[];
+  }
+  return props.items.map((v, i) => ({ name: v, value: i }));
+});
+</script>
+
 <template>
   <div>
     <v-row
       dense
       align="center"
     >
-      <v-col :cols="12 - (selectCols || 9)">
+      <v-col :cols="12 - selectCols">
         <tooltipped-label
           :tooltip="tooltip"
-          :text="name"
+          :label="label"
         />
       </v-col>
-      <v-col :cols="selectCols || 9">
+      <v-col :cols="selectCols">
         <v-select
           v-model="localValue"
-          :items="indexList"
+          :items="items"
           item-text="name"
-          item-value="index"
+          item-value="value"
+          item-disabled="disabled"
           dark
           color="accent"
           item-color="secondary"
           :disabled="disabled"
-          :rules="rules"
-          @change="$emit('rollback', localValue)"
         />
       </v-col>
     </v-row>
   </div>
 </template>
-
-<script>
-import TooltippedLabel from "./cv-tooltipped-label";
-
-    export default {
-        name: 'Select',
-        components: {
-            TooltippedLabel,
-        },
-      // eslint-disable-next-line vue/require-prop-types
-        props: ['list', 'name', 'value', 'disabled', 'filteredIndices', 'selectCols', 'rules', 'tooltip'],
-        computed: {
-            localValue: {
-                get() {
-                    return this.value;
-                },
-                set(value) {
-                    this.$emit('input', value)
-                }
-            },
-            indexList() {
-                let list = [];
-                for (let i = 0; i < this.list.length; i++) {
-                    if (this.filteredIndices instanceof Set && this.filteredIndices.has(i)) continue;
-                    list.push({
-                        name: this.list[i],
-                        index: i
-                    });
-                }
-                return list;
-            }
-        }
-    }
-</script>
-
-<style>
-</style>