Skip to content

Commit 2fefdd2

Browse files
connorabbasconnorabbas
authored
Merge pull request #37 from connorabbas/develop
Extended component improvements
2 parents 1f19c57 + 541dc5f commit 2fefdd2

File tree

10 files changed

+88
-45
lines changed

10 files changed

+88
-45
lines changed

‎package-lock.json

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"nprogress": "^0.2.0",
1818
"pinia": "^2.1.7",
1919
"primevue": "^4.3.0",
20+
"tailwind-merge": "^3.2.0",
2021
"tailwindcss": "^4.1.0",
2122
"tailwindcss-primeui": "^0.5.0",
2223
"typescript-eslint": "^8.19.1",
@@ -39,4 +40,4 @@
3940
"typescript-eslint": "^8.19.1",
4041
"vite": "^6.2"
4142
}
42-
}
43+
}

‎src/App.vue

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

‎src/components/primevue/menu/Breadcrumb.vue

+13-10
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
<script setup lang="ts">
2-
import { useTemplateRef } from 'vue';
3-
import Breadcrumb from 'primevue/breadcrumb';
2+
import { ref, useTemplateRef } from 'vue';
3+
import Breadcrumb, { type BreadcrumbPassThroughOptions, type BreadcrumbProps } from 'primevue/breadcrumb';
44
import { ChevronRight } from 'lucide-vue-next';
55
import type { ExtendedMenuItem } from '@/types';
6+
import { ptViewMerge } from '@/utils';
67
7-
const componentProps = defineProps<{
8-
model: ExtendedMenuItem[]
9-
}>();
8+
interface ExtendedBreadcrumbProps extends Omit<BreadcrumbProps, 'model'> {
9+
model: ExtendedMenuItem[];
10+
}
11+
const componentProps = defineProps<ExtendedBreadcrumbProps>();
12+
13+
const defaultPt = ref<BreadcrumbPassThroughOptions>({
14+
root: 'p-0 bg-transparent'
15+
});
1016
1117
type BreadcrumbType = InstanceType<typeof Breadcrumb>;
1218
const childRef = useTemplateRef<BreadcrumbType>('child-ref');
13-
defineExpose({
14-
childRef,
15-
});
19+
defineExpose({ el: childRef });
1620
</script>
1721

1822
<template>
1923
<Breadcrumb
2024
ref="child-ref"
21-
:model="componentProps.model"
22-
pt:root:class="p-0 bg-transparent"
25+
v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
2326
>
2427
<template #item="{ item, props }">
2528
<RouterLink

‎src/components/primevue/menu/Menu.vue

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
<script setup lang="ts">
22
import { useTemplateRef } from 'vue';
3-
import Menu from 'primevue/menu';
3+
import Menu, { type MenuProps } from 'primevue/menu';
44
import type { ExtendedMenuItem } from '@/types';
5+
import { ptViewMerge } from '@/utils';
56
6-
const componentProps = defineProps<{
7-
model: ExtendedMenuItem[]
8-
}>();
7+
interface ExtendedMenuProps extends Omit<MenuProps, 'model'> {
8+
model: ExtendedMenuItem[];
9+
}
10+
const componentProps = defineProps<ExtendedMenuProps>();
911
1012
type MenuType = InstanceType<typeof Menu>;
1113
const childRef = useTemplateRef<MenuType>('child-ref');
1214
1315
defineExpose({
14-
childRef,
16+
el: childRef,
1517
toggle: (event: Event) => childRef.value?.toggle(event)
1618
});
1719
</script>
1820

1921
<template>
2022
<Menu
2123
ref="child-ref"
22-
:model="componentProps.model"
24+
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
2325
>
2426
<template
2527
v-for="(_, slotName) in $slots"

‎src/components/primevue/menu/MenuBar.vue

+11-9
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
<script setup lang="ts">
22
import { useTemplateRef } from 'vue';
3-
import Menubar from 'primevue/menubar';
3+
import Menubar, { type MenubarProps } from 'primevue/menubar';
44
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
55
import type { ExtendedMenuItem } from '@/types';
6+
import { ptViewMerge } from '@/utils';
67
7-
const componentProps = defineProps<{
8-
model: ExtendedMenuItem[]
9-
}>();
8+
interface ExtendedMenubarProps extends Omit<MenubarProps, 'model'> {
9+
model: ExtendedMenuItem[];
10+
}
11+
const componentProps = withDefaults(
12+
defineProps<ExtendedMenubarProps>(),
13+
{ breakpoint: '1024px' }
14+
);
1015
1116
type MenubarType = InstanceType<typeof Menubar>;
1217
const childRef = useTemplateRef<MenubarType>('child-ref');
1318
14-
defineExpose({
15-
childRef,
16-
});
19+
defineExpose({ el: childRef });
1720
</script>
1821

1922
<template>
2023
<Menubar
2124
ref="child-ref"
22-
:model="componentProps.model"
23-
breakpoint="1024px"
25+
v-bind="{ ...componentProps, ptOptions: { mergeProps: ptViewMerge } }"
2426
>
2527
<template
2628
v-for="(_, slotName) in $slots"

