primevue 3.26.1 → 3.28.0

package/terminal/terminal.js

@@ -1,13 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.terminal = (function (TerminalService, vue) {
+this.primevue.terminal = (function (BaseComponent, TerminalService, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var TerminalService__default = /*#__PURE__*/_interopDefaultLegacy(TerminalService);
 
     var script = {
         name: 'Terminal',
+        extends: BaseComponent__default["default"],
         props: {
             welcomeMessage: {
                 type: String,
@@ -51,50 +53,42 @@ this.primevue.terminal = (function (TerminalService, vue) {
         }
     };
 
-    const _hoisted_1 = { key: 0 };
-    const _hoisted_2 = { class: "p-terminal-content" };
-    const _hoisted_3 = { class: "p-terminal-prompt" };
-    const _hoisted_4 = { class: "p-terminal-command" };
-    const _hoisted_5 = {
-      class: "p-terminal-response",
-      "aria-live": "polite"
-    };
-    const _hoisted_6 = { class: "p-terminal-prompt-container" };
-    const _hoisted_7 = { class: "p-terminal-prompt" };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: "p-terminal p-component",
         onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args)))
-      }, [
+      }, _ctx.ptm('root')), [
         ($props.welcomeMessage)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString($props.welcomeMessage), 1))
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('welcomeMessage'))), vue.toDisplayString($props.welcomeMessage), 17))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-content" }, _ctx.ptm('content')), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.commands, (command, i) => {
-            return (vue.openBlock(), vue.createElementBlock("div", {
+            return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: command.text + i.toString()
-            }, [
-              vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($props.prompt), 1),
-              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(command.text), 1),
-              vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(command.response), 1)
-            ]))
+            }, _ctx.ptm('commands')), [
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-command" }, _ctx.ptm('command')), vue.toDisplayString(command.text), 17),
+              vue.createElementVNode("div", vue.mergeProps({
+                class: "p-terminal-response",
+                "aria-live": "polite"
+              }, _ctx.ptm('response')), vue.toDisplayString(command.response), 17)
+            ], 16))
           }), 128))
-        ]),
-        vue.createElementVNode("div", _hoisted_6, [
-          vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($props.prompt), 1),
-          vue.withDirectives(vue.createElementVNode("input", {
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-prompt-container" }, _ctx.ptm('container')), [
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.commandText) = $event)),
             type: "text",
             class: "p-terminal-input",
             autocomplete: "off",
             onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-          }, null, 544), [
+          }, _ctx.ptm('commandText')), null, 16), [
             [vue.vModelText, $data.commandText]
           ])
-        ])
-      ]))
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -131,4 +125,4 @@ this.primevue.terminal = (function (TerminalService, vue) {
 
     return script;
 
-})(primevue.terminalservice, Vue);
+})(primevue.basecomponent, primevue.terminalservice, Vue);

