github.com/soulteary/pocket-bookcase@v0.0.0-20240428065142-0b5a9a0fc98a/internal/view/assets/js/component/pagination.js (about)

     1  var template = `
     2  <div class="pagination-box">
     3  	<p>Page</p>
     4  	<input type="text" 
     5  		placeholder="1" 
     6  		:value="page" 
     7  		@focus="$event.target.select()" 
     8  		@keyup.enter="changePage($event.target.value)" 
     9  		:disabled="editMode">
    10  	<p>{{maxPage}}</p>
    11  	<div class="spacer"></div>
    12  	<template v-if="!editMode">
    13  		<a v-if="page > 2" title="Go to first page" @click="changePage(1)">
    14  			<i class="fas fa-fw fa-angle-double-left"></i>
    15  		</a>
    16  		<a v-if="page > 1" title="Go to previous page" @click="changePage(page-1)">
    17  			<i class="fa fa-fw fa-angle-left"></i>
    18  		</a>
    19  		<a v-if="page < maxPage" title="Go to next page" @click="changePage(page+1)">
    20  			<i class="fa fa-fw fa-angle-right"></i>
    21  		</a>
    22  		<a v-if="page < maxPage - 1" title="Go to last page" @click="changePage(maxPage)">
    23  			<i class="fas fa-fw fa-angle-double-right"></i>
    24  		</a>
    25  	</template>
    26  </div>`;
    27  
    28  export default {
    29  	template: template,
    30  	props: {
    31  		page: Number,
    32  		maxPage: Number,
    33  		editMode: Boolean,
    34  	},
    35  	methods: {
    36  		changePage(page) {
    37  			page = parseInt(page, 10) || 0;
    38  			if (page >= this.maxPage) page = this.maxPage;
    39  			else if (page <= 1) page = 1;
    40  
    41  			this.$emit("change", page);
    42  		},
    43  	},
    44  };