From b95e131fca4f83c10a93092a5df1f9ba07a08cdc Mon Sep 17 00:00:00 2001
From: Nipen <amitmojumder356@gmail.com>
Date: Mon, 1 Apr 2024 23:52:00 +0600
Subject: [PATCH] Feat: Translated page numbers with toLocaleString

---
 docs/guide/api/props.md      |  6 ++++++
 src/Bootstrap4Pagination.vue | 11 ++++++++---
 src/Bootstrap5Pagination.vue | 11 ++++++++---
 src/RenderlessPagination.vue | 10 ++++++++++
 src/TailwindPagination.vue   |  7 ++++++-
 src/demo/App.vue             | 15 +++++++++++++--
 6 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/docs/guide/api/props.md b/docs/guide/api/props.md
index ae9e54f..a720af1 100644
--- a/docs/guide/api/props.md
+++ b/docs/guide/api/props.md
@@ -19,3 +19,9 @@ Limit of pages to be rendered. `0` shows all pages (default). `-1` will hide num
 * `Boolean` (optional)
 
 When `true`, the pagination component will keep the same length regardless of the position of the page number. This is useful when you want to keep the pagination component always the same size and not vary at the first or last pages. The `limit` prop is used to determine the length of the pagination.
+
+## lang
+
+* `String` (optional)
+
+The default lang value is `en-US`. Translating page numbers depends on Javascript toLocaleString method.
diff --git a/src/Bootstrap4Pagination.vue b/src/Bootstrap4Pagination.vue
index 4c953a1..d60aa80 100644
--- a/src/Bootstrap4Pagination.vue
+++ b/src/Bootstrap4Pagination.vue
@@ -3,6 +3,7 @@
         :data="data"
         :limit="limit"
         :keep-length="keepLength"
+        :lang="lang"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -28,7 +29,7 @@
 
             <li class="page-item pagination-page-nav" v-for="(page, key) in slotProps.computed.pageRange" :key="key" :class="{ 'active': page == slotProps.computed.currentPage }">
                 <a class="page-link" href="#" v-on="slotProps.pageButtonEvents(page)">
-                    {{ page }}
+                    {{ slotProps.translatePage(page) }}
                     <span class="sr-only" v-if="page == slotProps.computed.currentPage">(current)</span>
                 </a>
             </li>
@@ -53,7 +54,7 @@ export default {
     compatConfig: {
         MODE: 3
     },
-  
+
     inheritAttrs: false,
 
     emits: ['pagination-change-page'],
@@ -92,7 +93,11 @@ export default {
             validator: value => {
                 return ['left', 'center', 'right'].indexOf(value) !== -1;
             }
-        }
+        },
+        lang: {
+          type: String,
+          default: 'en-US',
+        },
     },
 
     methods: {
diff --git a/src/Bootstrap5Pagination.vue b/src/Bootstrap5Pagination.vue
index 6564280..2faab3c 100644
--- a/src/Bootstrap5Pagination.vue
+++ b/src/Bootstrap5Pagination.vue
@@ -3,6 +3,7 @@
         :data="data"
         :limit="limit"
         :keep-length="keepLength"
+        :lang="lang"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -27,7 +28,7 @@
 
             <li class="page-item pagination-page-nav" v-for="(page, key) in slotProps.computed.pageRange" :key="key" :class="{ 'active': page == slotProps.computed.currentPage }">
                 <a class="page-link" href="#" v-on="slotProps.pageButtonEvents(page)" :aria-current="page == slotProps.computed.currentPage ? 'page' : null">
-                    {{ page }}
+                  {{ slotProps.translatePage(page) }}
                 </a>
             </li>
 
@@ -50,7 +51,7 @@ export default {
     compatConfig: {
         MODE: 3
     },
-  
+
     inheritAttrs: false,
 
     emits: ['pagination-change-page'],
@@ -89,7 +90,11 @@ export default {
             validator: value => {
                 return ['left', 'center', 'right'].indexOf(value) !== -1;
             }
-        }
+        },
+        lang: {
+          type: String,
+          default: 'en-US',
+        },
     },
 
     methods: {
diff --git a/src/RenderlessPagination.vue b/src/RenderlessPagination.vue
index 857b09f..175dfd9 100644
--- a/src/RenderlessPagination.vue
+++ b/src/RenderlessPagination.vue
@@ -15,6 +15,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        lang: {
+            type: String,
+            default: 'en-US',
+        },
     },
 
     computed: {
@@ -195,6 +199,12 @@ export default {
                     this.selectPage(page);
                 },
             }),
+            translatePage: (page) => {
+                if (typeof page !== 'number') {
+                    return page;
+                }
+                return page.toLocaleString(this.lang);
+            },
         });
     },
 };
diff --git a/src/TailwindPagination.vue b/src/TailwindPagination.vue
index 570a7bb..760e5bb 100644
--- a/src/TailwindPagination.vue
+++ b/src/TailwindPagination.vue
@@ -3,6 +3,7 @@
         :data="data"
         :limit="limit"
         :keep-length="keepLength"
+        :lang="lang"
         @pagination-change-page="onPaginationChangePage"
         v-slot="slotProps"
     >
@@ -41,7 +42,7 @@
                 v-on="slotProps.pageButtonEvents(page)"
                 :disabled="page === slotProps.computed.currentPage"
             >
-                {{ page }}
+              {{ slotProps.translatePage(page) }}
             </button>
 
             <button
@@ -110,6 +111,10 @@ export default {
                 'text-blue-600',
             ],
         },
+        lang: {
+          type: String,
+          default: 'en-US',
+        },
     },
 
     methods: {
diff --git a/src/demo/App.vue b/src/demo/App.vue
index 3793759..978983e 100644
--- a/src/demo/App.vue
+++ b/src/demo/App.vue
@@ -23,6 +23,13 @@
                         <option value="right">Right</option>
                     </select>
                 </div>
+              <div class="col">
+                <label class="form-label" for="align">Translate</label><br>
+                <select id="align" class="form-select" v-model="lang">
+                  <option value="en-US">English</option>
+                  <option value="bn-BD">Bengali</option>
+                </select>
+              </div>
             </div>
             <div class="row">
                 <div class="col">
@@ -55,10 +62,11 @@
                         :show-disabled="showDisabled"
                         :size="size"
                         :align="align"
+                        :lang="lang"
                         @pagination-change-page="getResults"
                     />
                 </RenderToIFrame>
-              
+
                 <h3 class="mt-3 mb-2">Bootstrap 5</h3>
                 <RenderToIFrame>
                     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
@@ -70,6 +78,7 @@
                         :show-disabled="showDisabled"
                         :size="size"
                         :align="align"
+                        :lang="lang"
                         @pagination-change-page="getResults"
                     />
                 </RenderToIFrame>
@@ -80,6 +89,7 @@
                         :data="laravelData"
                         :limit="limit"
                         :keep-length="keepLength"
+                        :lang="lang"
                         @pagination-change-page="getResults"
                     />
                 </RenderToIFrame>
@@ -133,7 +143,8 @@ export default {
             keepLength: false,
             showDisabled: false,
             size: 'default',
-            align: 'left'
+            align: 'left',
+            lang: 'en-US'
         }
     },