feat: slot for pagination and usage example

Author: vinicios-gomes

examples/App.vue

@@ -11,6 +11,7 @@
           :show-customize-editor-add-draw="true"
           :show-line-size-select = 'true'
           :show-font-size-select= 'true'
+          :show-pagination="true"
           :show-font-select="true"
           :show-rename="true"
           :show-save-btn="true"
@@ -24,6 +25,13 @@
           :seal-image-hidden-on-save="false"
           @onSave2Upload="save2Upload"
       >
+      <template #pagination="{ pages, currentPage, onPageChange }">
+        <ul class="inline-flex">
+          <li @click="onPageChange(currentPage-1)">previous</li>
+          <p>{{ currentPage }}/{{ pages }}</p>
+          <li @click="onPageChange(currentPage+1)">next</li>
+        </ul>
+      </template>
       </VuePdfEditor>
 
   </div>
@@ -42,6 +50,9 @@ export default {
     }
   },
   methods:{
+    pageChange(e){
+      console.log(e)
+    },
     save2Upload(payload){
       console.log(payload.pdfBytes);
       console.log(payload.fileName);

src/Components/Pagination.vue

@@ -1,19 +1,14 @@
 <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>
+      <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
@@ -26,23 +21,26 @@
       }
     },
     updated(){
-      this.$emit('onPageChange',{
-          page: this.currentPage
-        })
+      this.$emit('onPageChange',this.currentPage)
     },
     props:{
       pages: {
         type: Number,
         default: 0,
         required: true,
       },
+      currentPage: {
+        type: Number,
+        default: 0,
+        required: true
+      }
     },
     methods: {
       onPreviousPage(){
-        this.currentPage--
+        this.$emit('update:current-page', this.currentPage-1)
       },
       onNextPage(){
-        this.currentPage++
+        this.$emit('update:current-page', this.currentPage+1)
       },
     }
   }

src/VuePdfEditor.vue

@@ -78,9 +78,9 @@
 					{{ saving ? 'saving' : 'keep' }}
 				</button>
 
-				<div v-if="pages.length" class="flex items-center gap-4">
-					<Pagination :pages="pages.length" @onPageChange="onPageChange" />
-				</div>
+					<slot name="pagination" v-if="pages.length && showPagination" class="flex items-center gap-4" :pages="pages.length" :current-page="currentPage" :onPageChange="onPageChange">
+						<Pagination :pages="pages.length" :current-page.sync="currentPage" @onPageChange="onPageChange" />
+					</slot>
 
 			</div>
 			<div v-if="addingDrawing">
@@ -232,6 +232,10 @@ export default {
 			type: String,
 			default: '100%',
 		},
+		showPagination:{
+			type: Boolean,
+			default: false
+		},
 		showChooseFileBtn: {
 			type: Boolean,
 			default: false,
@@ -682,7 +686,7 @@ export default {
 				this.saving = false
 			}
 		},
-		onPageChange({ page }){
+		onPageChange(page){
 			this.currentPage = page
 		}
   }