Refactor #3965 - For Paginator

components/lib/paginator/BasePaginator.vue

@@ -0,0 +1,140 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-paginator-default {
+    display: flex;
+}
+
+.p-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.p-paginator-left-content {
+    margin-right: auto;
+}
+
+.p-paginator-right-content {
+    margin-left: auto;
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev,
+.p-paginator-current {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-paginator-element:focus {
+    z-index: 1;
+    position: relative;
+}
+`;
+
+const classes = {
+    paginator: ({ instance, key }) => [
+        'p-paginator p-component',
+        {
+            'p-paginator-default': !instance.hasBreakpoints(),
+            [`p-paginator-${key}`]: instance.hasBreakpoints()
+        }
+    ],
+    start: 'p-paginator-left-content',
+    end: 'p-paginator-right-content',
+    firstPageButton: ({ instance }) => [
+        'p-paginator-first p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    firstPageIcon: 'p-paginator-icon',
+    prevPageButton: ({ instance }) => [
+        'p-paginator-prev p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    prevPageIcon: 'p-paginator-icon',
+    nextPageButton: ({ instance }) => [
+        'p-paginator-next p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    nextPageIcon: 'p-paginator-icon',
+    lastPageButton: ({ instance }) => [
+        'p-paginator-last p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    lastPageIcon: 'p-paginator-icon',
+    current: 'p-paginator-current',
+    RPPDropdown: 'p-paginator-rpp-options',
+    JTPDropdown: 'p-paginator-page-options',
+    JTPInput: 'p-paginator-page-input'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });
+
+export default {
+    name: 'BasePaginator',
+    extends: BaseComponent,
+    props: {
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        pageLinkSize: {
+            type: Number,
+            default: 5
+        },
+        rowsPerPageOptions: {
+            type: Array,
+            default: null
+        },
+        template: {
+            type: [Object, String],
+            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        currentPageReportTemplate: {
+            type: null,
+            default: '({currentPage} of {totalPages})'
+        },
+        alwaysShow: {
+            type: Boolean,
+            default: true
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/paginator/CurrentPageReport.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="p-paginator-current" v-bind="ptm('current')">{{ text }}</span>
+    <span :class="cx('current')" v-bind="ptm('current')">{{ text }}</span>
 </template>
 
 <script>

components/lib/paginator/FirstPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('firstPageButton')">
+    <button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')">
-        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('firstPageIcon')" />
+        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-first p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleDoubleLeftIcon: AngleDoubleLeftIcon
     },

components/lib/paginator/JumpToPageDropdown.vue

@@ -1,5 +1,15 @@
 <template>
-    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled" :pt="ptm('JTPDropdown')"></JTPDropdown>
+    <JTPDropdown
+        :modelValue="page"
+        :options="pageOptions"
+        optionLabel="label"
+        optionValue="value"
+        @update:modelValue="onChange($event)"
+        :class="cx('JTPDropdown')"
+        :disabled="disabled"
+        :pt="ptm('JTPDropdown')"
+        data-pc-section="jtpdropdown"
+    ></JTPDropdown>
 </template>
 
 <script>

components/lib/paginator/JumpToPageInput.vue

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

components/lib/paginator/LastPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('lastPageButton')">
+    <button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')">
-        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('lastPageIcon')" />
+        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-last p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleDoubleRightIcon: AngleDoubleRightIcon
     },

components/lib/paginator/NextPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('nextPageButton')">
+    <button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')">
-        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('nextPageIcon')" />
+        <component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-next p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleRightIcon: AngleRightIcon
     },

components/lib/paginator/Paginator.d.ts

@@ -33,9 +33,9 @@ export interface PaginatorPassThroughOptions {
      */
     root?: PaginatorPassThroughOptionType;
     /**
-     * Uses to pass attributes to the left's DOM element.
+     * Uses to pass attributes to the start's DOM element.
      */
-    left?: PaginatorPassThroughOptionType;
+    start?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the first page button's DOM element.
      */

components/lib/paginator/Paginator.vue

@@ -1,7 +1,7 @@
 <template>
     <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('root')">
-        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)" v-bind="ptm('paginator')">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('paginator')" data-pc-name="paginator">
-            <div v-if="$slots.start" class="p-paginator-left-content" v-bind="ptm('left')">
+            <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
@@ -34,7 +34,7 @@
                 <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
                 <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
             </template>
-            <div v-if="$slots.end" class="p-paginator-right-content" v-bind="ptm('end')">
+            <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>
@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import { UniqueComponentId } from 'primevue/utils';
+import BasePaginator from './BasePaginator.vue';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
 import JumpToPageDropdown from './JumpToPageDropdown.vue';
@@ -56,42 +56,8 @@ import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
     name: 'Paginator',
-    extends: BaseComponent,
+    extends: BasePaginator,
     emits: ['update:first', 'update:rows', 'page'],
-    props: {
-        totalRecords: {
-            type: Number,
-            default: 0
-        },
-        rows: {
-            type: Number,
-            default: 0
-        },
-        first: {
-            type: Number,
-            default: 0
-        },
-        pageLinkSize: {
-            type: Number,
-            default: 5
-        },
-        rowsPerPageOptions: {
-            type: Array,
-            default: null
-        },
-        template: {
-            type: [Object, String],
-            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-        },
-        currentPageReportTemplate: {
-            type: null,
-            default: '({currentPage} of {totalPages})'
-        },
-        alwaysShow: {
-            type: Boolean,
-            default: true
-        }
-    },
     data() {
         return {
             d_first: this.first,
@@ -215,14 +181,6 @@ export default {
         hasBreakpoints() {
             return typeof this.template === 'object';
         },
-        getPaginatorClasses(key) {
-            return [
-                {
-                    'p-paginator-default': !this.hasBreakpoints(),
-                    [`p-paginator-${key}`]: this.hasBreakpoints()
-                }
-            ];
-        },
         setPaginatorAttribute() {
             if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
                 [...this.$refs.paginator].forEach((el) => {
@@ -329,45 +287,3 @@ export default {
     }
 };
 </script>
-
-<style lang="css">
-.p-paginator-default {
-    display: flex;
-}
-
-.p-paginator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.p-paginator-left-content {
-    margin-right: auto;
-}
-
-.p-paginator-right-content {
-    margin-left: auto;
-}
-
-.p-paginator-page,
-.p-paginator-next,
-.p-paginator-last,
-.p-paginator-first,
-.p-paginator-prev,
-.p-paginator-current {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    user-select: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-paginator-element:focus {
-    z-index: 1;
-    position: relative;
-}
-</style>

components/lib/paginator/PrevPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('prevPageButton')">
+    <button v-ripple :class="cx('prevPageButton')" type="button" v-bind="getPTOptions('prevPageButton')">
-        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('prevPageIcon')" />
+        <component :is="template || 'AngleLeftIcon'" :class="cx('prevPageIcon')" v-bind="getPTOptions('prevPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-prev p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleLeftIcon: AngleLeftIcon
     },

components/lib/paginator/RowsPerPageDropdown.vue

@@ -1,5 +1,15 @@
 <template>
-    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled" :pt="ptm('RPPDropdown')"></RPPDropdown>
+    <RPPDropdown
+        :modelValue="rows"
+        :options="rowsOptions"
+        optionLabel="label"
+        optionValue="value"
+        @update:modelValue="onChange($event)"
+        :class="cx('RPPDropdown')"
+        :disabled="disabled"
+        :pt="ptm('RPPDropdown')"
+        data-pc-section="rppdropdown"
+    ></RPPDropdown>
 </template>
 
 <script>