Skip to content

Commit 008c0f1

Browse files
connorabbasconnorabbas
committed
other menu components refactor
1 parent 3507791 commit 008c0f1

File tree

2 files changed

+86
-31
lines changed

2 files changed

+86
-31
lines changed

‎src/components/primevue/MenuBar.vue‎

Lines changed: 40 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
<script setup lang="ts">
22
import { useTemplateRef } from 'vue';
33
import Menubar from 'primevue/menubar';
4+
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
5+
import type { ExtendedMenuItem } from '@/types';
46
5-
type MenubarType = InstanceType<typeof Menubar>
7+
const componentProps = defineProps<{
8+
model: ExtendedMenuItem[]
9+
}>();
10+
11+
type MenubarType = InstanceType<typeof Menubar>;
612
const childRef = useTemplateRef<MenubarType>('child-ref');
13+
714
defineExpose({
815
childRef,
916
});
@@ -12,13 +19,18 @@ defineExpose({
1219
<template>
1320
<Menubar
1421
ref="child-ref"
22+
:model="componentProps.model"
1523
breakpoint="1024px"
1624
>
1725
<template
18-
v-if="$slots.start"
19-
#start
26+
v-for="(_, slotName) in $slots"
27+
#[slotName]="slotProps"
2028
>
21-
<slot name="start"></slot>
29+
<slot
30+
v-if="slotName != 'item'"
31+
:name="slotName"
32+
v-bind="slotProps ?? {}"
33+
/>
2234
</template>
2335
<template #item="{ item, props, hasSubmenu, root }">
2436
<RouterLink
@@ -36,12 +48,17 @@ defineExpose({
3648
}"
3749
@click="navigate"
3850
>
39-
<span
51+
<i
4052
v-if="item.icon"
4153
:class="item.icon"
4254
class="p-menubar-item-icon"
4355
/>
44-
<span class="p-menu-item-label">{{ item.label }}</span>
56+
<component
57+
:is="item.lucideIcon"
58+
v-else-if="item.lucideIcon"
59+
class="p-menubar-item-icon"
60+
/>
61+
<span class="p-menubar-item-label">{{ item.label }}</span>
4562
</a>
4663
</RouterLink>
4764
<a
@@ -51,26 +68,28 @@ defineExpose({
5168
v-bind="props.action"
5269
class="p-menubar-item-link"
5370
>
54-
<span
71+
<i
5572
v-if="item.icon"
5673
:class="item.icon"
5774
class="p-menubar-item-icon"
5875
/>
59-
<span class="p-menu-item-label">{{ item.label }}</span>
60-
<i
61-
v-if="hasSubmenu"
62-
:class="[
63-
'pi',
64-
root ? 'pi-angle-down text-xs' : 'pi-angle-right',
65-
]"
66-
></i>
76+
<component
77+
:is="item.lucideIcon"
78+
v-else-if="item.lucideIcon"
79+
class="p-menubar-item-icon"
80+
/>
81+
<span class="p-menubar-item-label">{{ item.label }}</span>
82+
<template v-if="hasSubmenu">
83+
<ChevronDown
84+
v-if="root"
85+
class="p-menubar-submenu-icon"
86+
/>
87+
<ChevronRight
88+
v-else
89+
class="p-menubar-submenu-icon"
90+
/>
91+
</template>
6792
</a>
6893
</template>
69-
<template
70-
v-if="$slots.end"
71-
#end
72-
>
73-
<slot name="end"></slot>
74-
</template>
7594
</Menubar>
7695
</template>

‎src/components/primevue/PanelMenu.vue‎

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,30 @@
1+
<script setup lang="ts">
2+
import { useTemplateRef } from 'vue';
3+
import PanelMenu from 'primevue/panelmenu';
4+
import { ChevronDown, ChevronRight } from 'lucide-vue-next';
5+
import type { ExtendedMenuItem } from '@/types';
6+
7+
const componentProps = defineProps<{
8+
model: ExtendedMenuItem[]
9+
}>();
10+
11+
type PanelMenuType = InstanceType<typeof PanelMenu>;
12+
const childRef = useTemplateRef<PanelMenuType>('child-ref');
13+
defineExpose({
14+
childRef,
15+
});
16+
</script>
17+
118
<template>
219
<PanelMenu
20+
ref="child-ref"
21+
:model="componentProps.model"
322
pt:root:class="p-0 m-0 gap-1"
423
pt:panel:class="p-0 border-0"
524
pt:header:class="p-0 border-0"
625
pt:itemContent:class="gap-1"
726
>
8-
<template #item="{ item, active }">
27+
<template #item="{ item, root, active, hasSubmenu }">
928
<RouterLink
1029
v-if="item.route"
1130
v-slot="{ href, navigate }"
@@ -20,13 +39,20 @@
2039
]"
2140
@click="navigate"
2241
>
23-
<span
42+
<i
2443
v-if="item.icon"
2544
:class="[
26-
'mr-2 p-panelmenu-item-icon',
45+
root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
2746
item.icon,
2847
]"
2948
/>
49+
<component
50+
:is="item.lucideIcon"
51+
v-else-if="item.lucideIcon"
52+
:class="[
53+
root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
54+
]"
55+
/>
3056
<span>{{ item.label }}</span>
3157
</a>
3258
</RouterLink>
@@ -36,24 +62,34 @@
3662
:target="item.target"
3763
:class="[
3864
'flex items-center cursor-pointer no-underline px-4 py-2',
39-
item.items ? 'p-panelmenu-header-link' : 'p-panelmenu-item-link',
65+
hasSubmenu ? 'p-panelmenu-header-link' : 'p-panelmenu-item-link',
4066
]"
4167
>
4268
<i
4369
v-if="item.icon"
4470
:class="[
45-
'mr-2 p-panelmenu-item-icon',
71+
root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
4672
item.icon,
4773
]"
4874
/>
49-
<span>{{ item.label }}</span>
50-
<span
51-
v-if="item.items"
75+
<component
76+
:is="item.lucideIcon"
77+
v-else-if="item.lucideIcon"
5278
:class="[
53-
'pi p-panelmenu-submenu-icon ml-auto',
54-
active ? 'pi-angle-down' : 'pi-angle-right',
79+
root ? 'p-panelmenu-header-icon' : 'p-panelmenu-item-icon',
5580
]"
5681
/>
82+
<span>{{ item.label }}</span>
83+
<template v-if="hasSubmenu">
84+
<ChevronDown
85+
v-if="active"
86+
class="p-panelmenu-submenu-icon ml-auto"
87+
/>
88+
<ChevronRight
89+
v-else
90+
class="p-panelmenu-submenu-icon ml-auto"
91+
/>
92+
</template>
5793
</a>
5894
</template>
5995
</PanelMenu>

0 commit comments

Comments
 (0)