refactor(vue): use template ref different from useTemplateRef constant

Author: VChet

src/components/icon-loader.vue

@@ -1,5 +1,5 @@
 <template>
-  <icon-refresh ref="refreshIcon" />
+  <icon-refresh ref="refreshIconElement" />
 </template>
 <script setup lang="ts">
 import { useTemplateRef, watch } from "vue";
@@ -10,7 +10,7 @@ const props = defineProps<{ modelValue: boolean }>();
 const emit = defineEmits<{ "update:modelValue": [value: boolean] }>();
 const active = useVModel(props, "modelValue", emit);
 
-const refreshIcon = useTemplateRef<SVGElement>("refreshIcon");
-const { play, finish } = useAnimate(refreshIcon, { transform: "rotate(360deg)" }, 1000);
+const refreshIconRef = useTemplateRef<SVGElement>("refreshIconElement");
+const { play, finish } = useAnimate(refreshIconRef, { transform: "rotate(360deg)" }, 1000);
 watch(active, (isActive) => { isActive ? play() : finish(); });
 </script>

src/components/modals/about-modal.vue

@@ -4,7 +4,7 @@
     About
   </button>
   <teleport to="body">
-    <dialog ref="dialogRef" class="about">
+    <dialog ref="dialogElement" class="about">
       <header>
         About
         <button type="button" name="close" class="icon" @click="close">
@@ -26,11 +26,13 @@
   </teleport>
 </template>
 <script setup lang="ts">
+import { useTemplateRef } from "vue";
 import { IconBrandGithub, IconTilde, IconX } from "@tabler/icons-vue";
 import dayjs from "dayjs";
 import { useDialog } from "@/composable/useDialog";
 
-const { element: dialogRef, open, close } = useDialog();
+const dialogRef = useTemplateRef("dialogElement");
+const { open, close } = useDialog(dialogRef);
 const commitDate = dayjs(import.meta.env.VITE_GIT_COMMIT_DATE).format("DD.MM.YY");
 </script>
 <style lang="scss">

src/components/modals/add-repo.vue

@@ -4,7 +4,7 @@
     Add GitHub repo
   </button>
   <teleport to="body">
-    <dialog ref="dialogRef" class="add-repo" :class="{ invalid: hasError }">
+    <dialog ref="dialogElement" class="add-repo" :class="{ invalid: hasError }">
       <header>
         Add GitHub repo
         <button type="button" name="close" class="icon" @click="close">
@@ -25,7 +25,7 @@
   </teleport>
 </template>
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, ref, useTemplateRef, watch } from "vue";
 import { IconPlus, IconX } from "@tabler/icons-vue";
 import { useDialog } from "@/composable/useDialog";
 import { deepCopy } from "@/helpers/object";
@@ -38,7 +38,8 @@ import UserRepos from "../header/user-repos.vue";
 defineOptions({ inheritAttrs: false });
 
 const { settings } = useSettingsStore();
-const { element: dialogRef, open, close } = useDialog();
+const dialogRef = useTemplateRef("dialogElement");
+const { open, close } = useDialog(dialogRef);
 
 // Form
 const tab = ref<"url" | "token">("url");

src/components/modals/edit-repo.vue

@@ -3,7 +3,7 @@
     <icon-pencil title="edit repo" />
   </button>
   <teleport to="body">
-    <dialog v-if="form" ref="dialogRef" :class="{ invalid: hasError }">
+    <dialog v-if="form" ref="dialogElement" :class="{ invalid: hasError }">
       <header>
         Edit &laquo;{{ form.name }}&raquo;
         <button type="button" name="close" class="icon" @click="close">
@@ -15,7 +15,7 @@
   </teleport>
 </template>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, useTemplateRef, watch } from "vue";
 import { IconPencil, IconX } from "@tabler/icons-vue";
 import { useDialog } from "@/composable/useDialog";
 import { deepCopy } from "@/helpers/object";
@@ -25,7 +25,8 @@ import RepoForm from "../header/repo-form.vue";
 
 const props = defineProps<{ repo: Pick<Repository, "name" | "full_name" | "integrations"> }>();
 
-const { element: dialogRef, open, close } = useDialog();
+const dialogRef = useTemplateRef("dialogElement");
+const { open, close } = useDialog(dialogRef);
 
 // Form
 const form = ref(deepCopy(props.repo));

src/components/modals/settings-modal.vue

@@ -4,7 +4,7 @@
     Settings
   </button>
   <teleport to="body">
-    <dialog ref="dialogRef" class="settings">
+    <dialog ref="dialogElement" class="settings">
       <header>
         Settings
         <button type="button" name="close" class="icon" @click="close">
@@ -65,7 +65,7 @@
   </teleport>
 </template>
 <script setup lang="ts">
-import { reactive, watch } from "vue";
+import { reactive, useTemplateRef, watch } from "vue";
 import { IconSettings, IconX } from "@tabler/icons-vue";
 import { useDialog } from "@/composable/useDialog";
 import { deepCopy } from "@/helpers/object";
@@ -82,7 +82,8 @@ const themes = [
 ] as const;
 
 const { settings, needRefresh, updateServiceWorker } = useSettingsStore();
-const { element: dialogRef, open, close } = useDialog();
+const dialogRef = useTemplateRef("dialogElement");
+const { open, close } = useDialog(dialogRef);
 const form = reactive(deepCopy(settings.value));
 
 async function getUsername(): Promise<void> {

src/composable/useDialog.ts

@@ -1,22 +1,21 @@
-import { useTemplateRef, type ShallowRef } from "vue";
+import type { ShallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 
-export function useDialog(elementRef?: Readonly<ShallowRef<HTMLDialogElement | null>>) {
-  const element = elementRef ?? useTemplateRef("dialogRef");
+export function useDialog(elementRef: Readonly<ShallowRef<HTMLDialogElement | null>>) {
   function open(): void {
-    if (!element.value) return;
-    element.value.showModal();
+    if (!elementRef.value) return;
+    elementRef.value.showModal();
     document.body.classList.add("disable-scroll");
   }
   function close(): void {
-    if (!element.value) return;
-    element.value.close();
+    if (!elementRef.value) return;
+    elementRef.value.close();
     document.body.classList.remove("disable-scroll");
   }
   // Close on click outside
-  useEventListener(element, "mousedown", (event) => {
-    if (event.target === element.value) close();
+  useEventListener(elementRef, "mousedown", (event) => {
+    if (event.target === elementRef.value) close();
   });
 
-  return { element, open, close };
+  return { open, close };
 }

src/views/RepositoriesView.vue

@@ -18,7 +18,7 @@
         </button>
       </div>
     </div>
-    <ul ref="reposRef" class="repo-grid__list">
+    <ul ref="reposElement" class="repo-grid__list">
       <repo-item
         v-for="repo in filteredItems"
         :key="repo.id"
@@ -52,7 +52,7 @@ const filteredItems = computed(() => {
   });
 });
 
-const reposRef = useTemplateRef("reposRef");
+const reposRef = useTemplateRef("reposElement");
 useSortable(reposRef, repositories, { handle: ".repo__header-actions-handler" });
 
 function sort(option: "alphabetic" | "stars" | "forks" | "language"): void {