connorabbas · connorabbas · Sep 21, 2024 · Sep 21, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,6 @@
         "tailwindcss": "^3.4.4",
         "tailwindcss-primeui": "^0.3.2",
         "vite": "^5.0",
-        "vue": "^3.4.0"
+        "vue": "^3.5.0"
     }
 }
diff --git a/resources/js/Components/LinksMenu.vue b/resources/js/Components/LinksMenu.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import Menu from 'primevue/menu';
 
-const childRef = ref(null);
-
+const childRef = useTemplateRef('child-ref');
 defineExpose({
     childRef,
 });
 </script>
 
 <template>
-    <Menu ref="childRef">
+    <Menu ref="child-ref">
         <template #item="{ item, props }">
             <Link
                 v-if="item.route"

diff --git a/resources/js/Components/LinksMenuBar.vue b/resources/js/Components/LinksMenuBar.vue
@@ -1,16 +1,15 @@
 <script setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import Menubar from 'primevue/menubar';
 
-const childRef = ref(null);
-
+const childRef = useTemplateRef('child-ref');
 defineExpose({
     childRef,
 });
 </script>
 
 <template>
-    <Menubar ref="childRef">
+    <Menubar ref="child-ref">
         <template v-if="$slots.start" #start>
             <slot name="start"></slot>
         </template>

diff --git a/resources/js/Components/NestedLinksMenu.vue → resources/js/Components/LinksPanelMenu.vue b/resources/js/Components/NestedLinksMenu.vue → resources/js/Components/LinksPanelMenu.vue
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -1,16 +1,17 @@
 <script setup>
-import { ref, onMounted, onUnmounted, watchEffect } from 'vue';
+import { ref, useTemplateRef, onMounted, onUnmounted, watchEffect } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import Drawer from 'primevue/drawer';
 import Toast from 'primevue/toast';
 import ApplicationLogo from '@/Components/ApplicationLogo.vue';
 import Container from '@/Components/Container.vue';
 import LinksMenu from '@/Components/LinksMenu.vue';
 import LinksMenuBar from '@/Components/LinksMenuBar.vue';
-import NestedLinksMenu from '@/Components/NestedLinksMenu.vue';
+import LinksPanelMenu from '@/Components/LinksPanelMenu.vue';
 import ToggleThemeButton from '@/Components/ToggleThemeButton.vue';
 
 const currentRoute = route().current();
+const logoutForm = useForm({});
 function logout() {
     logoutForm.post(route('logout'));
 }
@@ -25,8 +26,7 @@ const mainMenuItems = [
 ];
 
 // User menu (desktop)
