chore(ui): use useTemplateRef instead of plain ref - WF-163

writer · Dec 27, 2024 · 89a0d70 · 89a0d70
1 parent e6a4cfe
commit 89a0d70
Show file tree

Hide file tree

Showing 29 changed files with 130 additions and 85 deletions.
diff --git a/src/ui/src/builder/BuilderInstanceTracker.vue b/src/ui/src/builder/BuilderInstanceTracker.vue
@@ -4,7 +4,15 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { nextTick, onMounted, onUnmounted, Ref, ref, toRefs } from "vue";
+import {
+	nextTick,
+	onMounted,
+	onUnmounted,
+	Ref,
+	ref,
+	toRefs,
+	useTemplateRef,
+} from "vue";
 
 const REFRESH_INTERVAL_MS = 200;
 
@@ -33,7 +41,7 @@ type RootStyle = {
 
 const rootStyle: Ref<RootStyle> = ref(null);
 const timerId = ref(0);
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const MIN_TOP_PX = 36;
 
 const trackElement = (el: HTMLElement) => {

diff --git a/src/ui/src/builder/settings/BuilderFieldsAlign.vue b/src/ui/src/builder/settings/BuilderFieldsAlign.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -41,6 +42,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -57,9 +59,9 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
 
 enum SubMode {
 	hleft = "start",
@@ -129,7 +131,7 @@ const verticalSubmodes: SubModes = [
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,

diff --git a/src/ui/src/builder/settings/BuilderFieldsColor.vue b/src/ui/src/builder/settings/BuilderFieldsColor.vue
@@ -40,6 +40,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -55,11 +56,11 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,

diff --git a/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue b/src/ui/src/builder/settings/BuilderFieldsKeyValue.vue
@@ -69,6 +69,7 @@ import {
 	onMounted,
 	ref,
 	toRefs,
+	useTemplateRef,
 	watch,
 } from "vue";
 import injectionKeys from "../../injectionKeys";
@@ -92,8 +93,8 @@ const props = defineProps({
 const { componentId, fieldKey } = toRefs(props);
 const component = computed(() => wf.getComponentById(componentId.value));
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const assistedKeyEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const assistedKeyEl = useTemplateRef("assistedKeyEl");
 type Mode = "assisted" | "freehand";
 const mode: Ref<Mode> = ref(null);
 const assistedEntries: Ref<Record<string, string | number | null>> = ref({});

diff --git a/src/ui/src/builder/settings/BuilderFieldsPadding.vue b/src/ui/src/builder/settings/BuilderFieldsPadding.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -102,7 +103,6 @@
 
 <script setup lang="ts">
 import {
-	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -111,6 +111,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -128,10 +129,10 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const fixedEl = useTemplateRef("fixedEl");
 
 enum SubMode {
 	all_sides = "all_sides",
@@ -177,7 +178,7 @@ const subModes: Array<{
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,

diff --git a/src/ui/src/builder/settings/BuilderFieldsShadow.vue b/src/ui/src/builder/settings/BuilderFieldsShadow.vue
@@ -109,6 +109,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -124,15 +125,15 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
-const paramOffsetXEl: Ref<HTMLInputElement> = ref(null);
-const paramOffsetYEl: Ref<HTMLInputElement> = ref(null);
-const paramBlurRadiusEl: Ref<HTMLInputElement> = ref(null);
-const paramSpreadRadiusEl: Ref<HTMLInputElement> = ref(null);
-const paramColorEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const paramOffsetXEl = useTemplateRef("paramOffsetXEl");
+const paramOffsetYEl = useTemplateRef("paramOffsetYEl");
+const paramBlurRadiusEl = useTemplateRef("paramBlurRadiusEl");
+const paramSpreadRadiusEl = useTemplateRef("paramSpreadRadiusEl");
+const paramColorEl = useTemplateRef("paramColorEl");
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: paramOffsetXEl,
 	css: freehandInputEl,
 	default: null,

diff --git a/src/ui/src/builder/settings/BuilderFieldsWidth.vue b/src/ui/src/builder/settings/BuilderFieldsWidth.vue
@@ -14,6 +14,7 @@
 		<div v-if="mode == 'pick' || mode == 'css'" class="main">
 			<div v-if="mode == 'pick'" class="pickerContainer">
 				<BuilderSelect
+					ref="pickerEl"
 					:model-value="subMode"
 					:options="selectOptions"
 					@update:model-value="handleInputSelect"
@@ -41,7 +42,6 @@
 
 <script setup lang="ts">
 import {
-	ComponentInstance,
 	computed,
 	inject,
 	nextTick,
@@ -50,6 +50,7 @@ import {
 	Ref,
 	ref,
 	toRefs,
+	useTemplateRef,
 } from "vue";
 import { Component } from "@/writerTypes";
 import { useComponentActions } from "../useComponentActions";
@@ -67,10 +68,10 @@ const wf = inject(injectionKeys.core);
 const ssbm = inject(injectionKeys.builderManager);
 const { setContentValue } = useComponentActions(wf, ssbm);
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const pickerEl: Ref<HTMLInputElement> = ref(null);
-const fixedEl = ref<ComponentInstance<typeof WdsTextInput>>(null);
-const freehandInputEl: Ref<HTMLInputElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const pickerEl = useTemplateRef("pickerEl");
+const freehandInputEl = useTemplateRef("freehandInputEl");
+const fixedEl = useTemplateRef("fixedEl");
 
 enum SubMode {
 	fixed = "fixed",
@@ -105,7 +106,7 @@ const subModes: Array<{
 	},
 ];
 
-const focusEls: Record<Mode, Ref<HTMLInputElement>> = {
+const focusEls = {
 	pick: pickerEl,
 	css: freehandInputEl,
 	default: null,

diff --git a/src/ui/src/components/core/base/BaseSelect.vue b/src/ui/src/components/core/base/BaseSelect.vue
@@ -93,7 +93,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, PropType, Ref, ref, toRefs, watch } from "vue";
+import {
+	computed,
+	nextTick,
+	PropType,
+	Ref,
+	ref,
+	toRefs,
+	useTemplateRef,
+	watch,
+} from "vue";
 
 const emit = defineEmits(["change"]);
 
@@ -121,10 +130,10 @@ const activeValue = computed<string[]>(() =>
 );
 
 const LIST_MAX_HEIGHT_PX = 200;
-const rootEl: Ref<HTMLElement | null> = ref(null);
-const inputEl: Ref<HTMLElement | null> = ref(null);
-const selectedOptionsEl: Ref<HTMLElement | null> = ref(null);
-const listEl: Ref<HTMLElement | null> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const inputEl = useTemplateRef("inputEl");
+const selectedOptionsEl = useTemplateRef("selectedOptionsEl");
+const listEl = useTemplateRef("listEl");
 const activeText: Ref<string> = ref("");
 const highlightedOffset: Ref<number | null> = ref(null);
 const selectedOptions: Ref<string[]> = ref([]);

diff --git a/src/ui/src/components/core/content/CoreAvatar.vue b/src/ui/src/components/core/content/CoreAvatar.vue
@@ -97,10 +97,10 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { CSSProperties, Ref, computed, inject, ref } from "vue";
+import { CSSProperties, computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);

diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -303,15 +303,16 @@ import {
 	ref,
 	computed,
 	ComputedRef,
+	useTemplateRef,
 } from "vue";
 import injectionKeys from "@/injectionKeys";
 import CoreChatbotSentMessageIcon from "./CoreChatBot/CoreChatbotSentMessageIcon.vue";
 import CoreChatbotMessage from "./CoreChatBot/CoreChatbotMessage.vue";
 import type { Message } from "./CoreChatBot/CoreChatbotMessage.vue";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const messageAreaEl: Ref<HTMLElement> = ref(null);
-const messagesEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const messageAreaEl = useTemplateRef("messageAreaEl");
+const messagesEl = useTemplateRef("messagesEl");
 const messageIndexLoading: Ref<number | undefined> = ref(undefined);
 const fields = inject(injectionKeys.evaluatedFields);
 const files: Ref<File[]> = shallowRef([]);

diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -109,7 +109,7 @@
 </template>
 
 <script lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { Ref, computed, inject, ref, useTemplateRef } from "vue";
 import { FieldCategory, FieldType } from "@/writerTypes";
 import {
 	cssClasses,
@@ -245,9 +245,9 @@ type OrderSetting = {
 };
 
 const fields = inject(injectionKeys.evaluatedFields);
-const rootEl: Ref<HTMLElement> = ref();
-const toolsEl: Ref<HTMLElement> = ref();
-const gridContainerEl: Ref<HTMLElement> = ref();
+const rootEl = useTemplateRef("rootEl");
+const toolsEl = useTemplateRef("toolsEl");
+const gridContainerEl = useTemplateRef("gridContainerEl");
 let baseTable: aq.internal.ColumnTable = null;
 const table: Ref<aq.internal.ColumnTable> = ref(null);
 const tableIndex = ref([]);

diff --git a/src/ui/src/components/core/content/CoreImage.vue b/src/ui/src/components/core/content/CoreImage.vue
@@ -89,10 +89,10 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const wf = inject(injectionKeys.core);
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);

diff --git a/src/ui/src/components/core/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -56,11 +56,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, inject, onMounted, Ref, ref, watch } from "vue";
+import { computed, inject, onMounted, useTemplateRef, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const chartTargetEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const chartTargetEl = useTemplateRef("chartTargetEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const spec = computed(() => fields.spec.value);
 

diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
@@ -85,7 +85,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import chroma from "chroma-js";
 
@@ -101,7 +101,7 @@ const COLOR_STEPS = [
 	{ h: 69, s: 0, l: 25 },
 	{ h: 70, s: 0, l: 29 },
 ];
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);

diff --git a/src/ui/src/components/core/content/CoreText.vue b/src/ui/src/components/core/content/CoreText.vue
@@ -84,12 +84,12 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import { Ref, computed, inject, ref } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 import injectionKeys from "@/injectionKeys";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
 
-const rootEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
 const fields = inject(injectionKeys.evaluatedFields);
 const componentId = inject(injectionKeys.componentId);
 const wf = inject(injectionKeys.core);

diff --git a/src/ui/src/components/core/content/CoreVegaLiteChart.vue b/src/ui/src/components/core/content/CoreVegaLiteChart.vue
@@ -57,11 +57,11 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject, onMounted, Ref, ref, watch } from "vue";
+import { inject, onMounted, useTemplateRef, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
 
-const rootEl: Ref<HTMLElement> = ref(null);
-const chartTargetEl: Ref<HTMLElement> = ref(null);
+const rootEl = useTemplateRef("rootEl");
+const chartTargetEl = useTemplateRef("chartTargetEl");
 const fields = inject(injectionKeys.evaluatedFields);
 
 const renderChart = async () => {