From 8080cf5926efa3465b1f2c7ac855a32e4630b3aa Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 30 Oct 2024 14:31:17 +0300
Subject: [PATCH] Add headless paginator demo

---
 .../doc/paginator/CurrentPageReportDoc.vue    |  2 +-
 apps/showcase/doc/paginator/HeadlessDoc.vue   | 67 +++++++++++++------
 apps/showcase/doc/paginator/TemplateDoc.vue   |  2 +-
 .../primevue/src/paginator/Paginator.d.ts     |  4 +-
 packages/primevue/src/paginator/Paginator.vue |  4 +-
 5 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/apps/showcase/doc/paginator/CurrentPageReportDoc.vue b/apps/showcase/doc/paginator/CurrentPageReportDoc.vue
index 17ac8b68c..14fda1a73 100644
--- a/apps/showcase/doc/paginator/CurrentPageReportDoc.vue
+++ b/apps/showcase/doc/paginator/CurrentPageReportDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;</p>
-        <ul class="mb-6 leading-loose">
+        <ul class="mb-6 leading-relaxed">
             <li>{currentPage}</li>
             <li>{totalPages}</li>
             <li>{rows}</li>
diff --git a/apps/showcase/doc/paginator/HeadlessDoc.vue b/apps/showcase/doc/paginator/HeadlessDoc.vue
index 523ac4148..a4b411376 100644
--- a/apps/showcase/doc/paginator/HeadlessDoc.vue
+++ b/apps/showcase/doc/paginator/HeadlessDoc.vue
@@ -1,14 +1,30 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements. The template receives the following data;</p>
+        <ul class="mb-6 leading-relaxed">
+            <li>first</li>
+            <li>last</li>
+            <li>rows</li>
+            <li>page</li>
+            <li>pageCount</li>
+            <li>totalRecords</li>
+            <li>firstPageCallback</li>
+            <li>lastPageCallback</li>
+            <li>prevPageCallback</li>
+            <li>nextPageCallback</li>
+            <li>rowChangeCallback</li>
+        </ul>
     </DocSectionText>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
-                <div class="flex items-center gap-2">
-                    <Button icon="pi pi-chevron-left" severity="secondary" text @click="prevCallback" />
-                    <div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
-                    <Button icon="pi pi-chevron-right" severity="secondary" text @click="nextCallback" />
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
+                    <div class="text-primary-contrast font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
                 </div>
             </template>
         </Paginator>
@@ -23,11 +39,14 @@ export default {
             code: {
                 basic: `
 <Paginator :rows="10" :totalRecords="120">
-    <template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
-        <div class="flex items-center gap-2">
-            <Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
-            <div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
-            <Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
+    <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+        <div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
+            <Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
+            <div class="text-primary-contrast font-medium">
+                <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                <span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
+            </div>
+            <Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
         </div>
     </template>
 </Paginator>
@@ -36,11 +55,14 @@ export default {
 <template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
-                <div class="flex items-center gap-2">
-                    <Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
-                    <div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
-                    <Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
+                    <div class="text-primary-contrast font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
                 </div>
             </template>
         </Paginator>
@@ -54,11 +76,14 @@ export default {
 <template>
     <div class="card">
         <Paginator :rows="10" :totalRecords="120">
-            <template #container="{ first, last, prevCallback, nextCallback, totalRecords }">
-                <div class="flex items-center gap-2">
-                    <Button icon="pi pi-chevron-left" severity="secondary" text rounded @click="prevCallback" />
-                    <div>Showing {{ first }} to {{ last }} of {{ totalRecords }}</div>
-                    <Button icon="pi pi-chevron-right" severity="secondary" text rounded @click="nextCallback" />
+            <template #container="{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }">
+                <div class="flex items-center gap-4 bg-primary rounded-full w-full p-3 justify-between">
+                    <Button icon="pi pi-chevron-left" rounded @click="prevPageCallback" />
+                    <div class="text-primary-contrast font-medium">
+                        <span class="hidden sm:block">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>
+                        <span class="block sm:hidden">Page {{ page }} of {{ pageCount }}</span>
+                    </div>
+                    <Button icon="pi pi-chevron-right" rounded @click="nextPageCallback" />
                 </div>
             </template>
         </Paginator>
diff --git a/apps/showcase/doc/paginator/TemplateDoc.vue b/apps/showcase/doc/paginator/TemplateDoc.vue
index 66f42c1f9..7b95f6ad0 100644
--- a/apps/showcase/doc/paginator/TemplateDoc.vue
+++ b/apps/showcase/doc/paginator/TemplateDoc.vue
@@ -4,7 +4,7 @@
             Paginator elements can be customized using the <i>template</i> property using the predefined keys, default value is "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
             can be placed inside a paginator in any order.
         </p>
-        <ul class="mb-6 leading-loose">
+        <ul class="mb-6 leading-relaxed">
             <li>FirstPageLink</li>
             <li>PrevPageLink</li>
             <li>PageLinks</li>
diff --git a/packages/primevue/src/paginator/Paginator.d.ts b/packages/primevue/src/paginator/Paginator.d.ts
index 37745d036..2ecb21820 100755
--- a/packages/primevue/src/paginator/Paginator.d.ts
+++ b/packages/primevue/src/paginator/Paginator.d.ts
@@ -459,12 +459,12 @@ export interface PaginatorSlots {
          * Previous page function.
          * @param {Event} event - Browser event
          */
-        prevCallback: (event: Event) => void;
+        prevPageCallback: (event: Event) => void;
         /**
          * Next page function.
          * @param {Event} event - Browser event
          */
-        nextCallback: (event: Event) => void;
+        nextPageCallback: (event: Event) => void;
         /**
          * Row change function.
          */
diff --git a/packages/primevue/src/paginator/Paginator.vue b/packages/primevue/src/paginator/Paginator.vue
index b14a30712..723d7c8b1 100755
--- a/packages/primevue/src/paginator/Paginator.vue
+++ b/packages/primevue/src/paginator/Paginator.vue
@@ -12,8 +12,8 @@
                 :totalRecords="totalRecords"
                 :firstPageCallback="changePageToFirst"
                 :lastPageCallback="changePageToLast"
-                :prevCallback="changePageToPrev"
-                :nextCallback="changePageToNext"
+                :prevPageCallback="changePageToPrev"
+                :nextPageCallback="changePageToNext"
                 :rowChangeCallback="onRowChange"
             />
             <template v-else>