package/terminal/terminal.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.terminal=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i={name:"Terminal",props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){o.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){o.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),o.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};const r={key:0},l={class:"p-terminal-content"},s={class:"p-terminal-prompt"},a={class:"p-terminal-command"},m={class:"p-terminal-response","aria-live":"polite"},c={class:"p-terminal-prompt-container"},p={class:"p-terminal-prompt"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),i.render=function(e,n,o,i,d,u){return t.openBlock(),t.createElementBlock("div",{class:"p-terminal p-component",onClick:n[2]||(n[2]=(...e)=>u.onClick&&u.onClick(...e))},[o.welcomeMessage?(t.openBlock(),t.createElementBlock("div",r,t.toDisplayString(o.welcomeMessage),1)):t.createCommentVNode("",!0),t.createElementVNode("div",l,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.commands,((e,n)=>(t.openBlock(),t.createElementBlock("div",{key:e.text+n.toString()},[t.createElementVNode("span",s,t.toDisplayString(o.prompt),1),t.createElementVNode("span",a,t.toDisplayString(e.text),1),t.createElementVNode("div",m,t.toDisplayString(e.response),1)])))),128))]),t.createElementVNode("div",c,[t.createElementVNode("span",p,t.toDisplayString(o.prompt),1),t.withDirectives(t.createElementVNode("input",{ref:"input","onUpdate:modelValue":n[0]||(n[0]=e=>d.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:n[1]||(n[1]=(...e)=>u.onKeydown&&u.onKeydown(...e))},null,544),[[t.vModelText,d.commandText]])])])},i}(primevue.terminalservice,Vue);
+this.primevue=this.primevue||{},this.primevue.terminal=function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),m=o(t),s={name:"Terminal",extends:r.default,props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){m.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){m.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),m.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),s.render=function(e,t,o,r,m,s){return n.openBlock(),n.createElementBlock("div",n.mergeProps({class:"p-terminal p-component",onClick:t[2]||(t[2]=(...e)=>s.onClick&&s.onClick(...e))},e.ptm("root")),[o.welcomeMessage?(n.openBlock(),n.createElementBlock("div",n.normalizeProps(n.mergeProps({key:0},e.ptm("welcomeMessage"))),n.toDisplayString(o.welcomeMessage),17)):n.createCommentVNode("",!0),n.createElementVNode("div",n.mergeProps({class:"p-terminal-content"},e.ptm("content")),[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(m.commands,((t,r)=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:t.text+r.toString()},e.ptm("commands")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.createElementVNode("span",n.mergeProps({class:"p-terminal-command"},e.ptm("command")),n.toDisplayString(t.text),17),n.createElementVNode("div",n.mergeProps({class:"p-terminal-response","aria-live":"polite"},e.ptm("response")),n.toDisplayString(t.response),17)],16)))),128))],16),n.createElementVNode("div",n.mergeProps({class:"p-terminal-prompt-container"},e.ptm("container")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.withDirectives(n.createElementVNode("input",n.mergeProps({ref:"input","onUpdate:modelValue":t[0]||(t[0]=e=>m.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:t[1]||(t[1]=(...e)=>s.onKeydown&&s.onKeydown(...e))},e.ptm("commandText")),null,16),[[n.vModelText,m.commandText]])],16)],16)},s}(primevue.basecomponent,primevue.terminalservice,Vue);

package/tieredmenu/TieredMenu.d.ts

@@ -11,6 +11,131 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttributes | ((options: TieredMenuPassThroughMethodOptions) => TieredMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TieredMenuPassThroughMethodOptions {
+    props: TieredMenuProps;
+    state: TieredMenuState;
+    context: TieredMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TieredMenuProps.pt}
+ */
+export interface TieredMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TieredMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TieredMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface TieredMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in TieredMenu component.
+ */
+export interface TieredMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    focusedItemInfo: TieredMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    activeItemPath: TieredMenuFocusedItemInfo[];
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines current options in TieredMenu component.
+ */
+export interface TieredMenuContext {
+    /**
+     * 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 TieredMenuMenu component.
  */
@@ -61,6 +186,11 @@ export interface TieredMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TieredMenuPassThroughOptions}
+     */
+    pt?: TieredMenuPassThroughOptions;
 }
 
 /**
@@ -77,6 +207,29 @@ export interface TieredMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom submenu icon template.
+     */
+    submenuicon(scope: {
+        /**
+         * Whether item is active
+         */
+        active: boolean;
+    }): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

package/tieredmenu/TieredMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
                 <TieredMenuSub
                     :ref="menubarRef"
                     :id="id + '_list'"
@@ -16,10 +16,11 @@
                     :menuId="id"
                     :focusedItemId="focused ? focusedItemId : undefined"
                     :items="processedItems"
-                    :template="$slots.item"
+                    :templates="$slots"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :level="0"
+                    :pt="pt"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -39,6 +41,7 @@ import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
     name: 'TieredMenu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
     props: {

package/tieredmenu/TieredMenuSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul>
+    <ul v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -14,22 +14,37 @@
                 :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="p-submenu-icon pi pi-angle-right"></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="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <AngleRightIcon v-else 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>
                 <TieredMenuSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -39,25 +54,36 @@
                     :menuId="menuId"
                     :focusedItemId="focusedItemId"
                     :items="processedItem.items"
-                    :template="template"
+                    :templates="templates"
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :level="level + 1"
+                    :pt="pt"
                     @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>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'TieredMenuSub',
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -76,8 +102,8 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         activeItemPath: {
@@ -102,6 +128,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);
         },
@@ -160,6 +194,9 @@ export default {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon
+    },
     directives: {
         ripple: Ripple
     }