Merge pull request #116 from Lombiq/issue/LMBQ-284

LMBQ-284: Page number handling change in vue-pagination for better UX experience
Lombiq · Dec 27, 2023 · 3e83edf · 3e83edf
2 parents c68aab9 + ee3ecfd
commit 3e83edf
Showing 1 changed file with 10 additions and 10 deletions.
diff --git a/Lombiq.VueJs/Assets/Scripts/VueComponents/vue-pagination.vue b/Lombiq.VueJs/Assets/Scripts/VueComponents/vue-pagination.vue
@@ -1,32 +1,32 @@
 <template>
     <div v-if="pageCount > 0" class="vuePagination">
         <div class="vuePagination__item vuePagination__item_first"
-             :class="{ vuePagination__item_disabled: page === 0 }"
-             @click="page > 0 && $emit('change', 0)">
+             :class="{ vuePagination__item_disabled: page === 1 }"
+             @click="page > 1 && $emit('change', 1)">
             <i class="fas fa-chevron-left"></i>
             <i class="fas fa-chevron-left"></i>
         </div>
         <div class="vuePagination__item vuePagination__item_prev"
-             :class="{ vuePagination__item_disabled: page <= 0 }"
-             @click="page > 0 && $emit('change', page - 1)">
+             :class="{ vuePagination__item_disabled: page <= 1 }"
+             @click="page > 1 && $emit('change', page - 1)">
             <i class="fas fa-chevron-left"></i>
         </div>
         <div v-for="index in indexes"
              :key="'vuePagination__item_' + index"
              class="vuePagination__item"
-             :class="{ vuePagination__item_current: index === page }"
-             @click="index !== page && $emit('change', index)">
+             :class="{ vuePagination__item_current: index + 1 === page }"
+             @click="index + 1 !== page && $emit('change', index + 1)">
             {{ index + 1 }}
         </div>
         <div class="vuePagination__item vuePagination__item_next"
-             :class="{ vuePagination__item_disabled: page + 1 >= pageCount }"
-             @click="page + 1 < pageCount && $emit('change', page + 1)">
+             :class="{ vuePagination__item_disabled: page >= pageCount }"
+             @click="page < pageCount && $emit('change', page + 1)">
             <i class="fas fa-chevron-right"></i>
         </div>
         <div v-if="pageCount !== Number.POSITIVE_INFINITY"
              class="vuePagination__item vuePagination__item_last"
-             :class="{ vuePagination__item_disabled: page + 1 === pageCount }"
-             @click="page + 1 < pageCount && $emit('change', pageCount - 1)">
+             :class="{ vuePagination__item_disabled: page === pageCount }"
+             @click="page < pageCount && $emit('change', pageCount )">
             <i class="fas fa-chevron-right"></i>
             <i class="fas fa-chevron-right"></i>
         </div>