Vue 3 Upgrade (#1900)

## Description

Upgrades to Vue 3 and necessary associated dependencies. Also fixes some
issues with the layout and adds validation for object detection models.

Closes #885, closes #1943, closes #1449.
## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2024.3.1
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Matt M <matthew.morley.ca@gmail.com>
Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>
Co-authored-by: samfreund <techguy763@gmail.com>

photon-client/src/components/dashboard/tabs/OutputTab.vue

@@ -3,9 +3,10 @@ import PvSelect from "@/components/common/pv-select.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { type ActivePipelineSettings, PipelineType, RobotOffsetPointMode } from "@/types/PipelineTypes";
 import PvSwitch from "@/components/common/pv-switch.vue";
-import { computed, getCurrentInstance } from "vue";
+import { computed } from "vue";
 import { RobotOffsetType } from "@/types/SettingTypes";
 import { useStateStore } from "@/stores/StateStore";
+import { useDisplay } from "vuetify";
 
 const isTagPipeline = computed(
   () =>
@@ -45,12 +46,10 @@ const offsetPoints = computed<MetricItem[]>(() => {
 const currentPipelineSettings = computed<ActivePipelineSettings>(
   () => useCameraSettingsStore().currentPipelineSettings
 );
+const { mdAndDown } = useDisplay();
 
 const interactiveCols = computed(() =>
-  (getCurrentInstance()?.proxy.$vuetify.breakpoint.mdAndDown || false) &&
-  (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode)
-    ? 8
-    : 7
+  mdAndDown.value && (!useStateStore().sidebarFolded || useCameraSettingsStore().isDriverMode) ? 8 : 7
 );
 </script>
 
@@ -62,7 +61,7 @@ const interactiveCols = computed(() =>
       tooltip="If enabled, up to five targets will be displayed and sent via PhotonLib, instead of just one"
       :disabled="isTagPipeline"
       :switch-cols="interactiveCols"
-      @input="
+      @update:modelValue="
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ outputShowMultipleTargets: value }, false)
       "
     />
@@ -78,7 +77,9 @@ const interactiveCols = computed(() =>
       tooltip="If enabled, all visible fiducial targets will be used to provide a single pose estimate from their combined model."
       :switch-cols="interactiveCols"
       :disabled="!isTagPipeline"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doMultiTarget: value }, false)"
+      @update:modelValue="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doMultiTarget: value }, false)
+      "
     />
     <pv-switch
       v-if="
@@ -92,7 +93,9 @@ const interactiveCols = computed(() =>
       tooltip="If disabled, visible fiducial targets used for multi-target estimation will not also be used for single-target estimation."
       :switch-cols="interactiveCols"
       :disabled="!isTagPipeline || !currentPipelineSettings.doMultiTarget"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doSingleTargetAlways: value }, false)"
+      @update:modelValue="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doSingleTargetAlways: value }, false)
+      "
     />
     <pv-select
       v-model="useCameraSettingsStore().currentPipelineSettings.contourTargetOffsetPointEdge"
@@ -100,7 +103,7 @@ const interactiveCols = computed(() =>
       tooltip="Changes where the 'center' of the target is (used for calculating e.g. pitch and yaw)"
       :items="['Center', 'Top', 'Bottom', 'Left', 'Right']"
       :select-cols="interactiveCols"
-      @input="
+      @update:modelValue="
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOffsetPointEdge: value }, false)
       "
     />
@@ -111,7 +114,7 @@ const interactiveCols = computed(() =>
       tooltip="Used to determine how to calculate target landmarks (e.g. the top, left, or bottom of the target)"
       :items="['Portrait', 'Landscape']"
       :select-cols="interactiveCols"
-      @input="
+      @update:modelValue="
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ contourTargetOrientation: value }, false)
       "
     />
@@ -121,7 +124,9 @@ const interactiveCols = computed(() =>
       tooltip="Used to add an arbitrary offset to the location of the targeting crosshair"
       :items="['None', 'Single Point', 'Dual Point']"
       :select-cols="interactiveCols"
-      @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)"
+      @update:modelValue="
+        (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ offsetRobotOffsetMode: value }, false)
+      "
     />
     <table
       v-if="useCameraSettingsStore().currentPipelineSettings.offsetRobotOffsetMode !== RobotOffsetPointMode.None"
@@ -148,10 +153,10 @@ const interactiveCols = computed(() =>
       >
         <v-col cols="6" class="pl-0">
           <v-btn
-            small
+            size="small"
             block
             color="accent"
-            class="black--text"
+            class="text-black"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
           >
             Take Point
@@ -159,9 +164,9 @@ const interactiveCols = computed(() =>
         </v-col>
         <v-col cols="6" class="pr-0">
           <v-btn
-            small
+            size="small"
             block
-            color="yellow darken-3"
+            color="yellow-darken-3"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points
@@ -174,10 +179,10 @@ const interactiveCols = computed(() =>
       >
         <v-col cols="6" lg="4" class="pl-0 pr-2">
           <v-btn
-            small
+            size="small"
             block
             color="accent"
-            class="black--text"
+            class="text-black"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
           >
             Take First Point
@@ -185,10 +190,10 @@ const interactiveCols = computed(() =>
         </v-col>
         <v-col cols="6" lg="4" class="pl-2 pr-0 pr-lg-2">
           <v-btn
-            small
+            size="small"
             block
             color="accent"
-            class="black--text"
+            class="text-black"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
           >
             Take Second Point
@@ -196,9 +201,9 @@ const interactiveCols = computed(() =>
         </v-col>
         <v-col cols="12" lg="4" class="pl-0 pl-lg-2 pr-0">
           <v-btn
-            small
+            size="small"
             block
-            color="yellow darken-3"
+            color="yellow-darken-3"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points