Revert "chore(ui): bump Vue.js to 3.5 - WF-163"

This reverts commit 07de178.

src/ui/package.json

@@ -37,7 +37,7 @@
 		"vega": "^5.22.1",
 		"vega-embed": "^6.22.1",
 		"vega-lite": "^5.7.1",
-		"vue": "^3.5.0",
+		"vue": "^3.4.0",
 		"vue-dompurify-html": "^5.0.1"
 	},
 	"devDependencies": {

src/ui/src/builder/BuilderEmbeddedCodeEditor.vue

@@ -7,10 +7,10 @@
 <script setup lang="ts">
 import * as monaco from "monaco-editor";
 import "./builderEditorWorker";
-import { onMounted, onUnmounted, toRefs, useTemplateRef, watch } from "vue";
+import { onMounted, onUnmounted, ref, toRefs, watch } from "vue";
 
-const rootEl = useTemplateRef("rootEl");
-const editorContainerEl = useTemplateRef("editorContainerEl");
+const rootEl = ref<HTMLElement>(null);
+const editorContainerEl = ref<HTMLElement>(null);
 const resizeObserver = new ResizeObserver(updateDimensions);
 let editor: monaco.editor.IStandaloneCodeEditor = null;
 

src/ui/src/builder/BuilderSelect.vue

@@ -37,7 +37,6 @@ import {
 	nextTick,
 	PropType,
 	ref,
-	useTemplateRef,
 	watch,
 } from "vue";
 import { useFloating, autoPlacement } from "@floating-ui/vue";
@@ -58,8 +57,8 @@ const props = defineProps({
 
 const currentValue = defineModel({ type: String, required: false });
 const isOpen = ref(false);
-const trigger = useTemplateRef("trigger");
-const dropdown = useTemplateRef("dropdown");
+const trigger = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
 
 const { floatingStyles, update: updateFloatingStyle } = useFloating(
 	trigger,

src/ui/src/builder/sidebar/BuilderSidebarComponentTreeBranch.vue

@@ -62,7 +62,7 @@
 <script setup lang="ts">
 import injectionKeys from "@/injectionKeys";
 import { Component } from "@/writerTypes";
-import { computed, inject, nextTick, ref, useTemplateRef, watch } from "vue";
+import { computed, inject, nextTick, ref, watch } from "vue";
 import BuilderSidebarComponentTreeBranch from "./BuilderSidebarComponentTreeBranch.vue";
 import { useEvaluator } from "@/renderer/useEvaluator";
 import { useDragDropComponent } from "../useDragDropComponent";
@@ -82,7 +82,7 @@ const {
 const { getComponentInfoFromDrag, removeInsertionCandidacy, isParentSuitable } =
 	useDragDropComponent(wf);
 const { isComponentVisible } = useEvaluator(wf);
-const rootEl = useTemplateRef("rootEl");
+const rootEl = ref<HTMLElement>(null);
 const emit = defineEmits(["expandBranch"]);
 
 const matched = computed(() => {

src/ui/src/components/core/base/BaseDropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, PropType, ref, useId } from "vue";
+import { onMounted, onUnmounted, PropType, ref } from "vue";
 
 defineProps({
 	options: {
@@ -12,6 +12,13 @@ const emits = defineEmits({
 	selected: (key: string) => typeof key === "string",
 });
 
+/**
+ * @deprecated use `useId` from Vue 3.5 when we upgrade
+ */
+function useId() {
+	return Math.random().toString();
+}
+
 const trigger = ref<Element>();
 
 const popoverId = useId();

src/ui/src/components/core/base/BaseInputColor.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, inject, useTemplateRef } from "vue";
+import { PropType, computed, inject, ref } from "vue";
 import injectionKeys from "@/injectionKeys";
 
 const props = defineProps({
@@ -27,7 +27,7 @@ const emit = defineEmits({
 	change: (value: string) => typeof value === "string",
 });
 
-const pickerEl = useTemplateRef("pickerEl");
+const pickerEl = ref<HTMLInputElement | undefined>();
 
 const flattenedInstancePath = inject(injectionKeys.flattenedInstancePath);