Refactor #5592 - Breadcrumb, ContextMenu, Dock

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -57,15 +57,15 @@ export interface BreadcrumbPassThroughOptions {
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    menu?: BreadcrumbPassThroughOptionType;
+    list?: BreadcrumbPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the  item's DOM element.
      */
-    menuitem?: BreadcrumbPassThroughOptionType;
+    item?: BreadcrumbPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: BreadcrumbPassThroughOptionType;
+    itemLink?: BreadcrumbPassThroughOptionType;
     /**
      * Used to pass attributes to the icon's DOM element.
      */

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,7 +1,7 @@
 <template>
     <nav :class="cx('root')" v-bind="ptmi('root')">
-        <ol :class="cx('menu')" v-bind="ptm('menu')">
-            <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
+        <ol :class="cx('list')" v-bind="ptm('list')">
+            <BreadcrumbItem v-if="home" :item="home" :class="cx('homeItem')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('homeItem')" />
             <template v-for="(item, i) of model" :key="item.label + '_' + i">
                 <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
                     <slot name="separator">

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -1,7 +1,7 @@
 <template>
-    <li v-if="visible()" :class="[cx('menuitem'), item.class]" v-bind="ptm('menuitem', ptmOptions)">
+    <li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
         <template v-if="!templates.item">
-            <a :href="item.url || '#'" :class="cx('action')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action', ptmOptions)">
+            <a :href="item.url || '#'" :class="cx('itemLink')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('itemLink', ptmOptions)">
                 <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon', ptmOptions)" />
                 <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
                 <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
@@ -62,11 +62,11 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         'aria-current': this.isCurrentUrl(),
                         onClick: ($event) => this.onClick($event)
                     },
-                    this.ptm('action', this.ptmOptions)
+                    this.ptm('itemLink', this.ptmOptions)
                 ),
                 icon: mergeProps(
                     {

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -2,11 +2,11 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: 'p-breadcrumb p-component',
-    menu: 'p-breadcrumb-list',
-    home: 'p-breadcrumb-home-item',
+    list: 'p-breadcrumb-list',
+    homeItem: 'p-breadcrumb-home-item',
     separator: 'p-breadcrumb-separator',
-    menuitem: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
-    action: 'p-breadcrumb-item-link',
+    item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
+    itemLink: 'p-breadcrumb-item-link',
     icon: 'p-breadcrumb-item-icon',
     label: 'p-breadcrumb-item-label'
 };

components/lib/contextmenu/ContextMenu.d.ts

@@ -62,29 +62,29 @@ export interface ContextMenuPassThroughOptions {
      */
     root?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: ContextMenuPassThroughOptionType;
+    rootList?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: ContextMenuPassThroughOptionType;
+    item?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: ContextMenuPassThroughOptionType;
+    itemContent?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: ContextMenuPassThroughOptionType;
+    itemLink?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: ContextMenuPassThroughOptionType;
+    itemIcon?: ContextMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: ContextMenuPassThroughOptionType;
+    itemLabel?: ContextMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu icon's DOM element.
      */

components/lib/contextmenu/ContextMenu.vue

@@ -5,7 +5,7 @@
                 <ContextMenuSub
                     :ref="listRef"
                     :id="id + '_list'"
-                    :class="cx('menu')"
+                    :class="cx('rootList')"
                     role="menubar"
                     :root="true"
                     :tabindex="tabindex"
@@ -319,7 +319,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.list, `li[id="${`${this.focusedItemIdx}`}"]`);
-                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="itemlink"]');
 
                 anchorElement ? anchorElement.click() : element && element.click();
                 const processedItem = this.visibleItems[this.focusedItemInfo.index];

components/lib/contextmenu/ContextMenuSub.vue

@@ -1,12 +1,12 @@
 <template>
     <transition name="p-contextmenusub" @enter="onEnter" v-bind="ptm('menu.transition')">
-        <ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('menu')">
+        <ul v-if="root ? true : visible" ref="container" :tabindex="tabindex" v-bind="ptm('rootList')">
             <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
                 <li
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                    :class="[cx('item', { processedItem }), getItemProp(processedItem, 'class')]"
                     role="menuitem"
                     :aria-label="getItemLabel(processedItem)"
                     :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -15,23 +15,23 @@
                     :aria-level="level + 1"
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
-                    v-bind="getPTOptions('menuitem', processedItem, index)"
+                    v-bind="getPTOptions('item', processedItem, index)"
                     :data-p-highlight="isItemActive(processedItem)"
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
                     <div
-                        :class="cx('content')"
+                        :class="cx('itemContent')"
                         @click="onItemClick($event, processedItem)"
                         @mouseenter="onItemMouseEnter($event, processedItem)"
                         @mousemove="onItemMouseMove($event, processedItem)"
-                        v-bind="getPTOptions('content', processedItem, index)"
+                        v-bind="getPTOptions('itemContent', processedItem, index)"
                     >
                         <template v-if="!templates.item">
-                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('icon', processedItem, index)" />
-                                <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('itemLink')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink', processedItem, index)">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions('itemIcon', processedItem, index)" />
+                                <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
                                 <template v-if="getItemProp(processedItem, 'items')">
                                     <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
                                     <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions('submenuicon', processedItem, index)" />
@@ -189,23 +189,23 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions('action', processedItem, index)
+                    this.getPTOptions('itemLink', processedItem, index)
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions('icon', processedItem, index)
+                    this.getPTOptions('itemIcon', processedItem, index)
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions('label', processedItem, index)
+                    this.getPTOptions('itemLabel', processedItem, index)
                 ),
                 submenuicon: mergeProps(
                     {

components/lib/contextmenu/style/ContextMenuStyle.js

@@ -7,19 +7,19 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    menu: 'p-contextmenu-root-list',
-    menuitem: ({ instance, processedItem }) => [
+    rootList: 'p-contextmenu-root-list',
+    item: ({ instance, processedItem }) => [
         'p-contextmenu-item',
         {
             'p-contextmenu-item-active': instance.isItemActive(processedItem),
             'p-focus': instance.isItemFocused(processedItem),
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-contextmenu-item-content',
-    action: 'p-contextmenu-item-link',
-    icon: 'p-contextmenu-item-icon',
-    label: 'p-contextmenu-item-label',
+    itemContent: 'p-contextmenu-item-content',
+    itemLink: 'p-contextmenu-item-link',
+    itemIcon: 'p-contextmenu-item-icon',
+    itemLabel: 'p-contextmenu-item-label',
     submenuIcon: 'p-contextmenu-submenu-icon',
     submenu: 'p-contextmenu-submenu',
     separator: 'p-contextmenu-separator'

components/lib/dock/Dock.d.ts

@@ -59,29 +59,29 @@ export interface DockPassThroughOptions {
      */
     root?: DockPassThroughOptionType;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the list container's DOM element.
      */
-    container?: DockPassThroughOptionType;
+    listContainer?: DockPassThroughOptionType;
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    menu?: DockPassThroughOptionType;
+    list?: DockPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the  item's DOM element.
      */
-    menuitem?: DockPassThroughOptionType;
+    item?: DockPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: DockPassThroughOptionType;
+    itemContent?: DockPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: DockPassThroughOptionType;
+    itemLink?: DockPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: DockPassThroughOptionType;
+    itemIcon?: DockPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}