69 lines
1.5 KiB
Vue
69 lines
1.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { getImagePathOrDefault } from './api.js'
|
|
import { VRating } from 'vuetify/components/VRating';
|
|
|
|
const props = defineProps({
|
|
id: Number,
|
|
title: String,
|
|
author: String,
|
|
coverPath: String,
|
|
rating: Number,
|
|
read: Boolean
|
|
});
|
|
const imagePathOrDefault = computed(() => getImagePathOrDefault(props.coverPath));
|
|
const router = useRouter();
|
|
|
|
function openBook() {
|
|
router.push(`/book/${props.id}`)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box container has-background-dark" >
|
|
<div class="media" @click="openBook">
|
|
<div class="media-left">
|
|
<figure class="image mb-3">
|
|
<img v-bind:src="imagePathOrDefault" v-bind:alt="title">
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="content">
|
|
<div class="is-size-5">{{title}}</div>
|
|
<div class="is-size-5 is-italic">{{author}}</div>
|
|
<VRating v-if="rating > 0"
|
|
half-increments
|
|
readonly
|
|
:length="5"
|
|
size="medium"
|
|
:model-value="rating/2"
|
|
active-color="bulma-body-color"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
img {
|
|
max-height:100px;
|
|
max-width:100px;
|
|
height:auto;
|
|
width:auto;
|
|
}
|
|
|
|
.box {
|
|
transition:ease-in-out 0.04s;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.box:hover {
|
|
transform: scale(1.01);
|
|
transition: ease-in-out 0.02s;
|
|
}
|
|
|
|
</style>
|