Merge pull request #325 from connorabbas/develop

Menu Components: Implement missing MenuItem props

Author: connorabbas

resources/js/components/primevue/menu/Breadcrumb.vue

@@ -26,9 +26,12 @@ defineExpose({ el: childRef });
     >
         <template #item="{ item, props }">
             <InertiaLink
-                v-if="item.route"
+                v-if="item.visible !== false && item.route"
                 :href="item.route"
-                class="p-breadcrumb-item-link"
+                :target="item.target"
+                :class="['p-breadcrumb-item-link', item.class]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -44,10 +47,13 @@ defineExpose({ el: childRef });
                 <span class="p-breadcrumb-item-label">{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
-                v-bind="props.action"
+                :class="item.class"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"

resources/js/components/primevue/menu/ContextMenu.vue

@@ -26,9 +26,12 @@ defineExpose({
     >
         <template #item="{ item, props, hasSubmenu }">
             <InertiaLink
-                v-if="item.route"
+                v-if="item.visible !== false && item.route"
                 :href="item.route"
-                class="p-contextmenu-item-link"
+                :target="item.target"
+                :class="['p-contextmenu-item-link', item.class]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -44,10 +47,13 @@ defineExpose({
                 <span class="p-contextmenu-item-label">{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
-                v-bind="props.action"
+                :class="item.class"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"

resources/js/components/primevue/menu/Menu.vue

@@ -35,9 +35,12 @@ defineExpose({
         </template>
         <template #item="{ item, props }">
             <InertiaLink
-                v-if="item.route"
+                v-if="item.visible !== false && item.route"
                 :href="item.route"
-                class="p-menu-item-link"
+                :target="item.target"
+                :class="['p-menu-item-link', item.class]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -53,10 +56,13 @@ defineExpose({
                 <span class="p-menu-item-label">{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
-                v-bind="props.action"
+                :class="item.class"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"

resources/js/components/primevue/menu/Menubar.vue

@@ -36,12 +36,12 @@ defineExpose({ el: childRef });
         </template>
         <template #item="{ item, props, hasSubmenu, root }">
             <InertiaLink
-                v-if="item.route"
+                v-if="item.visible !== false && item.route"
                 :href="item.route"
-                class="p-menubar-item-link"
-                :class="{
-                    'font-bold! text-muted-color': item.active,
-                }"
+                :target="item.target"
+                :class="['p-menubar-item-link', { 'font-bold! text-muted-color': item.active }, item.class]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -57,11 +57,13 @@ defineExpose({ el: childRef });
                 <span class="p-menubar-item-label">{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
-                v-bind="props.action"
-                class="p-menubar-item-link"
+                :class="item.class"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"

resources/js/components/primevue/menu/PanelMenu.vue

@@ -27,14 +27,21 @@ defineExpose({ el: childRef });
         ref="child-ref"
         v-bind="{ ...componentProps, pt: defaultPt, ptOptions: { mergeProps: ptViewMerge } }"
     >
-        <template #item="{ item, root, active, hasSubmenu }">
+        <template #item="{ item, root, active, props, hasSubmenu }">
+            <Divider
+                v-if="item.separator"
+                pt:root:class="my-0"
+            />
             <InertiaLink
-                v-if="item.route"
+                v-else-if="item.visible !== false && item.route"
                 :href="item.route"
+                :target="item.target"
                 :class="[
-                    'p-panelmenu-item-link flex items-center cursor-pointer no-underline p-2',
+                    'p-panelmenu-item-link flex items-center cursor-pointer no-underline px-3 py-2',
                     { 'font-bold! text-muted-color': item.active },
                 ]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -49,13 +56,16 @@ defineExpose({ el: childRef });
                 <span>{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
                 :class="[
-                    'flex items-center cursor-pointer no-underline p-2',
+                    'flex items-center cursor-pointer no-underline px-3 py-2',
                     hasSubmenu ? 'p-panelmenu-header-link' : 'p-panelmenu-item-link',
                 ]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"

resources/js/components/primevue/menu/TabMenu.vue

@@ -49,8 +49,11 @@ defineExpose({
                     :value="item.route"
                     :class="[
                         'flex items-center gap-2 hover:text-color',
-                        item.active ? 'p-tab-active' : 'text-muted-color'
+                        item.active ? 'p-tab-active' : 'text-muted-color',
+                        item.class
                     ]"
+                    :style="item.style"
+                    :aria-disabled="item.disabled === true"
                 >
                     <i
                         v-if="item.icon"

resources/js/components/primevue/menu/TieredMenu.vue

@@ -35,9 +35,12 @@ defineExpose({
         </template>
         <template #item="{ item, props, hasSubmenu }">
             <InertiaLink
-                v-if="item.route"
+                v-if="item.visible !== false && item.route"
                 :href="item.route"
-                class="p-tieredmenu-item-link"
+                :target="item.target"
+                :class="['p-tieredmenu-item-link', item.class]"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
                 custom
             >
                 <i
@@ -53,10 +56,13 @@ defineExpose({
                 <span class="p-tieredmenu-item-label">{{ item.label }}</span>
             </InertiaLink>
             <a
-                v-else
+                v-else-if="item.visible !== false"
+                v-bind="props.action"
                 :href="item.url"
                 :target="item.target"
-                v-bind="props.action"
+                :class="item.class"
+                :style="item.style"
+                :aria-disabled="item.disabled === true"
             >
                 <i
                     v-if="item.icon"