Fixed #1447 - Set Paginator Page from InputNumber

2021-08-31 16:11:04 +03:00 · 2021-08-31 16:11:04 +03:00 · df559cb1e1
parent 0ce958ddf3
commit df559cb1e1
39 changed files with 271 additions and 1 deletions
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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;
--- 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',
--- a/src/components/paginator/JumpToPageInput.vue
+++ 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>
--- 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>
--- 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>

--- 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'),