54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
|
<div class="reader-settings">
|
|
<button @click="onToggleReadingMode">
|
|
{{ readingMode === 'single' ? 'Mode Infini' : 'Mode Simple' }}
|
|
</button>
|
|
<button @click="onToggleReadingDirection">
|
|
{{ readingDirection === 'ltr' ? 'RTL' : 'LTR' }}
|
|
</button>
|
|
<div class="zoom-controls">
|
|
<button @click="onZoomOut">-</button>
|
|
<span>{{ Math.round(zoom * 100) }}%</span>
|
|
<button @click="onZoomIn">+</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
readingMode: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
readingDirection: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
zoom: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['toggleReadingMode', 'toggleReadingDirection', 'zoomIn', 'zoomOut']);
|
|
|
|
const onToggleReadingMode = () => emit('toggleReadingMode');
|
|
const onToggleReadingDirection = () => emit('toggleReadingDirection');
|
|
const onZoomIn = () => emit('zoomIn');
|
|
const onZoomOut = () => emit('zoomOut');
|
|
</script>
|
|
|
|
<style lang="postcss" scoped>
|
|
.reader-settings {
|
|
@apply flex items-center justify-center gap-4 p-4 bg-gray-800;
|
|
}
|
|
|
|
.zoom-controls {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
button {
|
|
@apply px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition-colors;
|
|
}
|
|
</style>
|