From 28d563323c7f4c351af702af40ce9a210560d6d7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 26 Apr 2024 11:07:08 +0300
Subject: [PATCH] Refactored Paginator

---
 .../lib/paginator/style/PaginatorStyle.js     | 30 +++++++++----------
 .../themes/primeone/base/paginator/index.js   | 12 ++++----
 .../lib/themes/primeone/base/tree/index.js    |  3 +-
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
index 7df42c32f..0464029e2 100644
--- a/components/lib/paginator/style/PaginatorStyle.js
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -8,47 +8,47 @@ const classes = {
             [`p-paginator-${key}`]: instance.hasBreakpoints()
         }
     ],
-    start: 'p-paginator-left-content',
-    end: 'p-paginator-right-content',
+    start: 'p-paginator-content-start',
+    end: 'p-paginator-content-end',
     firstPageButton: ({ instance }) => [
-        'p-paginator-first p-paginator-element p-link',
+        'p-paginator-first',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    firstPageIcon: 'p-paginator-icon',
+    firstPageIcon: 'p-paginator-first-icon',
     previousPageButton: ({ instance }) => [
-        'p-paginator-prev p-paginator-element p-link',
+        'p-paginator-prev',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    previousPageIcon: 'p-paginator-icon',
+    previousPageIcon: 'p-paginator-prev-icon',
     nextPageButton: ({ instance }) => [
-        'p-paginator-next p-paginator-element p-link',
+        'p-paginator-next',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    nextPageIcon: 'p-paginator-icon',
+    nextPageIcon: 'p-paginator-next-icon',
     lastPageButton: ({ instance }) => [
-        'p-paginator-last p-paginator-element p-link',
+        'p-paginator-last',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    lastPageIcon: 'p-paginator-icon',
+    lastPageIcon: 'p-paginator-last-icon',
     pages: 'p-paginator-pages',
     pageButton: ({ props, pageLink }) => [
-        'p-paginator-page p-paginator-element p-link',
+        'p-paginator-page',
         {
-            'p-highlight': pageLink - 1 === props.page
+            'p-paginator-page-active': pageLink - 1 === props.page
         }
     ],
     current: 'p-paginator-current',
-    rowPerPageDropdown: 'p-paginator-rpp-options',
-    jumpToPageDropdown: 'p-paginator-page-options',
-    jumpToPageInput: 'p-paginator-page-input'
+    rowPerPageDropdown: 'p-paginator-rpp-dropdown',
+    jumpToPageDropdown: 'p-paginator-jtp-dropdown',
+    jumpToPageInput: 'p-paginator-jtp-input'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/paginator/index.js b/components/lib/themes/primeone/base/paginator/index.js
index 6b64969c4..c81333041 100644
--- a/components/lib/themes/primeone/base/paginator/index.js
+++ b/components/lib/themes/primeone/base/paginator/index.js
@@ -13,11 +13,11 @@ export default {
     gap: 0.25rem;
 }
 
-.p-paginator-left-content {
+.p-paginator-content-start {
     margin-right: auto;
 }
 
-.p-paginator-right-content {
+.p-paginator-content-end {
     margin-left: auto;
 }
 
@@ -41,9 +41,11 @@ export default {
     height: 2.5rem;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     border-radius: 50%;
+    padding: 0;
+    margin: 0;
 }
 
-.p-paginator-page:not(.p-disabled):not(.p-highlight):hover,
+.p-paginator-page:not(.p-disabled):not(.p-paginator-page-active):hover,
 .p-paginator-first:not(.p-disabled):hover,
 .p-paginator-prev:not(.p-disabled):hover,
 .p-paginator-next:not(.p-disabled):hover,
@@ -62,12 +64,12 @@ export default {
     gap: 0.25rem;
 }
 
-.p-paginator-page.p-highlight {
+.p-paginator-page.p-paginator-page-active {
     background: ${dt('highlight.background')};
     color: ${dt('highlight.color')};
 }
 
-.p-paginator-page-input .p-inputtext {
+.p-paginator-jtp-input .p-inputtext {
     max-width: 2.5rem;
 }
 `
diff --git a/components/lib/themes/primeone/base/tree/index.js b/components/lib/themes/primeone/base/tree/index.js
index 334133d6f..55604bce2 100644
--- a/components/lib/themes/primeone/base/tree/index.js
+++ b/components/lib/themes/primeone/base/tree/index.js
@@ -58,7 +58,7 @@ export default {
     overflow: hidden;
     position: relative;
     flex-shrink: 0;
-    margin-right: 0.5rem;
+    margin: 0 0.5rem 0 0;
     width: 1.75rem;
     height: 1.75rem;
     color: ${dt('tree.toggle.color')};
@@ -67,6 +67,7 @@ export default {
     border-radius: 50%;
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
+    padding: 0;
 }
 
 .p-tree-node-toggle-button:enabled:hover {