Refactor #3907 - For Menu

api-generator/components/menu.js

@@ -34,6 +34,12 @@ const MenuProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/menu/Menu.d.ts

@@ -11,6 +11,102 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((options: MenuPassThroughMethodOptions) => MenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+    props: MenuProps;
+    state: MenuState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface MenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Focused option index.
+     */
+    focusedOptionIndex: number;
+    /**
+     * Selected option index.
+     */
+    selectedOptionIndex: number;
+}
+
 /**
  * Defines valid properties in Menu component.
  */
@@ -56,6 +152,11 @@ export interface MenuProps {
      * Identifier of the underlying input element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenuPassThroughOptions}
+     */
+    pt?: MenuPassThroughOptions;
 }
 
 /**

components/lib/menu/Menu.vue

@@ -1,8 +1,8 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="containerClass" v-bind="$attrs" @click="onOverlayClick">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
-                <div v-if="$slots.start" class="p-menu-start">
+                <div v-if="$slots.start" class="p-menu-start" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
                 <ul
@@ -17,22 +17,23 @@
                     @focus="onListFocus"
                     @blur="onListBlur"
                     @keydown="onListKeyDown"
+                    v-bind="ptm('menu')"
                 >
                     <template v-for="(item, i) of model" :key="label(item) + i.toString()">
                         <template v-if="item.items && visible(item) && !item.separator">
-                            <li v-if="item.items" :id="id + '_' + i" class="p-submenu-header" role="none">
+                            <li v-if="item.items" :id="id + '_' + i" class="p-submenu-header" role="none" v-bind="ptm('submenuHeader')">
                                 <slot name="item" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
-                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
+                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
-                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="separatorClass(item)" :style="child.style" role="separator"></li>
+                                <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="separatorClass(item)" :style="child.style" role="separator" v-bind="ptm('separator')"></li>
                             </template>
                         </template>
-                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="separatorClass(item)" :style="item.style" role="separator"></li>
+                        <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="separatorClass(item)" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" />
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :templates="$slots" :exact="exact" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
                     </template>
                 </ul>
-                <div v-if="$slots.end" class="p-menu-end">
+                <div v-if="$slots.end" class="p-menu-end" v-bind="ptm('end')">
                     <slot name="end"></slot>
                 </div>
             </div>
@@ -41,6 +42,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -48,6 +50,7 @@ import Menuitem from './Menuitem.vue';
 
 export default {
     name: 'Menu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['show', 'hide', 'focus', 'blur'],
     props: {

components/lib/menu/Menuitem.vue

@@ -1,18 +1,18 @@
 <template>
-    <li v-if="visible()" :id="id" :class="containerClass()" role="menuitem" :style="item.style" :aria-label="label()" :aria-disabled="disabled()">
+    <li v-if="visible()" :id="id" :class="containerClass()" role="menuitem" :style="item.style" :aria-label="label()" :aria-disabled="disabled()" v-bind="ptm('menuitem')">
-        <div class="p-menuitem-content" @click="onItemClick($event)">
+        <div class="p-menuitem-content" @click="onItemClick($event)" v-bind="ptm('content')">
             <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
+                    <a v-ripple :href="href" :class="linkClass({ isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="ptm('action')">
                         <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
-                        <span v-else-if="item.icon" :class="iconClass" />
+                        <span v-else-if="item.icon" :class="iconClass" v-bind="ptm('icon')" />
-                        <span class="p-menuitem-text">{{ label() }}</span>
+                        <span class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true">
+                <a v-else v-ripple :href="item.url" :class="linkClass()" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="ptm('action')">
                     <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="iconClass" />
-                    <span v-else-if="item.icon" :class="iconClass" />
+                    <span v-else-if="item.icon" :class="iconClass" v-bind="ptm('icon')" />
-                    <span class="p-menuitem-text">{{ label() }}</span>
+                    <span class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
                 </a>
             </template>
             <component v-else :is="templates.item" :item="item"></component>
@@ -21,11 +21,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Menuitem',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['item-click'],
     props: {