You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.2 KiB
60 lines
1.2 KiB
<template>
|
|
<v-card outlined class="rounded-xl px-3">
|
|
<v-card-title> {{ $t('Rating')}} </v-card-title>
|
|
<v-card-text>
|
|
<v-checkbox v-for="i in starts" :key="'out-' + i" v-model="ratingChecked" :value="i" color="#F5CDA8" class="my-0">
|
|
<template v-slot:label>
|
|
<v-icon v-for="j in i" :key="'in-1-' + j" color="#EE9546">
|
|
mdi-star
|
|
</v-icon>
|
|
<v-icon v-for="j in 5 - i" :key="'in-2-' + j" color="#EE9546">
|
|
mdi-star-outline
|
|
</v-icon>
|
|
</template>
|
|
</v-checkbox>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
ratingChecked: [],
|
|
starts: Array(5)
|
|
.fill(1)
|
|
.map((_, i) => {
|
|
return 5 - i;
|
|
}),
|
|
};
|
|
},
|
|
watch: {
|
|
ratingChecked() {
|
|
this.$emit("selectRating", this.ratingChecked);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
:deep() {
|
|
.v-text-field__details {
|
|
display: none !important;
|
|
}
|
|
|
|
.v-input__append-inner {
|
|
margin-top: 12px !important;
|
|
}
|
|
|
|
.v-input--selection-controls__input {
|
|
i {
|
|
color: #f5cda8 !important;
|
|
}
|
|
}
|
|
|
|
.v-label {
|
|
color: #232323 !important;
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
</style>
|