From 255bcb42412efa2b875b09a8d28b77d08b826328 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Thu, 19 Jun 2025 00:59:42 +0000
Subject: [PATCH 1/2] update: follow primevue's exposed element property naming
 convention

---
 resources/js/components/primevue/menu/Breadcrumb.vue  | 2 +-
 resources/js/components/primevue/menu/ContextMenu.vue | 2 +-
 resources/js/components/primevue/menu/Menu.vue        | 2 +-
 resources/js/components/primevue/menu/Menubar.vue     | 2 +-
 resources/js/components/primevue/menu/PanelMenu.vue   | 2 +-
 resources/js/components/primevue/menu/TabMenu.vue     | 4 +---
 resources/js/components/primevue/menu/TieredMenu.vue  | 4 +---
 resources/js/layouts/app/HeaderLayout.vue             | 4 ++--
 resources/js/layouts/app/SidebarLayout.vue            | 4 ++--
 9 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/resources/js/components/primevue/menu/Breadcrumb.vue b/resources/js/components/primevue/menu/Breadcrumb.vue
index 7d53bcd0..2668ce38 100644
--- a/resources/js/components/primevue/menu/Breadcrumb.vue
+++ b/resources/js/components/primevue/menu/Breadcrumb.vue
@@ -16,7 +16,7 @@ const defaultPt = ref<BreadcrumbPassThroughOptions>({
 
 type BreadcrumbType = InstanceType<typeof Breadcrumb>;
 const childRef = useTemplateRef<BreadcrumbType>('child-ref');
-defineExpose({ el: childRef });
+defineExpose({ $el: childRef });
 </script>
 
 <template>
diff --git a/resources/js/components/primevue/menu/ContextMenu.vue b/resources/js/components/primevue/menu/ContextMenu.vue
index 1078fb5e..99d94c97 100644
--- a/resources/js/components/primevue/menu/ContextMenu.vue
+++ b/resources/js/components/primevue/menu/ContextMenu.vue
@@ -14,7 +14,7 @@ type ContextMenuType = InstanceType<typeof ContextMenu>;
 const childRef = useTemplateRef<ContextMenuType>('child-ref');
 
 defineExpose({
-    el: childRef,
+    $el: childRef,
     toggle: (event: Event) => childRef.value?.toggle(event)
 });
 </script>
diff --git a/resources/js/components/primevue/menu/Menu.vue b/resources/js/components/primevue/menu/Menu.vue
index 53b77b03..5ec6fd91 100644
--- a/resources/js/components/primevue/menu/Menu.vue
+++ b/resources/js/components/primevue/menu/Menu.vue
@@ -13,7 +13,7 @@ type MenuType = InstanceType<typeof Menu>;
 const childRef = useTemplateRef<MenuType>('child-ref');
 
 defineExpose({
-    el: childRef,
+    $el: childRef,
     toggle: (event: Event) => childRef.value?.toggle(event)
 });
 </script>
diff --git a/resources/js/components/primevue/menu/Menubar.vue b/resources/js/components/primevue/menu/Menubar.vue
index f6479b9a..ff668d25 100644
--- a/resources/js/components/primevue/menu/Menubar.vue
+++ b/resources/js/components/primevue/menu/Menubar.vue
@@ -16,7 +16,7 @@ const componentProps = withDefaults(
 type MenubarType = InstanceType<typeof Menubar>;
 const childRef = useTemplateRef<MenubarType>('child-ref');
 
-defineExpose({ el: childRef });
+defineExpose({ $el: childRef });
 </script>
 
 <template>
diff --git a/resources/js/components/primevue/menu/PanelMenu.vue b/resources/js/components/primevue/menu/PanelMenu.vue
index 02c3015a..8bdb08c8 100644
--- a/resources/js/components/primevue/menu/PanelMenu.vue
+++ b/resources/js/components/primevue/menu/PanelMenu.vue
@@ -19,7 +19,7 @@ const defaultPt: PanelMenuPassThroughOptions = {
 
 type PanelMenuType = InstanceType<typeof PanelMenu>;
 const childRef = useTemplateRef<PanelMenuType>('child-ref');
-defineExpose({ el: childRef });
+defineExpose({ $el: childRef });
 </script>
 
 <template>
diff --git a/resources/js/components/primevue/menu/TabMenu.vue b/resources/js/components/primevue/menu/TabMenu.vue
index 0454b9ba..f4cb43d1 100644
--- a/resources/js/components/primevue/menu/TabMenu.vue
+++ b/resources/js/components/primevue/menu/TabMenu.vue
@@ -24,9 +24,7 @@ const currentRoute = computed(() => {
 
 type TabsType = InstanceType<typeof Tabs>;
 const childRef = useTemplateRef<TabsType>('child-ref');
-defineExpose({
-    el: childRef,
-});
+defineExpose({ $el: childRef });
 </script>
 
 <template>
diff --git a/resources/js/components/primevue/menu/TieredMenu.vue b/resources/js/components/primevue/menu/TieredMenu.vue
index 2b451e57..dd7e5b4e 100644
--- a/resources/js/components/primevue/menu/TieredMenu.vue
+++ b/resources/js/components/primevue/menu/TieredMenu.vue
@@ -13,9 +13,7 @@ const componentProps = defineProps<ExtendedTieredMenuProps>();
 type TieredMenuType = InstanceType<typeof TieredMenu>;
 const childRef = useTemplateRef<TieredMenuType>('child-ref');
 
-defineExpose({
-    el: childRef,
-});
+defineExpose({ $el: childRef });
 </script>
 
 <template>
diff --git a/resources/js/layouts/app/HeaderLayout.vue b/resources/js/layouts/app/HeaderLayout.vue
index b603ea4b..48776ef1 100644
--- a/resources/js/layouts/app/HeaderLayout.vue
+++ b/resources/js/layouts/app/HeaderLayout.vue
@@ -29,12 +29,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.el.toggle(event);
+    userMenu.value.$el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.el.toggle(event);
+    mobileUserMenu.value.$el.toggle(event);
 };
 </script>
 
diff --git a/resources/js/layouts/app/SidebarLayout.vue b/resources/js/layouts/app/SidebarLayout.vue
index e0a65c77..7a988411 100644
--- a/resources/js/layouts/app/SidebarLayout.vue
+++ b/resources/js/layouts/app/SidebarLayout.vue
@@ -27,12 +27,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.el.toggle(event);
+    userMenu.value.$el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.el.toggle(event);
+    mobileUserMenu.value.$el.toggle(event);
 };
 </script>
 

From 536a7106930ec19e3004b0fd6f2769123ac2ed99 Mon Sep 17 00:00:00 2001
From: Connor Abbas <abbasconnor@gmail.com>
Date: Thu, 19 Jun 2025 01:04:57 +0000
Subject: [PATCH 2/2] fix: change context menu child ref var

---
 resources/js/pages/admin/users/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/admin/users/Index.vue b/resources/js/pages/admin/users/Index.vue
index 43dbdbce..28aa1acb 100644
--- a/resources/js/pages/admin/users/Index.vue
+++ b/resources/js/pages/admin/users/Index.vue
@@ -35,8 +35,8 @@ function toggleUserContextMenu(event, userData) {
         },
     ];
     // Show the menu
-    if (userContextMenu.value && userContextMenu.value?.el) {
-        userContextMenu.value.el.toggle(event);
+    if (userContextMenu.value && userContextMenu.value?.$el) {
+        userContextMenu.value.$el.toggle(event);
     }
 }