primevue 3.26.1 → 3.28.0

package/megamenu/MegaMenu.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :ref="containerRef" :id="id" :class="containerClass">
-        <div v-if="$slots.start" class="p-megamenu-start">
+    <div :ref="containerRef" :id="id" :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.start" class="p-megamenu-start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <MegaMenuSub
@@ -18,28 +18,31 @@
             :focusedItemId="focused ? focusedItemId : undefined"
             :items="processedItems"
             :horizontal="horizontal"
-            :template="$slots.item"
+            :templates="$slots"
             :activeItem="activeItem"
             :exact="exact"
             :level="0"
+            :pt="pt"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
         />
-        <div v-if="$slots.end" class="p-megamenu-end">
+        <div v-if="$slots.end" class="p-megamenu-end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import MegaMenuSub from './MegaMenuSub.vue';
 
 export default {
     name: 'MegaMenu',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         model: {

package/megamenu/MegaMenuSub.vue

@@ -1,6 +1,6 @@
 <template>
-    <ul>
-        <li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation">{{ getItemLabel(submenu) }}</li>
+    <ul v-bind="ptm('menu')">
+        <li v-if="submenu" :class="getSubmenuHeaderClass(submenu)" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -15,26 +15,41 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                    <template v-if="!template">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <span v-if="isItemGroup(processedItem)" :class="getItemToggleIconClass()"></span>
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
                         </a>
                     </template>
-                    <component v-else :is="template" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
-                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel">
-                    <div class="p-megamenu-grid">
-                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)">
+                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" class="p-megamenu-panel" v-bind="ptm('panel')">
+                    <div class="p-megamenu-grid" v-bind="ptm('grid')">
+                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getColumnClass(processedItem)" v-bind="ptm('column')">
                             <MegaMenuSub
                                 v-for="submenu of col"
                                 :key="getSubListKey(submenu)"
@@ -45,9 +60,10 @@
                                 :focusedItemId="focusedItemId"
                                 :submenu="submenu"
                                 :items="submenu.items"
-                                :template="template"
+                                :templates="templates"
                                 :exact="exact"
                                 :level="level + 1"
+                                :pt="pt"
                                 @item-click="$emit('item-click', $event)"
                                 @item-mouseenter="$emit('item-mouseenter', $event)"
                             />
@@ -55,17 +71,28 @@
                     </div>
                 </div>
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getSeparatorItemClass(processedItem)"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'MegaMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -92,8 +119,8 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         activeItem: {
@@ -124,6 +151,14 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
         },
