135 lines
2.7 KiB
Vue
135 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { VRating } from 'vuetify/components/VRating'
|
|
|
|
const props = defineProps({
|
|
rating: Number,
|
|
reviewtext: String,
|
|
})
|
|
const isTextareaExpanded = ref(false)
|
|
const isTextareaTransitionEnabled = ref(true)
|
|
|
|
defineEmits('onRatingUpdate', 'onReviewUpdate')
|
|
|
|
function computeTextareaClass() {
|
|
let classAttr = isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal'
|
|
if (isTextareaTransitionEnabled && isTextareaTransitionEnabled.value) {
|
|
classAttr += ' transition-height'
|
|
}
|
|
return classAttr
|
|
}
|
|
|
|
function onTextAreaFocus() {
|
|
isTextareaExpanded.value = true
|
|
setTimeout(() => {
|
|
isTextareaTransitionEnabled.value = false
|
|
}, 500)
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="maincontainer py-5">
|
|
<div class="widget-header mb-5 full-width">
|
|
<div class="widget-title ml-3">
|
|
<h2>{{$t('review.title')}}</h2>
|
|
<span class="ml-3">
|
|
<b-icon-pen/>
|
|
</span>
|
|
</div>
|
|
<VRating
|
|
half-increments
|
|
hover
|
|
:length="5"
|
|
size="x-large"
|
|
density="compact"
|
|
:model-value="rating / 2"
|
|
@update:modelValue="(r) => $emit('onRatingUpdate', r)"
|
|
active-color="bulma-body-color"
|
|
class="widget-rating centered"
|
|
/>
|
|
</div>
|
|
<div class="full-width centered">
|
|
<textarea
|
|
:placeholder="$t('review.textplaceholder')"
|
|
class="widget-textarea mx-4"
|
|
@change="(e) => $emit('onReviewUpdate', e.target.value)"
|
|
@focus="onTextAreaFocus"
|
|
:class="computeTextareaClass()">{{reviewtext}}</textarea>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.maincontainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
border: solid;
|
|
border-radius: 20px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
}
|
|
|
|
.widget-title {
|
|
flex: 2;
|
|
font-size: 2em;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.widget-title h2 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.widget-rating {
|
|
flex: 2;
|
|
}
|
|
|
|
.widget-textarea {
|
|
color: var(--bulma-body-color);
|
|
background-color: var(--bulma-text-20);
|
|
width: 95%;
|
|
border-radius: 30px;
|
|
border: none;
|
|
padding: 15px;
|
|
}
|
|
|
|
.textarea-normal {
|
|
height: 80px;
|
|
resize: none;
|
|
}
|
|
|
|
.textarea-expanded {
|
|
height: 350px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.transition-height {
|
|
transition: height 0.5s;
|
|
}
|
|
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.widget-title {
|
|
font-size: 1.5em;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
</style>
|