primevue 3.27.0 → 3.28.0

package/contextmenu/ContextMenu.d.ts

@@ -12,6 +12,136 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ContextMenuPassThroughMethodOptions {
+    props: ContextMenuProps;
+    state: ContextMenuState;
+    context: ContextMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ContextMenuProps.pt}
+ */
+export interface ContextMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuicon?: ContextMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: ContextMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ContextMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface ContextMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in ContextMenu component.
+ */
+export interface ContextMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {ContextMenuFocusedItemInfo}
+     */
+    focusedItemInfo: ContextMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {ContextMenuFocusedItemInfo}
+     */
+    activeItemPath: ContextMenuFocusedItemInfo[];
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current submenu visible state as a boolean.
+     * @defaultValue false
+     */
+    submenuVisible: boolean;
+}
+
+/**
+ * Defines current options in ContextMenu component.
+ */
+export interface ContextMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in ContextMenu component.
  */
@@ -57,6 +187,11 @@ export interface ContextMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ContextMenuPassThroughOptions}
+     */
+    pt?: ContextMenuPassThroughOptions;
 }
 
 /**

package/contextmenu/ContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :class="containerClass" v-bind="{ ...$attrs, ...ptm('root') }">
                 <ContextMenuSub
                     :ref="listRef"
                     :id="id + '_list'"
@@ -21,6 +21,7 @@
                     :aria-label="ariaLabel"
                     :level="0"
                     :visible="submenuVisible"
+                    :pt="pt"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -33,12 +34,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Portal from 'primevue/portal';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import ContextMenuSub from './ContextMenuSub.vue';
 
 export default {
     name: 'ContextMenu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'show', 'hide'],
     props: {

package/contextmenu/ContextMenuSub.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter">
-        <ul v-if="root ? true : visible" ref="container">
+        <ul v-if="root ? true : visible" ref="container" v-bind="ptm('menu')">
             <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
                 <li
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -15,23 +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)">
+                    <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)">
+                                <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)" />
-                                    <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                                    <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">
+                            <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)" />
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                                <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="getItemProp(processedItem, 'items')">
                                     <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" class="p-submenu-icon" />
-                                    <AngleRightIcon v-else class="p-submenu-icon" />
+                                    <AngleRightIcon v-else class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuicon')" />
                                 </template>
                             </a>
                         </template>
@@ -49,24 +67,34 @@
                         :activeItemPath="activeItemPath"
                         :exact="exact"
                         :level="level + 1"
+                        :pt="pt"
                         :visible="isItemActive(processedItem) && isItemGroup(processedItem)"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
                     />
                 </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>
     </transition>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'ContextMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         items: {
@@ -119,6 +147,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 this.activeItemPath.some((path) => path.key === processedItem.key);
         },

package/contextmenu/contextmenu.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Portal = require('primevue/portal');
 var utils = require('primevue/utils');
 var AngleRightIcon = require('primevue/icons/angleright');
@@ -8,12 +9,14 @@ 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 Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$1 = {
     name: 'ContextMenuSub',
+    extends: BaseComponent__default["default"],
     emits: ['item-click', 'item-mouseenter'],
     props: {
         items: {
@@ -66,6 +69,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 this.activeItemPath.some((path) => path.key === processedItem.key);
         },
@@ -150,17 +161,11 @@ var script$1 = {
     }
 };
 
-const _hoisted_1 = {
-  key: 0,
-  ref: "container"
-};
-const _hoisted_2 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset"];
-const _hoisted_3 = ["onClick", "onMouseenter"];
-const _hoisted_4 = ["href", "onClick"];
-const _hoisted_5 = { class: "p-menuitem-text" };
-const _hoisted_6 = ["href", "target"];
-const _hoisted_7 = { class: "p-menuitem-text" };
-const _hoisted_8 = ["id"];
+const _hoisted_1 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset"];
+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");
@@ -174,17 +179,20 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, {
     default: vue.withCtx(() => [
       ($props.root ? true : $props.visible)
-        ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_1, [
+        ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
+            key: 0,
+            ref: "container"
+          }, _ctx.ptm('menu')), [
             (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,
@@ -193,12 +201,12 @@ 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))
-                      }, [
+                      }, $options.getPTOptions(processedItem, 'content')), [
                         (!$props.templates.item)
                           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                               ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
@@ -208,13 +216,13 @@ 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.getPTOptions(processedItem, 'action')), [
                                         ($props.templates.itemicon)
                                           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                               key: 0,
@@ -222,26 +230,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                               class: vue.normalizeClass($options.getItemIconClass(processedItem))
                                             }, null, 8, ["item", "class"]))
                                           : ($options.getItemProp(processedItem, 'icon'))
-                                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                                            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                                 key: 1,
-                                                class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                              }, null, 2))
+                                                class: $options.getItemIconClass(processedItem)
+                                              }, $options.getPTOptions(processedItem, 'icon')), null, 16))
                                             : vue.createCommentVNode("", true),
-                                        vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
-                                      ], 10, _hoisted_4)), [
+                                        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.getPTOptions(processedItem, 'action')), [
                                     ($props.templates.itemicon)
                                       ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                           key: 0,
@@ -249,12 +257,12 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                           class: vue.normalizeClass($options.getItemIconClass(processedItem))
                                         }, null, 8, ["item", "class"]))
                                       : ($options.getItemProp(processedItem, 'icon'))
-                                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                             key: 1,
-                                            class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                          }, null, 2))
+                                            class: $options.getItemIconClass(processedItem)
+                                          }, $options.getPTOptions(processedItem, 'icon')), null, 16))
                                         : vue.createCommentVNode("", true),
-                                    vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
+                                    vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions(processedItem, 'label')), vue.toDisplayString($options.getItemLabel(processedItem)), 17),
                                     ($options.getItemProp(processedItem, 'items'))
                                       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                                           ($props.templates.submenuicon)
@@ -263,13 +271,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                                 active: $options.isItemActive(processedItem),
                                                 class: "p-submenu-icon"
                                               }, null, 8, ["active"]))
-                                            : (vue.openBlock(), vue.createBlock(_component_AngleRightIcon, {
+                                            : (vue.openBlock(), vue.createBlock(_component_AngleRightIcon, vue.mergeProps({
                                                 key: 1,
                                                 class: "p-submenu-icon"
-                                              }))
+                                              }, $options.getPTOptions(processedItem, 'submenuicon')), null, 16))
                                         ], 64))
                                       : vue.createCommentVNode("", true)
-                                  ], 10, _hoisted_6)), [
+                                  ], 16, _hoisted_4)), [
                                     [_directive_ripple]
                                   ])
                             ], 64))
@@ -277,7 +285,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               key: 1,
                               item: processedItem.item
                             }, null, 8, ["item"]))
-                      ], 40, _hoisted_3),
+                      ], 16, _hoisted_2),
                       ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
                         ? (vue.openBlock(), vue.createBlock(_component_ContextMenuSub, {
                             key: 0,
@@ -291,25 +299,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             activeItemPath: $props.activeItemPath,
                             exact: $props.exact,
                             level: $props.level + 1,
+                            pt: _ctx.pt,
                             visible: $options.isItemActive(processedItem) && $options.isItemGroup(processedItem),
                             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", "items", "templates", "activeItemPath", "exact", "level", "visible"]))
+                          }, null, 8, ["id", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "level", "pt", "visible"]))
                         : vue.createCommentVNode("", true)
-                    ], 14, _hoisted_2))
+                    ], 16, _hoisted_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_8))
+                    }, _ctx.ptm('separator')), null, 16, _hoisted_5))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
-          ], 512))
+          ], 16))
         : vue.createCommentVNode("", true)
     ]),
     _: 1
@@ -320,6 +329,7 @@ script$1.render = render$1;
 
 var script = {
     name: 'ContextMenu',
+    extends: BaseComponent__default["default"],
     inheritAttrs: false,
     emits: ['focus', 'blur', 'show', 'hide'],
     props: {
@@ -927,7 +937,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: 0,
                 ref: $options.containerRef,
                 class: $options.containerClass
-              }, _ctx.$attrs), [
+              }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                 vue.createVNode(_component_ContextMenuSub, {
                   ref: $options.listRef,
                   id: $data.id + '_list',
@@ -947,12 +957,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   "aria-label": _ctx.ariaLabel,
                   level: 0,
                   visible: $data.submenuVisible,
+                  pt: _ctx.pt,
                   onFocus: $options.onFocus,
                   onBlur: $options.onBlur,
                   onKeydown: $options.onKeyDown,
                   onItemClick: $options.onItemClick,
                   onItemMouseenter: $options.onItemMouseEnter
-                }, null, 8, ["id", "tabindex", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "aria-labelledby", "aria-label", "visible", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
+                }, null, 8, ["id", "tabindex", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "aria-labelledby", "aria-label", "visible", "pt", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
               ], 16))
             : vue.createCommentVNode("", true)
         ]),