@@ -215,13 +250,14 @@ export default {
         getItemIconClass(processedItem) {
             return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getItemToggleIconClass() {
-            return ['p-submenu-icon', this.horizontal ? 'pi pi-angle-down' : 'pi pi-angle-right'];
-        },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon,
+        AngleDownIcon: AngleDownIcon
+    },
     directives: {
         ripple: Ripple
     }

package/megamenu/megamenu.cjs.js

@@ -1,15 +1,22 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var utils = require('primevue/utils');
+var AngleDownIcon = require('primevue/icons/angledown');
+var AngleRightIcon = require('primevue/icons/angleright');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var AngleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDownIcon);
+var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$1 = {
     name: 'MegaMenuSub',
+    extends: BaseComponent__default["default"],
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -36,8 +43,8 @@ var script$1 = {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         activeItem: {
@@ -68,6 +75,14 @@ var script$1 = {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getPTOptions(processedItem, key) {
+            return this.ptm(key, {
+                context: {
+                    active: this.isItemActive(processedItem),
+                    focused: this.isItemFocused(processedItem)
+                }
+            });
+        },
         isItemActive(processedItem) {
             return utils.ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
         },
@@ -159,55 +174,49 @@ var script$1 = {
         getItemIconClass(processedItem) {
             return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getItemToggleIconClass() {
-            return ['p-submenu-icon', this.horizontal ? 'pi pi-angle-down' : 'pi pi-angle-right'];
-        },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon__default["default"],
+        AngleDownIcon: AngleDownIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
 const _hoisted_1$1 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset"];
-const _hoisted_2$1 = ["onClick", "onMouseenter"];
-const _hoisted_3$1 = ["href", "onClick"];
-const _hoisted_4 = { class: "p-menuitem-text" };
-const _hoisted_5 = ["href", "target"];
-const _hoisted_6 = { class: "p-menuitem-text" };
-const _hoisted_7 = {
-  key: 0,
-  class: "p-megamenu-panel"
-};
-const _hoisted_8 = { class: "p-megamenu-grid" };
-const _hoisted_9 = ["id"];
+const _hoisted_2 = ["onClick", "onMouseenter"];
+const _hoisted_3 = ["href", "onClick"];
+const _hoisted_4 = ["href", "target"];
+const _hoisted_5 = ["id"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
   const _component_MegaMenuSub = vue.resolveComponent("MegaMenuSub", true);
   const _directive_ripple = vue.resolveDirective("ripple");
 
-  return (vue.openBlock(), vue.createElementBlock("ul", null, [
+  return (vue.openBlock(), vue.createElementBlock("ul", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('menu'))), [
     ($props.submenu)
-      ? (vue.openBlock(), vue.createElementBlock("li", {
+      ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
           key: 0,
-          class: vue.normalizeClass($options.getSubmenuHeaderClass($props.submenu)),
-          style: vue.normalizeStyle($options.getItemProp($props.submenu, 'style')),
+          class: $options.getSubmenuHeaderClass($props.submenu),
+          style: $options.getItemProp($props.submenu, 'style'),
           role: "presentation"
-        }, vue.toDisplayString($options.getItemLabel($props.submenu)), 7))
+        }, _ctx.ptm('submenuHeader')), vue.toDisplayString($options.getItemLabel($props.submenu)), 17))
       : vue.createCommentVNode("", true),
     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (processedItem, index) => {
       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: $options.getItemKey(processedItem)
       }, [
         ($options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, 'separator'))
-          ? (vue.openBlock(), vue.createElementBlock("li", {
+          ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
               key: 0,
               id: $options.getItemId(processedItem),
-              style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
-              class: vue.normalizeClass($options.getItemClass(processedItem)),
+              style: $options.getItemProp(processedItem, 'style'),
+              class: $options.getItemClass(processedItem),
               role: "menuitem",
               "aria-label": $options.getItemLabel(processedItem),
               "aria-disabled": $options.isItemDisabled(processedItem) || undefined,
@@ -216,13 +225,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
               "aria-level": $props.level + 1,
               "aria-setsize": $options.getAriaSetSize(),
               "aria-posinset": $options.getAriaPosInset(index)
-            }, [
-              vue.createElementVNode("div", {
+            }, $options.getPTOptions(processedItem, 'menuitem')), [
+              vue.createElementVNode("div", vue.mergeProps({
                 class: "p-menuitem-content",
                 onClick: $event => ($options.onItemClick($event, processedItem)),
                 onMouseenter: $event => ($options.onItemMouseEnter($event, processedItem))
-              }, [
-                (!$props.template)
+              }, $options.getPTOptions(processedItem, 'content')), [
+                (!$props.templates.item)
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                       ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -231,64 +240,87 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             custom: ""
                           }, {
                             default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                              vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                                 href: href,
-                                class: vue.normalizeClass($options.getItemActionClass(processedItem, { isActive, isExactActive })),
+                                class: $options.getItemActionClass(processedItem, { isActive, isExactActive }),
                                 tabindex: "-1",
                                 "aria-hidden": "true",
                                 onClick: $event => ($options.onItemActionClick($event, navigate))
-                              }, [
-                                ($options.getItemProp(processedItem, 'icon'))
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                              }, $options.getPTOptions(processedItem, 'action')), [
+                                ($props.templates.itemicon)
+                                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                       key: 0,
+                                      item: processedItem.item,
                                       class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                    }, null, 2))
-                                  : vue.createCommentVNode("", true),
-                                vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
-                              ], 10, _hoisted_3$1)), [
+                                    }, null, 8, ["item", "class"]))
+                                  : ($options.getItemProp(processedItem, 'icon'))
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                        key: 1,
+                                        class: $options.getItemIconClass(processedItem)
+                                      }, $options.getPTOptions(processedItem, 'icon')), null, 16))
+                                    : vue.createCommentVNode("", true),
+                                vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions(processedItem, 'label')), vue.toDisplayString($options.getItemLabel(processedItem)), 17)
+                              ], 16, _hoisted_3)), [
                                 [_directive_ripple]
                               ])
                             ]),
                             _: 2
                           }, 1032, ["to"]))
