Refactor #5592 - For ScrollPanel, Splitter, Stepper

components/lib/scrollpanel/ScrollPanel.d.ts

@@ -54,9 +54,9 @@ export interface ScrollPanelPassThroughOptions {
      */
     root?: ScrollPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the wrapper's DOM element.
+     * Used to pass attributes to the content container's DOM element.
      */
-    wrapper?: ScrollPanelPassThroughOptionType;
+    contentContainer?: ScrollPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */

components/lib/scrollpanel/ScrollPanel.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
-        <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
+        <div :class="cx('contentContainer')" v-bind="ptm('contentContainer')">
             <div ref="content" :id="contentId" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
             </div>

components/lib/scrollpanel/style/ScrollPanelStyle.js

@@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
 
 const classes = {
     root: 'p-scrollpanel p-component',
-    wrapper: 'p-scrollpanel-content-container',
+    contentContainer: 'p-scrollpanel-content-container',
     content: 'p-scrollpanel-content',
     barX: 'p-scrollpanel-bar p-scrollpanel-bar-x',
     barY: 'p-scrollpanel-bar p-scrollpanel-bar-y'

components/lib/splitter/Splitter.d.ts

@@ -107,9 +107,9 @@ export interface SplitterPassThroughOptions {
      */
     gutter?: SplitterPassThroughOptionType;
     /**
-     * Used to pass attributes to the gutter handler's DOM element.
+     * Used to pass attributes to the gutter handle's DOM element.
      */
-    gutterHandler?: SplitterPassThroughOptionType;
+    gutterHandle?: SplitterPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/splitter/Splitter.vue

@@ -15,7 +15,7 @@
                 :data-p-gutter-resizing="false"
                 v-bind="ptm('gutter')"
             >
-                <div :class="cx('gutterHandler')" tabindex="0" :style="[gutterStyle]" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterHandler')"></div>
+                <div :class="cx('gutterHandle')" tabindex="0" :style="[gutterStyle]" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterHandle')"></div>
             </div>
         </template>
     </div>

components/lib/splitter/style/SplitterStyle.js

@@ -3,7 +3,7 @@ import BaseStyle from 'primevue/base/style';
 const classes = {
     root: ({ props }) => ['p-splitter p-component', 'p-splitter-' + props.layout],
     gutter: 'p-splitter-gutter',
-    gutterHandler: 'p-splitter-gutter-handle'
+    gutterHandle: 'p-splitter-gutter-handle'
 };
 
 const inlineStyles = {

components/lib/stepper/Stepper.d.ts

@@ -55,13 +55,13 @@ export interface StepperPassThroughOptions {
      */
     root?: StepperPassThroughOptionType;
     /**
-     * Used to pass attributes to the nav's DOM element.
+     * Used to pass attributes to the list's DOM element.
      */
-    nav?: StepperPassThroughOptionType;
+    list?: StepperPassThroughOptionType;
     /**
-     * Used to pass attributes to the panel container's DOM element.
+     * Used to pass attributes to the panels' DOM element.
      */
-    panelContainer?: StepperPassThroughOptionType;
+    panels?: StepperPassThroughOptionType;
     /**
      * Used to pass attributes to the end handler's DOM element.
      */

components/lib/stepper/Stepper.vue

@@ -3,14 +3,14 @@
         <slot v-if="$slots.start" name="start" />
 
         <template v-if="orientation === 'horizontal'">
-            <ul ref="nav" :class="cx('nav')" v-bind="ptm('nav')">
+            <ul ref="nav" :class="cx('list')" v-bind="ptm('list')">
                 <li
                     v-for="(step, index) of stepperpanels"
                     :key="getStepKey(step, index)"
-                    :class="cx('stepper.header', { step, index })"
+                    :class="cx('stepper.item', { step, index })"
                     :aria-current="isStepActive(index) ? 'step' : undefined"
                     role="presentation"
-                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'header', index) }"
+                    v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'item', index) }"
                     data-pc-name="stepperpanel"
                     :data-p-highlight="isStepActive(index)"
                     :data-p-disabled="isItemDisabled(index)"
@@ -26,7 +26,7 @@
                             :disabled="isItemDisabled(index)"
                             :active="isStepActive(index)"
                             :highlighted="index < d_activeStep"
-                            :class="cx('stepper.action')"
+                            :class="cx('stepper.itemHeader')"
                             :aria-controls="getStepContentId(index)"
                             :clickCallback="(event) => onItemClick(event, index)"
                             :getStepPT="getStepPT"
@@ -46,7 +46,7 @@
                     </slot>
                 </li>
             </ul>
-            <div :class="cx('panelContainer')" v-bind="ptm('panelContainer')">
+            <div :class="cx('panels')" v-bind="ptm('panels')">
                 <template v-for="(step, index) of stepperpanels" :key="getStepKey(step, index)">
                     <StepperContent
                         v-show="isStepActive(index)"
@@ -79,7 +79,7 @@
                 :data-pc-index="index"
                 :data-p-active="isStepActive(index)"
             >
-                <div :class="cx('stepper.header', { step, index })" v-bind="getStepPT(step, 'header', index)">
+                <div :class="cx('stepper.item', { step, index })" v-bind="getStepPT(step, 'item', index)">
                     <slot name="header">
                         <StepperHeader
                             :id="getStepHeaderActionId(index)"
@@ -89,7 +89,7 @@
                             :disabled="isItemDisabled(index)"
                             :active="isStepActive(index)"
                             :highlighted="index < d_activeStep"
-                            :class="cx('stepper.action')"
+                            :class="cx('stepper.itemHeader')"
                             :aria-controls="getStepContentId(index)"
                             :clickCallback="(event) => onItemClick(event, index)"
                             :getStepPT="getStepPT"
@@ -99,7 +99,7 @@
                 </div>
 
                 <transition name="p-toggleable-content" v-bind="getStepPT(step, 'transition', index)">
-                    <div v-show="isStepActive(index)" :class="cx('stepper.toggleableContent')" v-bind="getStepPT(step, 'toggleableContent', index)">
+                    <div v-show="isStepActive(index)" :class="cx('stepper.panelContentContainer')" v-bind="getStepPT(step, 'panelContentContainer', index)">
                         <slot v-if="index !== stepperpanels.length - 1" name="separator">
                             <StepperSeparator
                                 :template="step.children?.separator"

components/lib/stepper/StepperContent.vue

@@ -1,10 +1,10 @@
 <template>
     <div
         :id="id"
-        :class="cx('stepper.content', { stepperpanel, index })"
+        :class="cx('stepper.panelContent', { stepperpanel, index })"
         role="tabpanel"
         :aria-labelledby="ariaLabelledby"
-        v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'content', index) }"
+        v-bind="{ ...getStepPT(stepperpanel, 'root', index), ...getStepPT(stepperpanel, 'panelContent', index) }"
         data-pc-name="stepperpanel"
         :data-pc-index="index"
         :data-p-active="active"

