Extended component improvements

package.json

@@ -17,6 +17,7 @@
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
         "primevue": "^4.3.0",
+        "tailwind-merge": "^3.2.0",
         "tailwindcss": "^4.1.0",
         "tailwindcss-primeui": "^0.5.0",
         "typescript-eslint": "^8.19.1",
@@ -39,4 +40,4 @@
         "typescript-eslint": "^8.19.1",
         "vite": "^6.2"
     }
-}
+}

src/App.vue

@@ -5,7 +5,7 @@ import { RouterView } from 'vue-router';
 <template>
     <!-- Use key to re-generate the page view component on each navigation :key="$route.path" -->
     <!-- Alteratively, use a watch() on each component to re-render dynamic data as needed -->
-    <Toast position="bottom-right" />
+    <Toast position="top-center" />
     <RouterView v-slot="{ Component }">
         <Suspense timeout="0">
             <template #default>

src/components/primevue/menu/Breadcrumb.vue

@@ -1,25 +1,28 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue';
-import Breadcrumb from 'primevue/breadcrumb';
+import { ref, useTemplateRef } from 'vue';
+import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
 import { ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedBreadcrumbProps>();
+
+const defaultPt = ref<BreadcrumbPassThroughOptions>({
+    root: 'p-0 bg-transparent'
+});
 
 type BreadcrumbType = InstanceType<typeof Breadcrumb>;
 const childRef = useTemplateRef<BreadcrumbType>('child-ref');
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <Breadcrumb
         ref="child-ref"
-        :model="componentProps.model"
-        pt:root:class="p-0 bg-transparent"
+        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, props }">
             <RouterLink

src/components/primevue/menu/Menu.vue

@@ -1,25 +1,27 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import Menu from 'primevue/menu';
+import Menu, { type MenuProps } from 'primevue/menu';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedMenuProps>();
 
 type MenuType = InstanceType<typeof Menu>;
 const childRef = useTemplateRef<MenuType>('child-ref');
 
 defineExpose({
-    childRef,
+    el: childRef,
     toggle: (event: Event) => childRef.value?.toggle(event)
 });
 </script>
 
 <template>
     <Menu
         ref="child-ref"
-        :model="componentProps.model"
+        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"

src/components/primevue/menu/MenuBar.vue

@@ -1,26 +1,28 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import Menubar from 'primevue/menubar';
+import Menubar, { type MenubarProps } from 'primevue/menubar';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = withDefaults(
+    defineProps<ExtendedMenubarProps>(),
+    { breakpoint: '1024px' }
+);
 
 type MenubarType = InstanceType<typeof Menubar>;
 const childRef = useTemplateRef<MenubarType>('child-ref');
 
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <Menubar
         ref="child-ref"
-        :model="componentProps.model"
-        breakpoint="1024px"
+        v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template
             v-for="(_, slotName) in $slots"

src/components/primevue/menu/PanelMenu.vue

@@ -1,28 +1,31 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import PanelMenu from 'primevue/panelmenu';
+import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
 import { ChevronDown, ChevronRight } from 'lucide-vue-next';
 import type { ExtendedMenuItem } from '@/types';
+import { ptViewMerge } from '@/utils';
 
-const componentProps = defineProps<{
-    model: ExtendedMenuItem[]
-}>();
+interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
+    model: ExtendedMenuItem[];
+}
+const componentProps = defineProps<ExtendedPanelMenuProps>();
+
+const defaultPt: PanelMenuPassThroughOptions = {
+    root: 'p-0 m-0 gap-1',
+    panel: 'p-0 bg-transparent border-0',
+    header: 'p-0 border-0',
+    itemContent: 'gap-1',
+};
 
 type PanelMenuType = InstanceType<typeof PanelMenu>;
 const childRef = useTemplateRef<PanelMenuType>('child-ref');
-defineExpose({
-    childRef,
-});
+defineExpose({ el: childRef });
 </script>
 
 <template>
     <PanelMenu
         ref="child-ref"
-        :model="componentProps.model"
-        pt:root:class="p-0 m-0 gap-1"
-        pt:panel:class="p-0 border-0"
-        pt:header:class="p-0 border-0"
-        pt:itemContent:class="gap-1"
+        v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
         <template #item="{ item, root, active, hasSubmenu }">
             <RouterLink

src/layouts/app/HeaderLayout.vue

@@ -26,12 +26,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.childRef.toggle(event);
+    userMenu.value.el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.childRef.toggle(event);
+    mobileUserMenu.value.el.toggle(event);
 };
 </script>
 
@@ -66,6 +66,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="mobile-user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>
@@ -115,7 +116,7 @@ const toggleMobileUserMenu = (event) => {
                                         ref="user-menu"
                                         appendTo="#user-menu-append"
                                         :model="userMenuItems"
-                                        pt:root:class="left-auto! top-0! right-0"
+                                        pt:root:class="left-auto! top-0! right-0 z-[1200]"
                                         popup
                                     />
                                 </div>

src/layouts/app/SidebarLayout.vue

@@ -24,12 +24,12 @@ const {
 
 const userMenu = useTemplateRef('user-menu');
 const toggleUserMenu = (event) => {
-    userMenu.value.childRef.toggle(event);
+    userMenu.value.el.toggle(event);
 };
 
 const mobileUserMenu = useTemplateRef('mobile-user-menu');
 const toggleMobileUserMenu = (event) => {
-    mobileUserMenu.value.childRef.toggle(event);
+    mobileUserMenu.value.el.toggle(event);
 };
 </script>
 
@@ -39,7 +39,7 @@ const toggleMobileUserMenu = (event) => {
             <!-- Mobile drawer menu -->
             <Drawer
                 v-model:visible="mobileMenuOpen"
-                position="right"
+                position="left"
             >
                 <div>
                     <PanelMenu
@@ -64,6 +64,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="mobile-user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>
@@ -136,6 +137,7 @@ const toggleMobileUserMenu = (event) => {
                         <Menu
                             ref="user-menu"
                             :model="userMenuItems"
+                            pt:root:class="z-[1200]"
                             popup
                         />
                     </div>

src/utils/index.ts

@@ -0,0 +1,18 @@
+import { twMerge } from 'tailwind-merge';
+import { mergeProps } from 'vue';
+
+export const ptViewMerge = (
+    globalPTProps = {} as any,
+    selfPTProps = {} as any,
+    datasets: any
+) => {
+    const { class: globalClass, ...globalRest } = globalPTProps;
+    const { class: selfClass, ...selfRest } = selfPTProps;
+
+    return mergeProps(
+        { class: twMerge(globalClass, selfClass) },
+        globalRest,
+        selfRest,
+        datasets
+    );
+};