Refactor #3965 - For PanelMenu

components/lib/panelmenu/BasePanelMenu.vue

@@ -0,0 +1,125 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-panelmenu .p-panelmenu-header-action {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+}
+
+.p-panelmenu .p-panelmenu-header-action:focus {
+    z-index: 1;
+}
+
+.p-panelmenu .p-submenu-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.p-panelmenu .p-menuitem-link {
+    display: flex;
+    align-items: center;
+    user-select: none;
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-panelmenu .p-menuitem-text {
+    line-height: 1;
+}
+`;
+
+const inlineStyles = {
+    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+};
+
+const classes = {
+    root: 'p-panelmenu p-component',
+    panel: 'p-panelmenu-panel',
+    header: ({ instance, item }) => [
+        'p-panelmenu-header',
+        {
+            'p-highlight': instance.isItemActive(item),
+            'p-disabled': instance.isItemDisabled(item)
+        }
+    ],
+    headerContent: 'p-panelmenu-header-content',
+    headerAction: ({ instance, isActive, isExactActive }) => [
+        'p-panelmenu-header-action',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': instance.exact && isExactActive
+        }
+    ],
+    headerIcon: 'p-menuitem-icon',
+    headerLabel: 'p-menuitem-text',
+    toggleableContent: 'p-toggleable-content',
+    menuContent: 'p-panelmenu-content',
+    menu: 'p-panelmenu-root-list',
+    menuitem: ({ context, processedItem }) => [
+        'p-menuitem',
+        {
+            'p-focus': context.isItemFocused(processedItem),
+            'p-disabled': context.isItemDisabled(processedItem)
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ context, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': context.exact && isExactActive
+        }
+    ],
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    submenu: 'p-submenu-list',
+    separator: 'p-menuitem-separator'
+};
+
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
+
+export default {
+    name: 'BasePanelMenu',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        expandedKeys: {
+            type: Object,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        }
+    },
+    css: {
+        classes,
+        inlineStyles
+    },
+    watch: {
+        isUnstyled: {
+            immediate: true,
+            handler(newValue) {
+                !newValue && loadStyle();
+            }
+        }
+    }
+};
+</script>

components/lib/panelmenu/PanelMenu.d.ts

@@ -91,6 +91,10 @@ export interface PanelMenuPassThroughOptions {
      * Uses to pass attributes to the label's DOM element.
      */
     label?: PanelMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu's DOM element.
+     */
+    submenu?: PanelMenuPassThroughOptionType;
     /**
      * Uses to pass attributes to the separator's DOM element.
      */
@@ -193,6 +197,11 @@ export interface PanelMenuProps {
      * @type {PanelMenuPassThroughOptions}
      */
     pt?: PanelMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/panelmenu/PanelMenu.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :id="id" class="p-panelmenu p-component" v-bind="ptm('root')">
+    <div :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="panelmenu">
         <template v-for="(item, index) of model" :key="getPanelKey(index)">
-            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="getPanelClass(item)" v-bind="ptm('panel')">
+            <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
                 <div
                     :id="getHeaderId(index)"
-                    :class="getHeaderClass(item)"
+                    :class="[cx('header', { item }), getItemProp(item, 'headerClass')]"
                     :tabindex="isItemDisabled(item) ? -1 : tabindex"
                     role="button"
                     :aria-label="getItemLabel(item)"
@@ -14,31 +14,33 @@
                     @click="onHeaderClick($event, item)"
                     @keydown="onHeaderKeyDown($event, item)"
                     v-bind="getPTOptions(item, 'header')"
+                    :data-p-highlight="isItemActive(item)"
+                    :data-p-disabled="isItemDisabled(item)"
                 >
-                    <div class="p-panelmenu-header-content" v-bind="getPTOptions(item, 'headerContent')">
+                    <div :class="cx('headerContent')" v-bind="getPTOptions(item, 'headerContent')">
                         <template v-if="!$slots.item">
                             <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
-                                <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
+                                <a :href="href" :class="cx('headerAction', { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)" v-bind="getPTOptions(item, 'headerAction')">
-                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" />
-                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                    <span v-else-if="getItemProp(item, 'icon')" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" v-bind="getPTOptions(item, 'headerIcon')" />
-                                    <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
+                                    <span :class="cx('headerLabel')" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
+                            <a v-else :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions(item, 'headerAction')">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
-                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(item, 'submenuIcon')" />
+                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(item, 'submenuIcon')" />
                                 </slot>
-                                <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" />
-                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" v-bind="getPTOptions(item, 'headerIcon')" />
+                                <span v-else-if="getItemProp(item, 'icon')" :class="[cx('headerIcon'), getItemProp(item, 'icon')]" v-bind="getPTOptions(item, 'headerIcon')" />
-                                <span class="p-menuitem-text" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
+                                <span :class="cx('headerLabel')" v-bind="getPTOptions(item, 'headerLabel')">{{ getItemLabel(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item"></component>
                     </div>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('toggleableContent')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('toggleableContent')">
-                        <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content" v-bind="ptm('menuContent')">
+                        <div v-if="getItemProp(item, 'items')" :class="cx('menuContent')" v-bind="ptm('menuContent')">
                             <PanelMenuList
                                 :panelId="getPanelId(index)"
                                 :items="getItemProp(item, 'items')"
@@ -58,34 +60,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import BasePanelMenu from './BasePanelMenu.vue';
 import PanelMenuList from './PanelMenuList.vue';
 
 export default {
     name: 'PanelMenu',
-    extends: BaseComponent,
+    extends: BasePanelMenu,
     emits: ['update:expandedKeys', 'panel-open', 'panel-close'],
-    props: {
-        model: {
-            type: Array,
-            default: null
-        },
-        expandedKeys: {
-            type: Object,
-            default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        }
-    },
     data() {
         return {
             id: this.$attrs.id,
@@ -181,14 +165,14 @@ export default {
             }
         },
         onHeaderArrowDownKey(event) {
-            const rootList = DomHandler.hasClass(event.currentTarget, 'p-highlight') ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '.p-panelmenu-root-list') : null;
+            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
             event.preventDefault();
         },
         onHeaderArrowUpKey(event) {
             const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
-            const rootList = DomHandler.hasClass(prevHeader, 'p-highlight') ? DomHandler.findSingle(prevHeader.nextElementSibling, '.p-panelmenu-root-list') : null;
+            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
             event.preventDefault();
@@ -202,7 +186,7 @@ export default {
             event.preventDefault();
         },
         onHeaderEnterKey(event, item) {
-            const headerAction = DomHandler.findSingle(event.currentTarget, '.p-panelmenu-header-action');
+            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
 
             headerAction ? headerAction.click() : this.onHeaderClick(event, item);
             event.preventDefault();
@@ -212,15 +196,15 @@ export default {
         },
         findNextHeader(panelElement, selfCheck = false) {
             const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
-            const headerElement = DomHandler.findSingle(nextPanelElement, '.p-panelmenu-header');
+            const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');
 
-            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findNextHeader(headerElement.parentElement) : headerElement) : null;
         },
         findPrevHeader(panelElement, selfCheck = false) {
             const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
-            const headerElement = DomHandler.findSingle(prevPanelElement, '.p-panelmenu-header');
+            const headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]');
 
-            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? this.findPrevHeader(headerElement.parentElement) : headerElement) : null;
         },
         findFirstHeader() {
             return this.findNextHeader(this.$el.firstElementChild, true);
@@ -230,8 +214,8 @@ export default {
         },
         updateFocusedHeader(event) {
             const { originalEvent, focusOnNext, selfCheck } = event;
-            const panelElement = originalEvent.currentTarget.closest('.p-panelmenu-panel');
+            const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
-            const header = selfCheck ? DomHandler.findSingle(panelElement, '.p-panelmenu-header') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
+            const header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? this.findNextHeader(panelElement) : this.findPrevHeader(panelElement);
 
             header ? this.changeFocusedHeader(originalEvent, header) : focusOnNext ? this.onHeaderHomeKey(originalEvent) : this.onHeaderEndKey(originalEvent);
         },
@@ -257,31 +241,6 @@ export default {
         },
         changeFocusedHeader(event, element) {
             element && DomHandler.focus(element);
-        },
-        getPanelClass(item) {
-            return ['p-panelmenu-panel', this.getItemProp(item, 'class')];
-        },
-        getHeaderClass(item) {
-            return [
-                'p-panelmenu-header',
-                this.getItemProp(item, 'headerClass'),
-                {
-                    'p-highlight': this.isItemActive(item),
-                    'p-disabled': this.isItemDisabled(item)
-                }
-            ];
-        },
-        getHeaderActionClass(item, routerProps) {
-            return [
-                'p-panelmenu-header-action',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
-        getHeaderIconClass(item) {
-            return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
         }
     },
     components: {
@@ -291,38 +250,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-panelmenu .p-panelmenu-header-action {
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-panelmenu .p-panelmenu-header-action:focus {
-    z-index: 1;
-}
-
-.p-panelmenu .p-submenu-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-panelmenu .p-menuitem-link {
-    display: flex;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    text-decoration: none;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-panelmenu .p-menuitem-text {
-    line-height: 1;
-}
-</style>

components/lib/panelmenu/PanelMenuList.vue

@@ -1,7 +1,7 @@
 <template>
     <PanelMenuSub
         :id="panelId + '_list'"
-        class="p-panelmenu-root-list"
+        :class="getCXOptions('menu')"
         role="tree"
         :tabindex="-1"
         :aria-activedescendant="focused ? focusedItemId : undefined"
@@ -16,17 +16,18 @@
         @keydown="onKeyDown"
         @item-toggle="onItemToggle"
         :pt="pt"
+        v-bind="ptm('menu')"
     />
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BasePanelMenu from './BasePanelMenu.vue';
 import PanelMenuSub from './PanelMenuSub.vue';
 
 export default {
     name: 'PanelMenuList',
-    extends: BaseComponent,
+    extends: BasePanelMenu,
     emits: ['item-toggle', 'header-focus'],
     props: {
         panelId: {
@@ -74,6 +75,12 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
+        getCXOptions(key, params) {
+            return this.cx(key, {
+                ...params,
+                context: this
+            });
+        },
         isItemVisible(processedItem) {
             return this.getItemProp(processedItem, 'visible') !== false;
         },
@@ -203,7 +210,7 @@ export default {
         onEnterKey(event) {
             if (ObjectUtils.isNotEmpty(this.focusedItem)) {
                 const element = DomHandler.findSingle(this.$el, `li[id="${`${this.focusedItemId}`}"]`);
-                const anchorElement = element && (DomHandler.findSingle(element, '.p-menuitem-link') || DomHandler.findSingle(element, 'a,button'));
+                const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
 
                 anchorElement ? anchorElement.click() : element && element.click();
             }
@@ -227,7 +234,7 @@ export default {
             DomHandler.focus(this.$el);
         },
         isElementInPanel(event, element) {
-            const panel = event.currentTarget.closest('.p-panelmenu-panel');
+            const panel = event.currentTarget.closest('[data-pc-section="panel"]');
 
             return panel && panel.contains(element);
         },

components/lib/panelmenu/PanelMenuSub.vue

@@ -1,11 +1,11 @@
 <template>
-    <ul class="p-submenu-list" v-bind="ptm('menu')">
+    <ul :class="getCXOptions('submenu')" :tabindex="tabindex">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
+                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
-                :class="getItemClass(processedItem)"
                 role="treeitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
@@ -13,39 +13,32 @@
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
                 v-bind="getPTOptions(processedItem, 'menuitem')"
+                :data-p-focused="isItemFocused(processedItem)"
+                :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="getCXOptions('content')" @click="onItemClick($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)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="getCXOptions('action', { 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)" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            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')"
-                        >
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(processedItem)" class="p-toggleable-content" v-bind="ptm('toggleableContent')">
+                    <div v-show="isItemActive(processedItem)" :class="getCXOptions('toggleableContent')" v-bind="ptm('toggleableContent')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -59,25 +52,32 @@
                             :exact="exact"
                             @item-toggle="onItemToggle"
                             :pt="pt"
+                            v-bind="ptm('submenu')"
                         />
                     </div>
                 </transition>
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator" v-bind="ptm('separator')"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :style="getItemProp(processedItem, 'style')"
+                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
+import BasePanelMenu from './BasePanelMenu.vue';
 
 export default {
     name: 'PanelMenuSub',
-    extends: BaseComponent,
+    extends: BasePanelMenu,
     emits: ['item-toggle'],
     props: {
         panelId: {
@@ -107,6 +107,10 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        tabindex: {
+            type: Number,
+            default: -1
         }
     },
     methods: {
@@ -130,6 +134,12 @@ export default {
                 }
             });
         },
+        getCXOptions(key, params) {
+            return this.cx(key, {
+                ...params,
+                context: this
+            });
+        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },
@@ -160,31 +170,6 @@ export default {
         },
         getAriaPosInset(index) {
             return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
-        },
-        getItemClass(processedItem) {
-            return [
-                'p-menuitem',
-                this.getItemProp(processedItem, 'class'),
-                {
-                    'p-focus': this.isItemFocused(processedItem),
-                    'p-disabled': this.isItemDisabled(processedItem)
-                }
-            ];
-        },
-        getItemActionClass(processedItem, routerProps) {
-            return [
-                'p-menuitem-link',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
-        getItemIconClass(processedItem) {
-            return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
-        },
-        getSeparatorItemClass(processedItem) {
-            return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
     components: {