‎src/components/primevue/menu/PanelMenu.vue

+15-12
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
11
<script setup lang="ts">
22
import { useTemplateRef } from 'vue';
3-
import PanelMenu from 'primevue/panelmenu';
3+
import PanelMenu, { type PanelMenuPassThroughOptions, type PanelMenuProps } from 'primevue/panelmenu';
44
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
55
import type { ExtendedMenuItem } from '@/types';
6+
import { ptViewMerge } from '@/utils';
67
7-
const componentProps = defineProps<{
8-
model: ExtendedMenuItem[]
9-
}>();
8+
interface ExtendedPanelMenuProps extends Omit<PanelMenuProps, 'model'> {
9+
model: ExtendedMenuItem[];
10+
}
11+
const componentProps = defineProps<ExtendedPanelMenuProps>();
12+
13+
const defaultPt: PanelMenuPassThroughOptions = {
14+
root: 'p-0 m-0 gap-1',
15+
panel: 'p-0 bg-transparent border-0',
16+
header: 'p-0 border-0',
17+
itemContent: 'gap-1',
18+
};
1019
1120
type PanelMenuType = InstanceType<typeof PanelMenu>;
1221
const childRef = useTemplateRef<PanelMenuType>('child-ref');
13-
defineExpose({
14-
childRef,
15-
});
22+
defineExpose({ el: childRef });
1623
</script>
1724

1825
<template>
1926
<PanelMenu
2027
ref="child-ref"
21-
:model="componentProps.model"
22-
pt:root:class="p-0 m-0 gap-1"
23-
pt:panel:class="p-0 border-0"
24-
pt:header:class="p-0 border-0"
25-
pt:itemContent:class="gap-1"
28+
v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
2629
>
2730
<template #item="{ item, root, active, hasSubmenu }">
2831
<RouterLink

‎src/layouts/app/HeaderLayout.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@ const {
2626
2727
const userMenu = useTemplateRef('user-menu');
2828
const toggleUserMenu = (event) => {
29-
userMenu.value.childRef.toggle(event);
29+
userMenu.value.el.toggle(event);
3030
};
3131
3232
const mobileUserMenu = useTemplateRef('mobile-user-menu');
3333
const toggleMobileUserMenu = (event) => {
34-
mobileUserMenu.value.childRef.toggle(event);
34+
mobileUserMenu.value.el.toggle(event);
3535
};
3636
</script>
3737

@@ -66,6 +66,7 @@ const toggleMobileUserMenu = (event) => {
6666
<Menu
6767
ref="mobile-user-menu"
6868
:model="userMenuItems"
69+
pt:root:class="z-[1200]"
6970
popup
7071
/>
7172
</div>
@@ -115,7 +116,7 @@ const toggleMobileUserMenu = (event) => {
115116
ref="user-menu"
116117
appendTo="#user-menu-append"
117118
:model="userMenuItems"
118-
pt:root:class="left-auto! top-0! right-0"
119+
pt:root:class="left-auto! top-0! right-0 z-[1200]"
119120
popup
120121
/>
121122
</div>

‎src/layouts/app/SidebarLayout.vue

+5-3
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,12 @@ const {
2424
2525
const userMenu = useTemplateRef('user-menu');
2626
const toggleUserMenu = (event) => {
27-
userMenu.value.childRef.toggle(event);
27+
userMenu.value.el.toggle(event);
2828
};
2929
3030
const mobileUserMenu = useTemplateRef('mobile-user-menu');
3131
const toggleMobileUserMenu = (event) => {
32-
mobileUserMenu.value.childRef.toggle(event);
32+
mobileUserMenu.value.el.toggle(event);
3333
};
3434
</script>
3535

@@ -39,7 +39,7 @@ const toggleMobileUserMenu = (event) => {
3939
<!-- Mobile drawer menu -->
4040
<Drawer
4141
v-model:visible="mobileMenuOpen"
42-
position="right"
42+
position="left"
4343
>
4444
<div>
4545
<PanelMenu
@@ -64,6 +64,7 @@ const toggleMobileUserMenu = (event) => {
6464
<Menu
6565
ref="mobile-user-menu"
6666
:model="userMenuItems"
67+
pt:root:class="z-[1200]"
6768
popup
6869
/>
6970
</div>
@@ -136,6 +137,7 @@ const toggleMobileUserMenu = (event) => {
136137
<Menu
137138
ref="user-menu"
138139
:model="userMenuItems"
140+
pt:root:class="z-[1200]"
139141
popup
140142
/>
141143
</div>

‎src/utils/index.ts

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { twMerge } from 'tailwind-merge';
2+
import { mergeProps } from 'vue';
3+
4+
export const ptViewMerge = (
5+
globalPTProps = {} as any,
6+
selfPTProps = {} as any,
7+
datasets: any
8+
) => {
9+
const { class: globalClass, ...globalRest } = globalPTProps;
10+
const { class: selfClass, ...selfRest } = selfPTProps;
11+
12+
return mergeProps(
13+
{ class: twMerge(globalClass, selfClass) },
14+
globalRest,
15+
selfRest,
16+
datasets
17+
);
18+
};

0 commit comments

Comments
 (0)