Refactor #5681

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -67,13 +67,13 @@ export interface BreadcrumbPassThroughOptions {
      */
     itemLink?: BreadcrumbPassThroughOptionType;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the item icon's DOM element.
      */
-    icon?: BreadcrumbPassThroughOptionType;
+    itemIcon?: BreadcrumbPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: BreadcrumbPassThroughOptionType;
+    itemLabel?: BreadcrumbPassThroughOptionType;
     /**
      * Used to pass attributes to the separator's DOM element.
      */

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -2,9 +2,9 @@
     <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('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)" />
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon', ptmOptions)" />
-                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="ptm('icon', ptmOptions)" />
+                <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="ptm('itemIcon', ptmOptions)" />
-                <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
+                <span v-if="item.label" :class="cx('itemLabel')" v-bind="ptm('itemLabel', ptmOptions)">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>

components/lib/breadcrumb/style/BreadcrumbStyle.js

@@ -66,8 +66,8 @@ const classes = {
     separator: 'p-breadcrumb-separator',
     item: ({ instance }) => ['p-breadcrumb-item', { 'p-disabled': instance.disabled() }],
     itemLink: 'p-breadcrumb-item-link',
-    icon: 'p-breadcrumb-item-icon',
+    itemIcon: 'p-breadcrumb-item-icon',
-    label: 'p-breadcrumb-item-label'
+    itemLabel: 'p-breadcrumb-item-label'
 };
 
 export default BaseStyle.extend({

components/lib/datatable/style/DataTableStyle.js

@@ -657,7 +657,7 @@ const classes = {
     filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
     filterOperator: 'p-datatable-filter-operator',
     filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
-    filterConstraints: 'p-datatable-filter-rule-list',
+    filterRuleList: 'p-datatable-filter-rule-list',
     filterRule: 'p-datatable-filter-rule',
     filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
     filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',

components/lib/dialog/Dialog.d.ts

@@ -79,10 +79,10 @@ export interface DialogPassThroughOptions<T = any> {
      */
     headerActions?: DialogPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the maximizable Button component.
+     * Used to pass attributes to the maximize Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    maximizableButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
+    maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the close Button component.
      * @see {@link ButtonPassThroughOptions}

components/lib/dialog/Dialog.vue

@@ -14,17 +14,17 @@
                                     v-if="maximizable"
                                     :ref="maximizableRef"
                                     :autofocus="focusableMax"
-                                    :class="cx('maximizableButton')"
+                                    :class="cx('maximizeButton')"
                                     @click="maximize"
                                     :tabindex="maximizable ? '0' : '-1'"
                                     :unstyled="unstyled"
                                     v-bind="maximizeButtonProps"
-                                    :pt="ptm('maximizableButton')"
+                                    :pt="ptm('maximizeButton')"
                                     data-pc-group-section="headericon"
                                 >
                                     <template #icon="slotProps">
-                                        <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
+                                        <slot name="maximizeicon" :maximized="maximized">
-                                            <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
+                                            <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" />
                                         </slot>
                                     </template>
                                 </Button>

components/lib/dialog/style/DialogStyle.js

@@ -174,7 +174,7 @@ const classes = {
     header: 'p-dialog-header',
     title: 'p-dialog-title',
     headerActions: 'p-dialog-header-actions',
-    maximizableButton: 'p-dialog-maximize-button',
+    maximizeButton: 'p-dialog-maximize-button',
     closeButton: 'p-dialog-close-button',
     content: 'p-dialog-content',
     footer: 'p-dialog-footer'

components/lib/galleria/Galleria.d.ts

@@ -151,9 +151,9 @@ export interface GalleriaPassThroughOptions {
      */
     previousThumbnailIcon?: GalleriaPassThroughOptionType;
     /**
-     * Used to pass attributes to the thumbnail items container's DOM element.
+     * Used to pass attributes to the thumbnails viewport's DOM element.
      */
-    thumbnailItemsContainer?: GalleriaPassThroughOptionType;
+    thumbnailsViewport?: GalleriaPassThroughOptionType;
     /**
      * Used to pass attributes to the thumbnail items' DOM element.
      */

components/lib/galleria/GalleriaThumbnails.vue

@@ -14,7 +14,7 @@
             >
                 <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
             </button>
-            <div :class="cx('thumbnailItemsContainer')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailItemsContainer')">
+            <div :class="cx('thumbnailsViewport')" :style="{ height: isVertical ? contentHeight : '' }" v-bind="ptm('thumbnailsViewport')">
                 <div
                     ref="itemsContainer"
                     :class="cx('thumbnailItems')"

components/lib/galleria/style/GalleriaStyle.js

@@ -463,7 +463,7 @@ const classes = {
         }
     ],
     previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
-    thumbnailItemsContainer: 'p-galleria-thumbnails-viewport',
+    thumbnailsViewport: 'p-galleria-thumbnails-viewport',
     thumbnailItems: 'p-galleria-thumbnail-items',
     thumbnailItem: ({ instance, index, activeIndex }) => [
         'p-galleria-thumbnail-item',

components/lib/megamenu/MegaMenu.d.ts

@@ -79,9 +79,9 @@ export interface MegaMenuPassThroughOptions {
      */
     itemIcon?: MegaMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: MegaMenuPassThroughOptionType;
+    itemLabel?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu icon's DOM element.
      */

components/lib/megamenu/MegaMenuSub.vue

@@ -25,7 +25,7 @@
                         <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 :class="level === 0 ? cx('label') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'label') : getPTOptions(processedItem, index, 'submenuItemLabel')">
+                            <span :class="level === 0 ? cx('itemLabel') : cx('submenuItemLabel')" v-bind="level === 0 ? getPTOptions(processedItem, index, 'itemLabel') : getPTOptions(processedItem, index, 'submenuItemLabel')">
                                 {{ getItemLabel(processedItem) }}
                             </span>
                             <template v-if="isItemGroup(processedItem)">

components/lib/megamenu/style/MegaMenuStyle.js

@@ -316,7 +316,7 @@ const classes = {
     itemContent: 'p-megamenu-item-content',
     itemLink: 'p-megamenu-item-link',
     itemIcon: 'p-megamenu-item-icon',
-    label: 'p-megamenu-item-text',
+    itemLabel: 'p-megamenu-item-label',
     submenuIcon: 'p-megamenu-submenu-icon',
     panel: 'p-megamenu-panel',
     grid: 'p-megamenu-grid',

components/lib/menu/Menu.d.ts

@@ -85,9 +85,9 @@ export interface MenuPassThroughOptions {
      */
     itemIcon?: MenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: MenuPassThroughOptionType;
+    itemLabel?: MenuPassThroughOptionType;
     /**
      * Used to pass attributes to the separator's DOM element.
      */

components/lib/menu/Menuitem.vue

@@ -16,7 +16,7 @@
                 <a v-ripple :href="item.url" :class="cx('itemLink')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('itemLink')">
                     <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon')" />
                     <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="getPTOptions('itemIcon')" />
-                    <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
+                    <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel')">{{ label() }}</span>
                 </a>
             </template>
             <component v-else-if="templates.item" :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps(item)"></component>
@@ -96,9 +96,9 @@ export default {
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions('label')
+                    this.getPTOptions('itemLabel')
                 )
             };
         }

components/lib/menu/style/MenuStyle.js

@@ -114,7 +114,7 @@ const classes = {
     itemContent: 'p-menu-item-content',
     itemLink: 'p-menu-item-link',
     itemIcon: 'p-menu-item-icon',
-    label: 'p-menu-item-label'
+    itemLabel: 'p-menu-item-label'
 };
 
 export default BaseStyle.extend({

components/lib/panelmenu/PanelMenu.d.ts

@@ -117,9 +117,9 @@ export interface PanelMenuPassThroughOptions {
      */
     itemIcon?: PanelMenuPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the item label's DOM element.
      */
-    label?: PanelMenuPassThroughOptionType;
+    itemLabel?: PanelMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu's DOM element.
      */

components/lib/panelmenu/PanelMenuSub.vue

@@ -25,7 +25,7 @@
                             </template>
                             <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('itemIcon', processedItem, index)" />
-                            <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
                     <component
@@ -187,9 +187,9 @@ export default {
                 ),
                 label: mergeProps(
                     {
-                        class: this.cx('label')
+                        class: this.cx('itemLabel')
                     },
-                    this.getPTOptions('label', processedItem, index)
+                    this.getPTOptions('itemLabel', processedItem, index)
                 ),
                 submenuicon: mergeProps(
                     {

components/lib/panelmenu/style/PanelMenuStyle.js

@@ -156,7 +156,7 @@ const classes = {
     itemContent: 'p-panelmenu-item-content',
     itemLink: 'p-panelmenu-item-link',
     itemIcon: 'p-panelmenu-item-icon',
-    label: 'p-panelmenu-item-label',
+    itemLabel: 'p-panelmenu-item-label',
     submenuIcon: 'p-panelmenu-submenu-icon',
     submenu: 'p-panelmenu-submenu',
     separator: 'p-menuitem-separator'

components/lib/password/Password.d.ts

@@ -96,9 +96,9 @@ export interface PasswordPassThroughOptions {
      */
     meterLabel?: PasswordPassThroughOptionType;
     /**
-     * Used to pass attributes to the info's DOM element.
+     * Used to pass attributes to the meter text's DOM element.
      */
-    info?: PasswordPassThroughOptionType;
+    meterText?: PasswordPassThroughOptionType;
     /**
      * Used to pass attributes to the hidden accessible DOM element.
      */

components/lib/password/style/PasswordStyle.js

@@ -17,7 +17,7 @@ const theme = ({ dt }) => `
     border-radius: ${dt('rounded.base')};
 }
 
-.p-password-meter-value {
+.p-password-meter-label {
     height: 100%;
     width: 0;
     transition: width 1s ease-in-out;
@@ -91,8 +91,8 @@ const classes = {
         }
     ],
     meter: 'p-password-meter',
-    meterLabel: ({ instance }) => `p-password-meter-value ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
+    meterLabel: ({ instance }) => `p-password-meter-label ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
-    info: 'p-password-meter-text'
+    meterText: 'p-password-meter-text'
 };
 
 export default BaseStyle.extend({

components/lib/speeddial/SpeedDial.d.ts

@@ -79,13 +79,13 @@ export interface SpeedDialPassThroughOptions {
      */
     button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the menu's DOM element.
+     * Used to pass attributes to the list's DOM element.
      */
-    menu?: SpeedDialPassThroughOptionType;
+    list?: SpeedDialPassThroughOptionType;
     /**
-     * Used to pass attributes to the menu item's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    menuitem?: SpeedDialPassThroughOptionType;
+    item?: SpeedDialPassThroughOptionType;
     /**
      * Used to pass attributes to the action's Button component.
      * @see {@link ButtonPassThroughOptions}

components/lib/speeddial/SpeedDial.vue

@@ -29,11 +29,11 @@
                     v-if="isItemVisible(item)"
                     :id="`${id}_${index}`"
                     :aria-controls="`${id}_item`"
-                    :class="cx('menuitem', { id: `${id}_${index}` })"
+                    :class="cx('item', { id: `${id}_${index}` })"
                     :style="getItemStyle(index)"
                     role="none"
                     :data-p-active="isItemActive(`${id}_${index}`)"
-                    v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
+                    v-bind="getPTOptions(`${id}_${index}`, 'item')"
                 >
                     <template v-if="!$slots.item">
                         <Button
@@ -102,7 +102,7 @@ export default {
 
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '[data-pc-name="button"]');
-            const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
+            const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="item"]');
 
             if (button && firstItem) {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
@@ -241,7 +241,7 @@ export default {
             event.preventDefault();
         },
         onEnterKey(event) {
-            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
+            const items = DomHandler.find(this.container, '[data-pc-section="item"]');
             const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
             const buttonEl = DomHandler.findSingle(this.container, 'button');
 
@@ -324,7 +324,7 @@ export default {
             event.preventDefault();
         },
         changeFocusedOptionIndex(index) {
-            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
+            const items = DomHandler.find(this.container, '[data-pc-section="item"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
 
             if (filteredItems[index]) {
@@ -335,7 +335,7 @@ export default {
             }
         },
         findPrevOptionIndex(index) {
-            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
+            const items = DomHandler.find(this.container, '[data-pc-section="item"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -345,7 +345,7 @@ export default {
             return matchedOptionIndex;
         },
         findNextOptionIndex(index) {
-            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
+            const items = DomHandler.find(this.container, '[data-pc-section="item"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[0].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);

components/lib/speeddial/style/SpeedDialStyle.js

@@ -105,8 +105,8 @@ const classes = {
             'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
         }
     ],
-    menu: 'p-speeddial-list',
+    list: 'p-speeddial-list',
-    menuitem: 'p-speeddial-item',
+    item: 'p-speeddial-item',
     action: 'p-speeddial-action',
     actionIcon: 'p-speeddial-action-icon',
     mask: ({ instance }) => [

components/lib/treeselect/TreeSelect.d.ts

@@ -102,9 +102,9 @@ export interface TreeSelectPassThroughOptions {
      */
     panel?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the wrapper's DOM element.
+     * Used to pass attributes to the tree container's DOM element.
      */
-    wrapper?: TreeSelectPassThroughOptionType;
+    treeContainer?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to Tree component.
      * @see {@link TreePassThroughOptions}

components/lib/treeselect/TreeSelect.vue

@@ -58,7 +58,7 @@
                         :data-p-hidden-focusable="true"
                     ></span>
                     <slot name="header" :value="modelValue" :options="options"></slot>
-                    <div :class="cx('wrapper')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('wrapper')">
+                    <div :class="cx('treeContainer')" :style="{ 'max-height': scrollHeight }" v-bind="ptm('treeContainer')">
                         <TSTree
                             ref="tree"
                             :id="listId"

components/lib/treeselect/style/TreeSelectStyle.js

@@ -150,7 +150,7 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    wrapper: 'p-treeselect-tree-container',
+    treeContainer: 'p-treeselect-tree-container',
     emptyMessage: 'p-treeselect-empty-message'
 };
 

components/lib/treetable/TreeTable.d.ts

@@ -282,9 +282,9 @@ export interface TreeTablePassThroughOptions {
      */
     footer?: TreeTablePassThroughOptionType;
     /**
-     * Used to pass attributes to the resize helper's DOM element.
+     * Used to pass attributes to the column resize indicator's DOM element.
      */
-    resizeHelper?: TreeTablePassThroughOptionType;
+    columnResizeIndicator?: TreeTablePassThroughOptionType;
     /**
      * Used to pass attributes to the Column helper components.
      */

components/lib/treetable/TreeTable.vue

@@ -163,7 +163,7 @@
         <div v-if="$slots.footer" :class="cx('footer')" v-bind="ptm('footer')">
             <slot name="footer"></slot>
         </div>
-        <div ref="resizeHelper" :class="cx('columnResizeHelper')" style="display: none" v-bind="ptm('columnResizeHelper')"></div>
+        <div ref="resizeHelper" :class="cx('columnResizeIndicator')" style="display: none" v-bind="ptm('columnResizeIndicator')"></div>
     </div>
 </template>
 

components/lib/treetable/style/TreeTableStyle.js

@@ -514,7 +514,7 @@ const classes = {
         }
     ],
     footer: 'p-treetable-footer',
-    columnResizeHelper: 'p-treetable-column-resize-indicator'
+    columnResizeIndicator: 'p-treetable-column-resize-indicator'
 };
 
 const inlineStyles = {