82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<div class="reader-controls">
|
|
<button @click="onPrevious" :disabled="isFirstPage">
|
|
<ChevronLeftIcon class="h-6 w-6" />
|
|
</button>
|
|
|
|
<div class="controls-center">
|
|
<div class="page-info"> {{ currentPage + 1 }} / {{ totalPages }} </div>
|
|
<div class="chapter-selector-wrapper" v-if="availableChapters.length > 0">
|
|
<ChapterSelector
|
|
:available-chapters="availableChapters"
|
|
@chapter-selected="onChapterSelected"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button @click="onNext" :disabled="isLastPage">
|
|
<ChevronRightIcon class="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
|
|
import ChapterSelector from './ChapterSelector.vue';
|
|
|
|
defineProps({
|
|
currentPage: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
totalPages: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isFirstPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
isLastPage: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
availableChapters: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['previous', 'next', 'chapter-selected']);
|
|
|
|
const onPrevious = () => emit('previous');
|
|
const onNext = () => emit('next');
|
|
const onChapterSelected = (chapterId) => emit('chapter-selected', chapterId);
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.reader-controls {
|
|
@apply flex items-center justify-between p-4 bg-gray-800;
|
|
}
|
|
|
|
.controls-center {
|
|
@apply flex flex-col items-center space-y-2;
|
|
}
|
|
|
|
.page-info {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.chapter-selector-wrapper {
|
|
@apply min-w-[200px];
|
|
}
|
|
|
|
button {
|
|
@apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
|
|
}
|
|
|
|
button:disabled {
|
|
@apply opacity-50 cursor-not-allowed;
|
|
}
|
|
</style>
|