Refactor #3965 - For Paginator & PT name changes

components/lib/paginator/BasePaginator.vue

@@ -61,13 +61,13 @@ const classes = {
         }
     ],
     firstPageIcon: 'p-paginator-icon',
-    prevPageButton: ({ instance }) => [
+    previousPageButton: ({ instance }) => [
         'p-paginator-prev p-paginator-element p-link',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    prevPageIcon: 'p-paginator-icon',
+    previousPageIcon: 'p-paginator-icon',
     nextPageButton: ({ instance }) => [
         'p-paginator-next p-paginator-element p-link',
         {
@@ -82,10 +82,17 @@ const classes = {
         }
     ],
     lastPageIcon: 'p-paginator-icon',
+    pages: 'p-paginator-pages',
+    pageButton: ({ props, pageLink }) => [
+        'p-paginator-page p-paginator-element p-link',
+        {
+            'p-highlight': pageLink - 1 === props.page
+        }
+    ],
     current: 'p-paginator-current',
-    RPPDropdown: 'p-paginator-rpp-options',
+    rowPerPageDropdown: 'p-paginator-rpp-options',
-    JTPDropdown: 'p-paginator-page-options',
+    jumpToPageDropdown: 'p-paginator-page-options',
-    JTPInput: 'p-paginator-page-input'
+    jumpToPageInput: 'p-paginator-page-input'
 };
 
 const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });

components/lib/paginator/JumpToPageDropdown.vue

@@ -5,11 +5,11 @@
         optionLabel="label"
         optionValue="value"
         @update:modelValue="onChange($event)"
-        :class="cx('JTPDropdown')"
+        :class="cx('jumpToPageDropdown')"
         :disabled="disabled"
         :unstyled="unstyled"
-        :pt="ptm('JTPDropdown')"
+        :pt="ptm('jumpTpPageDropdown')"
-        data-pc-section="jtpdropdown"
+        data-pc-section="jumptopagedropdown"
     ></JTPDropdown>
 </template>
 

components/lib/paginator/JumpToPageInput.vue

@@ -1,5 +1,15 @@
 <template>
-    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('JTPInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('JTPInput')" data-pc-section="jtpinput"></JTPInput>
+    <JTPInput
+        ref="jtpInput"
+        :modelValue="d_page"
+        :class="cx('jumpToPageInput')"
+        :aria-label="inputArialabel"
+        :disabled="disabled"
+        @update:modelValue="onChange"
+        :unstyled="unstyled"
+        :pt="ptm('jumpToPageInput')"
+        data-pc-section="jumptopageinput"
+    ></JTPInput>
 </template>
 
 <script>

components/lib/paginator/PageLinks.vue

@@ -1,15 +1,16 @@
 <template>
-    <span class="p-paginator-pages" v-bind="ptm('pages')">
+    <span :class="cx('pages')" v-bind="ptm('pages')">
         <button
             v-for="pageLink of value"
             :key="pageLink"
             v-ripple
-            :class="['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === page }]"
+            :class="cx('pageButton', { pageLink })"
             type="button"
             :aria-label="ariaPageLabel(pageLink)"
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
             v-bind="getPTOptions(pageLink - 1, 'pageButton')"
+            :data-p-highlight="pageLink - 1 === page"
         >
             {{ pageLink }}
         </button>

components/lib/paginator/Paginator.d.ts

@@ -50,12 +50,22 @@ export interface PaginatorPassThroughOptions {
     firstPageIcon?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the prev page button's DOM element.
+     * @deprecated
      */
     prevPageButton?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page button's DOM element.
+     */
+    previousPageButton?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the prev page icon's DOM element.
+     * @deprecated
      */
     prevPageIcon?: PaginatorPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prev page icon's DOM element.
+     */
+    previousPageIcon?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the next page button's DOM element.
      */
@@ -86,19 +96,34 @@ export interface PaginatorPassThroughOptions {
     current?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptionType}
+     * @deprecated
      */
     RPPDropdown?: DropdownPassThroughOptionType;
     /**
      * Uses to pass attributes to the Dropdown component.
      * @see {@link DropdownPassThroughOptionType}
      */
+    rowPerPageDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * deprecated
+     */
     JTPDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    jumpToPageDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @deprecated
+     */
+    JTPInput?: InputNumberPassThroughOptionType;
     /**
      * Uses to pass attributes to the Dropdown component.
      * @see {@link InputNumberPassThroughOptionType}
      */
-    JTPInput?: InputNumberPassThroughOptionType;
+    jumpToPageInput?: InputNumberPassThroughOptionType;
     /**
      * Uses to pass attributes to the end's DOM element.
      */

components/lib/paginator/PrevPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('prevPageButton')" type="button" v-bind="getPTOptions('prevPageButton')">
+    <button v-ripple :class="cx('previousPageButton')" type="button" v-bind="getPTOptions('previousPageButton')">
-        <component :is="template || 'AngleLeftIcon'" :class="cx('prevPageIcon')" v-bind="getPTOptions('prevPageIcon')" />
+        <component :is="template || 'AngleLeftIcon'" :class="cx('previousPageIcon')" v-bind="getPTOptions('previousPageIcon')" />
     </button>
 </template>
 

components/lib/paginator/RowsPerPageDropdown.vue

@@ -5,11 +5,11 @@
         optionLabel="label"
         optionValue="value"
         @update:modelValue="onChange($event)"
-        :class="cx('RPPDropdown')"
+        :class="cx('rowPerPageDropdown')"
         :disabled="disabled"
         :unstyled="unstyled"
-        :pt="ptm('RPPDropdown')"
+        :pt="ptm('rowPerPageDropdown')"
-        data-pc-section="rppdropdown"
+        data-pc-section="rowperpagedropdown"
     ></RPPDropdown>
 </template>