Fixed #4760 - TieredMenu: New start and end templating

primefaces · Nov 6, 2023 · 0b17131 · 0b17131
1 parent 3164234
commit 0b17131
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -322,6 +322,14 @@ export interface TieredMenuSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
 }
 
 /**

diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
@@ -2,6 +2,9 @@
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
             <div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
+                <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
+                    <slot name="start"></slot>
+                </div>
                 <TieredMenuSub
                     :ref="menubarRef"
                     :id="id + '_list'"
@@ -27,6 +30,9 @@
                     @item-click="onItemClick"
                     @item-mouseenter="onItemMouseEnter"
                 />
+                <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
+                    <slot name="end"></slot>
+                </div>
             </div>
         </transition>
     </Portal>

diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -57,6 +57,7 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
+    start: 'p-tieredmenu-start',
     menu: 'p-tieredmenu-root-list',
     menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
@@ -78,7 +79,8 @@ const classes = {
     text: 'p-menuitem-text',
     submenuIcon: 'p-submenu-icon',
     submenu: 'p-submenu-list',
-    separator: 'p-menuitem-separator'
+    separator: 'p-menuitem-separator',
+    end: 'p-tieredmenu-end'
 };
 
 export default BaseStyle.extend({