mealie/frontend/components/Domain/Recipe/RecipeRating.vue
Hayden 788e176b16
Refactor/composables-folder (#787)
* move api clients and rename

* organize recipes composables

* rewrite useRecipeContext

* refactor(frontend): ♻️ abstract common ingredient functionality.

* feat(frontend):  add scale, and back to recipe button + hide ingredients if none

* update regex to mach 11. instead of just 1.

* minor UX improvements

Co-authored-by: Hayden K <hay-kot@pm.me>
2021-11-06 11:28:47 -08:00

79 lines
1.4 KiB
Vue

<template>
<div @click.prevent>
<v-rating
v-model="rating"
:readonly="!loggedIn"
color="secondary"
background-color="secondary lighten-3"
length="5"
:dense="small ? true : undefined"
:size="small ? 15 : undefined"
hover
:value="value"
@input="updateRating"
@click="updateRating"
></v-rating>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api";
import { useUserApi } from "~/composables/api";
export default defineComponent({
props: {
emitOnly: {
type: Boolean,
default: false,
},
name: {
type: String,
default: "",
},
slug: {
type: String,
default: "",
},
value: {
type: Number,
default: 0,
},
small: {
type: Boolean,
default: false,
},
},
setup() {
const api = useUserApi();
return { api };
},
data() {
return {
rating: 0,
};
},
computed: {
loggedIn() {
return this.$auth.loggedIn;
},
},
mounted() {
this.rating = this.value;
},
methods: {
updateRating(val) {
if (this.emitOnly) {
this.$emit("input", val);
return;
}
this.api.recipes.patchOne(this.slug, {
name: this.name,
slug: this.slug,
rating: val,
});
},
},
});
</script>
<style lang="scss" scoped></style>