components/lib/stepper/StepperHeader.vue

@@ -5,15 +5,15 @@
         :index="index"
         :active="active"
         :highlighted="highlighted"
-        :class="cx('stepper.action')"
+        :class="cx('stepper.itemHeader')"
-        :headerClass="cx('stepper.action')"
+        :headerClass="cx('stepper.itemHeader')"
-        :numberClass="cx('stepper.number')"
+        :numberClass="cx('stepper.itemNumber')"
-        :titleClass="cx('stepper.title')"
+        :titleClass="cx('stepper.itemTitle')"
         :clickCallback="(event) => clickCallback(event, index)"
     />
-    <button v-else :id="id" :class="cx('stepper.action')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'action', index)">
+    <button v-else :id="id" :class="cx('stepper.itemHeader')" role="tab" :tabindex="disabled ? -1 : undefined" :aria-controls="ariaControls" @click="clickCallback($event, index)" v-bind="getStepPT(stepperpanel, 'itemHeader', index)">
-        <span :class="cx('stepper.number')" v-bind="getStepPT(stepperpanel, 'number', index)">{{ index + 1 }}</span>
+        <span :class="cx('stepper.itemNumber')" v-bind="getStepPT(stepperpanel, 'itemNumber', index)">{{ index + 1 }}</span>
-        <span :class="cx('stepper.title')" v-bind="getStepPT(stepperpanel, 'title', index)">{{ getStepProp(stepperpanel, 'header') }}</span>
+        <span :class="cx('stepper.itemTitle')" v-bind="getStepPT(stepperpanel, 'itemTitle', index)">{{ getStepProp(stepperpanel, 'item') }}</span>
     </button>
 </template>
 

components/lib/stepper/style/StepperStyle.js

@@ -9,23 +9,23 @@ const classes = {
             'p-readonly': props.linear
         }
     ],
-    nav: 'p-stepper-list',
+    list: 'p-stepper-list',
     stepper: {
-        header: ({ instance, step, index }) => [
+        item: ({ instance, step, index }) => [
             'p-stepper-item',
             {
                 'p-stepper-item-active': instance.isStepActive(index),
                 'p-disabled': instance.isItemDisabled(index)
             }
         ],
-        action: 'p-stepper-item-header',
+        itemHeader: 'p-stepper-item-header',
-        number: 'p-stepper-item-number',
+        itemNumber: 'p-stepper-item-number',
-        title: 'p-stepper-item-title',
+        itemTitle: 'p-stepper-item-title',
         separator: 'p-stepper-separator',
-        toggleableContent: 'p-stepper-panel-content-container',
+        panelContentContainer: 'p-stepper-panel-content-container',
-        content: 'p-stepper-panel-content'
+        panelContent: 'p-stepper-panel-content'
     },
-    panelContainer: 'p-stepper-panels',
+    panels: 'p-stepper-panels',
     panel: ({ instance, props, index }) => [
         'p-stepper-panel',
         {

components/lib/stepperpanel/StepperPanel.d.ts

@@ -56,37 +56,33 @@ export interface StepperPanelPassThroughOptions {
      */
     root?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the header's DOM element.
+     * Used to pass attributes to the item's DOM element.
      */
-    header?: StepperPanelPassThroughOptionType;
+    item?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the action's DOM element.
+     * Used to pass attributes to the item header's DOM element.
      */
-    action?: StepperPanelPassThroughOptionType;
+    itemHeader?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the number's DOM element.
+     * Used to pass attributes to the item number's DOM element.
      */
-    number?: StepperPanelPassThroughOptionType;
+    itemNumber?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the title's DOM element.
+     * Used to pass attributes to the item title's DOM element.
      */
-    title?: StepperPanelPassThroughOptionType;
+    itemTitle?: StepperPanelPassThroughOptionType;
     /**
      * Used to pass attributes to the separator's DOM element.
      */
     separator?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the panel content container's DOM element.
      */
-    content?: StepperPanelPassThroughOptionType;
+    panelContentContainer?: StepperPanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the panel's DOM element.
+     * Used to pass attributes to the panel content's DOM element.
      */
-    panel?: StepperPanelPassThroughOptionType;
+    panelContent?: StepperPanelPassThroughOptionType;
-    /**
-     * Used to pass attributes to the toggleable content's DOM element.
-     */
-    toggleableContent?: StepperPanelPassThroughOptionType;
     /**
      * Used to control Vue Transition API.
      */