Refactor #5592 - For Menubar, PanelMenu, Steps, TabMenu, TieredMenu

primefaces · Apr 30, 2024 · 37eb456 · 37eb456
1 parent aec93e5
commit 37eb456
Show file tree

Hide file tree

Showing 20 changed files with 175 additions and 169 deletions.
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
@@ -59,29 +59,29 @@ export interface MenubarPassThroughOptions {
      */
     root?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: MenubarPassThroughOptionType;
+    rootList?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the list item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: MenubarPassThroughOptionType;
+    item?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: MenubarPassThroughOptionType;
+    itemContent?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: MenubarPassThroughOptionType;
+    itemLink?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: MenubarPassThroughOptionType;
+    itemIcon?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: MenubarPassThroughOptionType;
+    itemLabel?: MenubarPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu icon's DOM element.
      */

diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
@@ -404,7 +404,7 @@ export default {
         onEnterKey(event) {
             if (this.focusedItemInfo.index !== -1) {
                 const element = DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
-                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();
 

diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('rootList') : cx('submenu')" v-bind="level === 0 ? ptm('rootList') : ptm('submenu')">
         <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"
@@ -14,17 +14,23 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                v-bind="getPTOptions(processedItem, index, 'menuitem')"
+                v-bind="getPTOptions(processedItem, index, 'item')"
                 :data-p-highlight="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                <div
+                    :class="cx('itemContent')"
+                    @click="onItemClick($event, processedItem)"
+                    @mouseenter="onItemMouseEnter($event, processedItem)"
+                    @mousemove="onItemMouseMove($event, processedItem)"
+                    v-bind="getPTOptions(processedItem, index, 'itemContent')"
+                >
                     <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(processedItem, index, 'action')">
-                            <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(processedItem, index, 'icon')" />
-                            <span :id="getItemLabelId(processedItem)" :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ 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(processedItem, index, 'itemLink')">
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('itemIcon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('itemIcon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'itemIcon')" />
+                            <span :id="getItemLabelId(processedItem)" :class="cx('itemLabel')" v-bind="getPTOptions(processedItem, index, 'itemLabel')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
                                 <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
                                 <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
@@ -179,23 +185,23 @@ export default {
             return {
                 action: mergeProps(
                     {
-                        class: this.cx('action'),
+                        class: this.cx('itemLink'),
                         tabindex: -1,
                         'aria-hidden': true
                     },
-                    this.getPTOptions(processedItem, index, 'action')
+                    this.getPTOptions(processedItem, index, 'itemLink')
                 ),
                 icon: mergeProps(
                     {
-                        class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
+                        class: [this.cx('itemIcon'), this.getItemProp(processedItem, 'icon')]
                     },
-                    this.getPTOptions(processedItem, index, 'icon')
+                    this.getPTOptions(processedItem, index, 'itemIcon')
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions(processedItem, index, 'label')
+                    this.getPTOptions(processedItem, index, 'itemLabel')
                 ),
                 submenuicon: mergeProps(
                     {

diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
@@ -14,19 +14,19 @@ const classes = {
     ],
     start: 'p-menubar-start',
     button: 'p-menubar-button',
-    menu: 'p-menubar-root-list',
-    menuitem: ({ instance, processedItem }) => [
+    rootList: 'p-menubar-root-list',
+    item: ({ instance, processedItem }) => [
         'p-menubar-item',
         {
             'p-menubar-item-active': instance.isItemActive(processedItem),
             'p-focus': instance.isItemFocused(processedItem),
             'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    content: 'p-menubar-item-content',
-    action: 'p-menubar-item-link',
-    icon: 'p-menubar-item-icon',
-    label: 'p-menubar-item-label',
+    itemContent: 'p-menubar-item-content',
+    itemLink: 'p-menubar-item-link',
+    itemIcon: 'p-menubar-item-icon',
+    itemLabel: 'p-menubar-item-label',
     submenuIcon: 'p-menubar-submenu-icon',
     submenu: 'p-menubar-submenu',
     separator: 'p-menubar-separator',

diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
@@ -73,9 +73,9 @@ export interface PanelMenuPassThroughOptions {
      */
     headerContent?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the header action's DOM element.
+     * Used to pass attributes to the header link's DOM element.
      */
-    headerAction?: PanelMenuPassThroughOptionType;
+    headerLink?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenuIcon's DOM element.
      */
@@ -89,33 +89,33 @@ export interface PanelMenuPassThroughOptions {
      */
     headerLabel?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggleable content's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    toggleableContent?: PanelMenuPassThroughOptionType;
+    contentContainer?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the menu content's DOM element.
+     * Used to pass attributes to the content's DOM element.
      */
-    menuContent?: PanelMenuPassThroughOptionType;
+    content?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the list's DOM element.
+     * Used to pass attributes to the root list's DOM element.
      */
-    menu?: PanelMenuPassThroughOptionType;
+    rootList?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the list item's DOM element.
      */
     menuitem?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: PanelMenuPassThroughOptionType;
+    itemContent?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item link's DOM element.
      */
-    action?: PanelMenuPassThroughOptionType;
+    itemLink?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: PanelMenuPassThroughOptionType;
+    itemIcon?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the label's DOM element.
      */

diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
@@ -19,7 +19,7 @@
                 >
                     <div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
                         <template v-if="!$slots.item">
-                            <a :href="getItemProp(item, 'url')" :class="cx('headerAction')" :tabindex="-1" v-bind="getPTOptions('headerAction', item, index)">
+                            <a :href="getItemProp(item, 'url')" :class="cx('headerLink')" :tabindex="-1" v-bind="getPTOptions('headerLink', item, index)">
                                 <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
                                     <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions('submenuIcon', item, index)" />
                                 </slot>
@@ -32,8 +32,8 @@
                     </div>
                 </div>
                 <transition name="p-toggleable-content" v-bind="ptm('transition')">
-                    <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="cx('menuContent')" v-bind="ptm('menuContent')">
+                    <div v-show="isItemActive(item)" :id="getContentId(index)" :class="cx('contentContainer')" role="region" :aria-labelledby="getHeaderId(index)" v-bind="ptm('contentContainer')">
+                        <div v-if="getItemProp(item, 'items')" :class="cx('content')" v-bind="ptm('content')">
                             <PanelMenuList
                                 :panelId="getPanelId(index)"
                                 :items="getItemProp(item, 'items')"
@@ -164,14 +164,14 @@ export default {
             }
         },
         onHeaderArrowDownKey(event) {
-            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
+            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : 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.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
+            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
             event.preventDefault();
@@ -185,7 +185,7 @@ export default {
             event.preventDefault();
         },
         onHeaderEnterKey(event, item) {
-            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
+            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headerlink"]');
 
             headerAction ? headerAction.click() : this.onHeaderClick(event, item);
             event.preventDefault();

diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue
@@ -1,7 +1,7 @@
 <template>
     <PanelMenuSub
         :id="panelId + '_list'"
-        :class="cx('menu')"
+        :class="cx('rootList')"
         role="tree"
         :tabindex="-1"
         :aria-activedescendant="focused ? focusedItemId : undefined"
@@ -17,7 +17,7 @@
         @item-mousemove="onItemMouseMove"
         :pt="pt"
         :unstyled="unstyled"
-        v-bind="ptm('menu')"
+        v-bind="ptm('rootList')"
     />
 </template>
 
@@ -203,7 +203,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, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
+                const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="itemlink"]') || DomHandler.findSingle(element, 'a,button'));
 
                 anchorElement ? anchorElement.click() : element && element.click();
             }