From df559cb1e1dbfa7d2921d183832f72b3b2d0c7db Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 31 Aug 2021 16:11:04 +0300
Subject: [PATCH] Fixed #1447 - Set Paginator Page from InputNumber

---
 public/themes/arya-blue/theme.css             |  7 +++++
 public/themes/arya-green/theme.css            |  7 +++++
 public/themes/arya-orange/theme.css           |  7 +++++
 public/themes/arya-purple/theme.css           |  7 +++++
 public/themes/bootstrap4-dark-blue/theme.css  |  7 +++++
 .../themes/bootstrap4-dark-purple/theme.css   |  7 +++++
 public/themes/bootstrap4-light-blue/theme.css |  7 +++++
 .../themes/bootstrap4-light-purple/theme.css  |  7 +++++
 public/themes/fluent-light/theme.css          |  7 +++++
 public/themes/luna-amber/theme.css            |  7 +++++
 public/themes/luna-blue/theme.css             |  7 +++++
 public/themes/luna-green/theme.css            |  7 +++++
 public/themes/luna-pink/theme.css             |  7 +++++
 public/themes/md-dark-deeppurple/theme.css    |  7 +++++
 public/themes/md-dark-indigo/theme.css        |  7 +++++
 public/themes/md-light-deeppurple/theme.css   |  7 +++++
 public/themes/md-light-indigo/theme.css       |  7 +++++
 public/themes/mdc-dark-deeppurple/theme.css   |  7 +++++
 public/themes/mdc-dark-indigo/theme.css       |  7 +++++
 public/themes/mdc-light-deeppurple/theme.css  |  7 +++++
 public/themes/mdc-light-indigo/theme.css      |  7 +++++
 public/themes/nova-accent/theme.css           |  7 +++++
 public/themes/nova-alt/theme.css              |  7 +++++
 public/themes/nova-vue/theme.css              |  7 +++++
 public/themes/nova/theme.css                  |  7 +++++
 public/themes/rhea/theme.css                  |  7 +++++
 public/themes/saga-blue/theme.css             |  7 +++++
 public/themes/saga-green/theme.css            |  7 +++++
 public/themes/saga-orange/theme.css           |  7 +++++
 public/themes/saga-purple/theme.css           |  7 +++++
 public/themes/vela-blue/theme.css             |  7 +++++
 public/themes/vela-green/theme.css            |  7 +++++
 public/themes/vela-orange/theme.css           |  7 +++++
 public/themes/vela-purple/theme.css           |  7 +++++
 rollup.config.js                              |  1 +
 src/components/paginator/JumpToPageInput.vue  | 26 +++++++++++++++++++
 src/components/paginator/Paginator.vue        |  5 +++-
 src/views/paginator/PaginatorDoc.vue          |  1 +
 vue.config.js                                 |  1 +
 39 files changed, 271 insertions(+), 1 deletion(-)
 create mode 100644 src/components/paginator/JumpToPageInput.vue

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 6c0c5fdb1..94145ae4d 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index f3b156421..49d55164e 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 97a316d2f..ab8b87bc9 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index a7ed76515..704efa756 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 100515495..93d20c081 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 6e6433aaf..f59e0f8f8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 6049b3d4c..05514f58e 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 007a53e15..f0359af55 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: #ffffff;
   border: 1px solid #dee2e6;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 3a99daf8f..db0cfddaa 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 63fac0163..740cedbd8 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 8b62c891a..34087cc20 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 4576bcad7..1aa97d9f2 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 8e5190a9f..cf902b33e 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index e517b87a9..9e61840e9 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 5f1cf5639..b57f9c200 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 6ee299329..9f0d2ac36 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 62eb21aa7..7bb53b345 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 2be7e5b63..6ca45402a 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 6a39ccd27..772e8cea5 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 97213f8c0..6c7e29253 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index cdb2dfd66..d176c4466 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -3007,6 +3007,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 6a9af251e..8c2846861 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index e950cbd5f..ee69fa35d 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 5ace4e440..ab115a1f7 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 89b4dac28..bb1284ae7 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2995,6 +2995,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 0a6bb93d5..ad14f33a4 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index b9ee30129..20749b585 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 44de6bf71..ff0081bcc 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 461ddf8f8..a1b4e0e7e 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 9a477aa58..7b01f5ae2 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index ad723ea01..f320e85e9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index f54446cdd..efcbf2227 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 920e7172b..6457c9a05 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 005d12f09..3255b7c21 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2983,6 +2983,13 @@
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
diff --git a/rollup.config.js b/rollup.config.js
index dcc8492f2..c9c355e9f 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -25,6 +25,7 @@ let globalDependencies = {
     'primevue/progressbar': 'primevue.progressbar',
     'primevue/message': 'primevue.message',
     'primevue/dropdown': 'primevue.dropdown',
+    'primevue/inputnumber': 'primevue.inputnumber',
     'primevue/menu': 'primevue.menu',
     'primevue/tieredmenu': 'primevue.tieredmenu',
     'primevue/tree': 'primevue.tree',
diff --git a/src/components/paginator/JumpToPageInput.vue b/src/components/paginator/JumpToPageInput.vue
new file mode 100644
index 000000000..efc4e9e3b
--- /dev/null
+++ b/src/components/paginator/JumpToPageInput.vue
@@ -0,0 +1,26 @@
+<template>
+	<JTPInput :modelValue="page" @update:modelValue="onChange($event)" class="p-paginator-page-input" :disabled="disabled"></JTPInput>
+</template>
+
+<script>
+import InputNumber from 'primevue/inputnumber';
+
+export default {
+    name: 'JumpToPageInput',
+    inheritAttrs: false,
+    emits: ['page-change'],
+    props: {
+        page: Number,
+        pageCount: Number,
+        disabled: Boolean
+    },
+    methods: {
+        onChange(value) {
+            this.$emit('page-change', value);
+        }
+    },
+    components: {
+        'JTPInput': InputNumber
+    }
+}
+</script>
diff --git a/src/components/paginator/Paginator.vue b/src/components/paginator/Paginator.vue
index 43ccc9c84..ee78e8b94 100755
--- a/src/components/paginator/Paginator.vue
+++ b/src/components/paginator/Paginator.vue
@@ -15,6 +15,7 @@
                 :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty"/>
             <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :page="page" :pageCount="pageCount" 
                 @page-change="changePage($event)" :disabled="empty"/>
+            <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="page" @page-change="changePage($event)" :disabled="empty"/>
         </template>
         <div class="p-paginator-right-content" v-if="$slots.right">
             <slot name="right" :state="currentState"></slot>
@@ -31,6 +32,7 @@ import PageLinks from './PageLinks.vue';
 import PrevPageLink from './PrevPageLink.vue';
 import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 import JumpToPageDropdown from './JumpToPageDropdown.vue';
+import JumpToPageInput from './JumpToPageInput.vue';
 
 export default {
     name: 'Paginator',
@@ -202,7 +204,8 @@ export default {
         'PageLinks': PageLinks,
         'PrevPageLink': PrevPageLink,
         'RowsPerPageDropdown': RowsPerPageDropdown,
-        'JumpToPageDropdown': JumpToPageDropdown
+        'JumpToPageDropdown': JumpToPageDropdown,
+        'JumpToPageInput': JumpToPageInput
     }
 }
 </script>
diff --git a/src/views/paginator/PaginatorDoc.vue b/src/views/paginator/PaginatorDoc.vue
index ed6dd19d1..58ceb3ce5 100755
--- a/src/views/paginator/PaginatorDoc.vue
+++ b/src/views/paginator/PaginatorDoc.vue
@@ -54,6 +54,7 @@ import Paginator from 'primevue/paginator';
             <li>LastPageLink</li>
             <li>RowsPerPageDropdown</li>
             <li>JumpToPageDropdown</li>
+            <li>JumpToPageInput</li>
             <li>CurrentPageReport</li>
         </ul>
 
diff --git a/vue.config.js b/vue.config.js
index a30740808..d301902ab 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -17,6 +17,7 @@ module.exports = {
                 'primevue/menu': path.resolve(__dirname, 'src/components/menu/Menu.vue'),
                 'primevue/tieredmenu': path.resolve(__dirname, 'src/components/tieredmenu/TieredMenu.vue'),
                 'primevue/dropdown': path.resolve(__dirname, 'src/components/dropdown/Dropdown.vue'),
+                'primevue/inputnumber': path.resolve(__dirname, 'src/components/inputnumber/InputNumber.vue'),
                 'primevue/paginator': path.resolve(__dirname, 'src/components/paginator/Paginator.vue'),
                 'primevue/progressbar': path.resolve(__dirname, 'src/components/progressbar/ProgressBar.vue'),
                 'primevue/message': path.resolve(__dirname, 'src/components/message/Message.vue'),