-                        : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                        : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                             key: 1,
                             href: $options.getItemProp(processedItem, 'url'),
-                            class: vue.normalizeClass($options.getItemActionClass(processedItem)),
+                            class: $options.getItemActionClass(processedItem),
                             target: $options.getItemProp(processedItem, 'target'),
                             tabindex: "-1",
                             "aria-hidden": "true"
-                          }, [
-                            ($options.getItemProp(processedItem, 'icon'))
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                          }, $options.getPTOptions(processedItem, 'action')), [
+                            ($props.templates.itemicon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                   key: 0,
+                                  item: processedItem.item,
                                   class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
+                                }, null, 8, ["item", "class"]))
+                              : ($options.getItemProp(processedItem, 'icon'))
+                                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                    key: 1,
+                                    class: $options.getItemIconClass(processedItem)
+                                  }, $options.getPTOptions(processedItem, 'icon')), null, 16))
+                                : vue.createCommentVNode("", true),
+                            vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions(processedItem, 'label')), vue.toDisplayString($options.getItemLabel(processedItem)), 17),
                             ($options.isItemGroup(processedItem))
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 1,
-                                  class: vue.normalizeClass($options.getItemToggleIconClass())
-                                }, null, 2))
+                              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                  ($props.templates.submenuicon)
+                                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), vue.mergeProps({
+                                        key: 0,
+                                        active: $options.isItemActive(processedItem),
+                                        class: "p-submenu-icon"
+                                      }, $options.getPTOptions(processedItem, 'submenuIcon')), null, 16, ["active"]))
+                                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.horizontal ? 'AngleDownIcon' : 'AngleRightIcon'), vue.mergeProps({
+                                        key: 1,
+                                        class: "p-submenu-icon"
+                                      }, $options.getPTOptions(processedItem, 'submenuIcon')), null, 16))
+                                ], 64))
                               : vue.createCommentVNode("", true)
-                          ], 10, _hoisted_5)), [
+                          ], 16, _hoisted_4)), [
                             [_directive_ripple]
                           ])
                     ], 64))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                       key: 1,
                       item: processedItem.item
                     }, null, 8, ["item"]))
-              ], 40, _hoisted_2$1),
+              ], 16, _hoisted_2),
               ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
-                    vue.createElementVNode("div", _hoisted_8, [
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: "p-megamenu-panel"
+                  }, _ctx.ptm('panel')), [
+                    vue.createElementVNode("div", vue.mergeProps({ class: "p-megamenu-grid" }, _ctx.ptm('grid')), [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(processedItem.items, (col) => {
-                        return (vue.openBlock(), vue.createElementBlock("div", {
+                        return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                           key: $options.getItemKey(col),
-                          class: vue.normalizeClass($options.getColumnClass(processedItem))
-                        }, [
+                          class: $options.getColumnClass(processedItem)
+                        }, _ctx.ptm('column')), [
                           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(col, (submenu) => {
                             return (vue.openBlock(), vue.createBlock(_component_MegaMenuSub, {
                               key: $options.getSubListKey(submenu),
@@ -299,38 +331,40 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               focusedItemId: $props.focusedItemId,
                               submenu: submenu,
                               items: submenu.items,
-                              template: $props.template,
+                              templates: $props.templates,
                               exact: $props.exact,
                               level: $props.level + 1,
+                              pt: _ctx.pt,
                               onItemClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('item-click', $event))),
                               onItemMouseenter: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-mouseenter', $event)))
-                            }, null, 8, ["id", "menuId", "focusedItemId", "submenu", "items", "template", "exact", "level"]))
+                            }, null, 8, ["id", "menuId", "focusedItemId", "submenu", "items", "templates", "exact", "level", "pt"]))
                           }), 128))
