refactor: prefer 'useTemplateRef' over generic 'ref' (#403)

Thomasan1999 · Sep 14, 2024 · 45d8e4c · 45d8e4c
1 parent 2d5cdaf
commit 45d8e4c
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 12 deletions.
diff --git a/client/src/components/main/Main.vue b/client/src/components/main/Main.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
     import Navbar from '@/components/main/navbar/Navbar.vue';
     import mainSections from '@/components/main/mainSections';
-    import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
     import router from '@/router';
     import AboutMyself from '@/components/main/about-myself/AboutMyself.vue';
     import Projects from '@/components/main/projects/Projects.vue';
@@ -49,7 +49,7 @@
 
     const navigatingTo = ref<string | undefined>();
 
-    const root = ref<HTMLDivElement | null>(null);
+    const root = useTemplateRef('root');
 
     const sectionElements = ref<Record<string, HTMLDivElement>>({});
 

diff --git a/client/src/components/main/MainSection.vue b/client/src/components/main/MainSection.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
-    import { computed, ref } from 'vue';
+    import { computed } from 'vue';
     import mainSections from '@/components/main/mainSections';
     import { MainSectionProps } from '@/components/main/types';
 
     const props = withDefaults(defineProps<MainSectionProps>(), { heading: false });
 
-    const root = ref<HTMLDivElement | null>(null);
-
     const activeSection = computed(() => mainSections[props.name]);
 
     const id = computed(() => activeSection.value.id);
@@ -18,7 +16,6 @@
     <section
         class="main-section"
         :id="id"
-        ref="root"
     >
         <div class="text-content">
             <h2

diff --git a/client/src/components/main/contact/form/ContactForm.vue b/client/src/components/main/contact/form/ContactForm.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-    import { computed, ref } from 'vue';
+    import { computed, useTemplateRef } from 'vue';
     import useStore from '@/store';
     import ContactFormField from '@/components/main/contact/form/ContactFormField.vue';
     import contactFormFields from '@/components/main/contact/form/contactFormFields';
@@ -53,7 +53,7 @@
 
     const fields = contactFormFields;
 
-    const root = ref<HTMLFormElement>();
+    const root = useTemplateRef('root');
 
     const submitDisabled = computed(() => touched.value && !valid.value);
 

diff --git a/client/src/components/main/navbar/Navbar.vue b/client/src/components/main/navbar/Navbar.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
     import NavbarLink from '@/components/main/navbar/NavbarLink.vue';
-    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
     import useStore from '@/store';
     import NavbarSocialNetwork from '@/components/main/navbar/NavbarSocialNetwork.vue';
     import NavbarIcon from '@/components/main/navbar/NavbarIcon.vue';
@@ -31,7 +31,7 @@
 
     const opened = ref(false);
 
-    const root = ref<HTMLDivElement | null>(null);
+    const root = useTemplateRef('root');
 
     const socialNetworks: NavbarSocialNetworkProps[] = [
         {

diff --git a/client/src/components/main/projects/Project.vue b/client/src/components/main/projects/Project.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-    import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
     import useStore from '@/store';
     import { kebabCase } from 'lodash';
     import ExternalLink from '@/components/ExternalLink.vue';
@@ -19,7 +19,7 @@
 
     const textHoverHeight = ref(0);
 
-    const textContent = ref<HTMLDivElement | null>(null);
+    const textContent = useTemplateRef('textContent');
 
     const backgroundImage = computed(() => `url(/images/${kebabCase(props.name)}.${store.imageFormat})`);