-const logoutForm = useForm({});
-const userMenu = ref(null);
+const userMenu = useTemplateRef('user-menu');
 const userMenuItems = [
     {
         label: 'Profile',
@@ -124,7 +124,7 @@ watchEffect(() => {
                                     <LinksMenu
                                         :model="userMenuItems"
                                         popup
-                                        ref="userMenu"
+                                        ref="user-menu"
                                         class="shadow"
                                     />
                                     <Button
@@ -170,7 +170,7 @@ watchEffect(() => {
                                 >
                                     Home
                                 </p>
-                                <NestedLinksMenu
+                                <LinksPanelMenu
                                     :model="homeMobileMenuItems"
                                     class="w-full"
                                 />

diff --git a/resources/js/Pages/Auth/ForgotPassword.vue b/resources/js/Pages/Auth/ForgotPassword.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import Message from 'primevue/message';
 import GuestLayout from '@/Layouts/GuestLayout.vue';
@@ -11,7 +11,7 @@ defineProps({
     },
 });
 
-const emailInput = ref(null);
+const emailInput = useTemplateRef('email-input');
 
 const form = useForm({
     email: '',
@@ -47,7 +47,7 @@ onMounted(() => {
                 <label for="email" class="block mb-2">Email</label>
                 <InputText
                     required
-                    ref="emailInput"
+                    ref="email-input"
                     id="email"
                     type="email"
                     v-model="form.email"

diff --git a/resources/js/Pages/Auth/Login.vue b/resources/js/Pages/Auth/Login.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import Checkbox from 'primevue/checkbox';
 import Message from 'primevue/message';
@@ -15,7 +15,7 @@ defineProps({
     },
 });
 
-const emailInput = ref(null);
+const emailInput = useTemplateRef('email-input');
 
 const form = useForm({
     email: '',
@@ -39,11 +39,7 @@ onMounted(() => {
         <Head title="Log in" />
 
         <template #message v-if="status">
-            <Message
-                severity="success"
-                :closable="false"
-                class="shadow"
-            >
+            <Message severity="success" :closable="false" class="shadow">
                 {{ status }}
             </Message>
         </template>
@@ -53,7 +49,7 @@ onMounted(() => {
                 <label for="email" class="block mb-2">Email</label>
                 <InputText
                     required
-                    ref="emailInput"
+                    ref="email-input"
                     id="email"
                     type="email"
                     v-model="form.email"

diff --git a/resources/js/Pages/Auth/Register.vue b/resources/js/Pages/Auth/Register.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import GuestLayout from '@/Layouts/GuestLayout.vue';
 import InputError from '@/Components/InputError.vue';
@@ -11,7 +11,7 @@ const form = useForm({
     password_confirmation: '',
 });
 
-const nameInput = ref(null);
+const nameInput = useTemplateRef('name-input');
 
 const submit = () => {
     form.post(route('register'), {
@@ -32,7 +32,7 @@ onMounted(() => {
             <div class="mb-6">
                 <label for="name" class="block mb-2">Name</label>
                 <InputText
-                    ref="nameInput"
+                    ref="name-input"
                     id="name"
                     type="text"
                     v-model="form.name"

diff --git a/resources/js/Pages/Auth/ResetPassword.vue b/resources/js/Pages/Auth/ResetPassword.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { useTemplateRef, onMounted } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import GuestLayout from '@/Layouts/GuestLayout.vue';
 import InputError from '@/Components/InputError.vue';
@@ -15,7 +15,7 @@ const props = defineProps({
     },
 });
 
-const emailInput = ref(null);
+const emailInput = useTemplateRef('email-input');
 
 const form = useForm({
     token: props.token,
@@ -43,7 +43,7 @@ onMounted(() => {
             <div class="mb-6">
                 <label for="email" class="block mb-2">Email</label>
                 <InputText
-                    ref="emailInput"
+                    ref="email-input"
                     id="email"
                     type="email"
                     v-model="form.email"

diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { ref, watch, nextTick } from 'vue';
+import { ref, useTemplateRef, watch, nextTick } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import Dialog from 'primevue/dialog';
 import InputError from '@/Components/InputError.vue';
 
-const passwordInput = ref(null);
+const passwordInput = useTemplateRef('password-input');
 const modalOpen = ref(false);
 
 const form = useForm({
@@ -52,7 +52,7 @@ watch(modalOpen, (newModalOpen) => {
                 <InputText
                     required
                     id="password"
-                    ref="passwordInput"
+                    ref="password-input"
                     type="password"
                     placeholder="Password"
                     v-model="form.password"

diff --git a/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue b/resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { ref } from 'vue';
+import { useTemplateRef } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import { useToast } from 'primevue/usetoast';
 import InputError from '@/Components/InputError.vue';
 
-const currentPasswordInput = ref(null);
-const passwordInput = ref(null);
+const currentPasswordInput = useTemplateRef('current-password-input');
+const passwordInput = useTemplateRef('password-input');
 
 const toast = useToast();
 const form = useForm({
@@ -61,7 +61,7 @@ const updatePassword = () => {
                 <InputText
                     required
                     id="current_password"
-                    ref="currentPasswordInput"
+                    ref="current-password-input"
                     type="password"
                     v-model="form.current_password"
                     class="w-full"
@@ -79,7 +79,7 @@ const updatePassword = () => {
                 <InputText
                     required
                     id="password"
-                    ref="passwordInput"
+                    ref="password-input"
                     type="password"
                     v-model="form.password"
                     class="w-full"

diff --git a/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue b/resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { useTemplateRef, onMounted } from 'vue';
 import { useForm, usePage } from '@inertiajs/vue3';
 import { useToast } from 'primevue/usetoast';
 import Message from 'primevue/message';
@@ -14,7 +14,7 @@ defineProps({
     },
 });
 
-const nameInput = ref(null);
+const nameInput = useTemplateRef('name-input');
 
 const user = usePage().props.auth.user;
 const toast = useToast();
@@ -59,7 +59,7 @@ onMounted(() => {
                 <label for="name" class="block mb-2">Name</label>
                 <InputText
                     required
-                    ref="nameInput"
+                    ref="name-input"
                     id="name"
                     type="text"
                     v-model="form.name"