-                        ], 2))
+                        ], 16))
                       }), 128))
-                    ])
-                  ]))
+                    ], 16)
+                  ], 16))
                 : vue.createCommentVNode("", true)
-            ], 14, _hoisted_1$1))
+            ], 16, _hoisted_1$1))
           : vue.createCommentVNode("", true),
         ($options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator'))
-          ? (vue.openBlock(), vue.createElementBlock("li", {
+          ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
               key: 1,
               id: $options.getItemId(processedItem),
-              style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
-              class: vue.normalizeClass($options.getSeparatorItemClass(processedItem)),
+              style: $options.getItemProp(processedItem, 'style'),
+              class: $options.getSeparatorItemClass(processedItem),
               role: "separator"
-            }, null, 14, _hoisted_9))
+            }, _ctx.ptm('separator')), null, 16, _hoisted_5))
           : vue.createCommentVNode("", true)
       ], 64))
     }), 128))
-  ]))
+  ], 16))
 }
 
 script$1.render = render$1;
 
 var script = {
     name: 'MegaMenu',
+    extends: BaseComponent__default["default"],
     emits: ['focus', 'blur'],
     props: {
         model: {
@@ -911,27 +945,22 @@ var script = {
 };
 
 const _hoisted_1 = ["id"];
-const _hoisted_2 = {
-  key: 0,
-  class: "p-megamenu-start"
-};
-const _hoisted_3 = {
-  key: 1,
-  class: "p-megamenu-end"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_MegaMenuSub = vue.resolveComponent("MegaMenuSub");
 
-  return (vue.openBlock(), vue.createElementBlock("div", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     ref: $options.containerRef,
     id: $data.id,
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
     (_ctx.$slots.start)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
+          class: "p-megamenu-start"
+        }, _ctx.ptm('start')), [
           vue.renderSlot(_ctx.$slots, "start")
-        ]))
+        ], 16))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_MegaMenuSub, {
       ref: $options.menubarRef,
@@ -948,22 +977,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       focusedItemId: $data.focused ? $options.focusedItemId : undefined,
       items: $options.processedItems,
       horizontal: $options.horizontal,
-      template: _ctx.$slots.item,
+      templates: _ctx.$slots,
       activeItem: $data.activeItem,
       exact: $props.exact,
       level: 0,
+      pt: _ctx.pt,
       onFocus: $options.onFocus,
       onBlur: $options.onBlur,
       onKeydown: $options.onKeyDown,
       onItemClick: $options.onItemClick,
       onItemMouseenter: $options.onItemMouseEnter
-    }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-orientation", "aria-activedescendant", "menuId", "focusedItemId", "items", "horizontal", "template", "activeItem", "exact", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]),
+    }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-orientation", "aria-activedescendant", "menuId", "focusedItemId", "items", "horizontal", "templates", "activeItem", "exact", "pt", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]),
     (_ctx.$slots.end)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 1,
+          class: "p-megamenu-end"
+        }, _ctx.ptm('end')), [
           vue.renderSlot(_ctx.$slots, "end")
-        ]))
+        ], 16))
       : vue.createCommentVNode("", true)
-  ], 10, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {