refactor: pagination component

Author: vinicios-gomes

src/Components/Pagination.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="inline-flex -space-x-px text-sm">
+    <button :disabled="!canPreviousPage" class="flex items-center px-3 h-8 ms-0 leading-tight bg-blue-500 border border-e-0 rounded-s-lg hover:bg-blue-700 text-white font-bold disabled:dark:bg-blue-300" @click="onPreviousPage" :class="{'cursor-not-allowed': !canPreviousPage}">Previous</button>
+    <p class="flex items-center px-3 h-8 leading-tight text-white bg-blue-500 border border-gray-300 font-bold">{{ page }} Of {{ pages }}</p>
+		<button :disabled="!canNextPage" class="flex items-center px-3 h-8 ms-0 leading-tight bg-blue-500 border border-e-0 rounded-r-lg hover:bg-blue-700 text-white font-bold disabled:dark:bg-blue-300" @click="onNextPage" :class="{'cursor-not-allowed': !canNextPage}">Next</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PaginationComponent',
+    data(){
+      return {
+        currentPage: 0,
+      } 
+    },
+    computed: {
+      page(){
+        return this.currentPage + 1
+      },
+      canNextPage(){
+        return this.currentPage + 1 <= this.pages - 1
+      },
+      canPreviousPage(){
+        return this.currentPage > 0
+      }
+    },
+    updated(){
+      this.$emit('onPageChange',{
+          page: this.currentPage
+        })
+    },
+    props:{
+      pages: {
+        type: Number,
+        default: 0,
+        required: true,
+      },
+    },
+    methods: {
+      onPreviousPage(){
+        this.currentPage--
+      },
+      onNextPage(){
+        this.currentPage++
+      },
+    }
+  }
+</script>

src/VuePdfEditor.vue

@@ -79,9 +79,7 @@
 				</button>
 
 				<div v-if="pages.length" class="flex items-center gap-4">
-					<button :disabled="currentPage==0" @click="onPreviousPage">Previous</button>
-					<input class="" v-model="currentPage"/>
-					<button @click="onNextPage">Next</button>
+					<Pagination :pages="pages.length" @onPageChange="onPageChange" />
 				</div>
 
 			</div>
@@ -200,6 +198,7 @@
 import { fetchFont } from './utils/prepareAssets.js'
 
 import PDFPage from './Components/PDFPage.vue'
+import Pagination from './Components/Pagination.vue'
 import ImageItem from './Components/Image.vue'
 import TextItem from './Components/TextItem.vue'
 import Drawing from './Components/Drawing.vue'
@@ -223,6 +222,7 @@ export default {
 		TextIcon,
 		GestureIcon,
 		PencilIcon,
+		Pagination,
 	},
 	props: {
 		msg: String,
@@ -688,18 +688,9 @@ export default {
 				this.saving = false
 			}
 		},
-		onPreviousPage(){
-			const previousPage = this.currentPage-1
-			const canSetPreviousPage = previousPage >= 0
-			if(!canSetPreviousPage) return;
-				this.currentPage = previousPage;
-		},
-		onNextPage(){
-			const nextPage = this.currentPage+1
-			const canSetNextPage = nextPage <= this.pages.length-1
-			if(!canSetNextPage) return;
-			this.currentPage = nextPage;
-		},
+		onPageChange({ page }){
+			this.currentPage = page
+		}
   }
 }
 </script>