vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #3409 JumToPageInput issue

pull/3518/head^2
Bahadır Sofuoğlu 2023-01-10 10:57:30 +03:00
parent e62a65f2fa
commit 9052f5ac5b
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/paginator/JumpToPageInput.vue
View File

@ -1,5 +1,5 @@
<template>
<JTPInput :modelValue="page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange($event)"></JTPInput>
<JTPInput ref="jtpInput" v-model="inputVal" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled"></JTPInput>
</template>
<script>
@ -14,11 +14,21 @@ export default {
pageCount: Number,
disabled: Boolean
},
methods: {
onChange(value) {
this.$emit('page-change', value - 1);
data() {
return {
inputVal: null
};
},
watch: {
inputVal(newValue) {
if (this.$refs.jtpInput && !this.$refs.jtpInput.focused) return;
this.$emit('page-change', newValue - 1);
}
},
mounted() {
this.inputVal = this.page;
},
computed: {
inputArialabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;

2
components/paginator/Paginator.vue
View File

@ -23,7 +23,7 @@
/>
<RowsPerPageDropdown v-else-if="item === 'RowsPerPageDropdown' && rowsPerPageOptions" :aria-label="getAriaLabel('rowsPerPageLabel')" :rows="d_rows" :options="rowsPerPageOptions" @rows-change="onRowChange($event)" :disabled="empty" />
<JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" />
<JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
<JumpToPageInput v-else-if="item === 'JumpToPageInput' && currentPage" :page="currentPage" @page-change="changePage($event)" :disabled="empty" />
</template>
<div v-if="$slots.end" class="p-paginator-right-content">
<slot name="end" :state="currentState"></slot>