mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
86c99b10a2
* Activate more linting rules from eslint and typescript * Properly add VForm as type information * Fix usage of native types * Fix more linting issues * Rename vuetify types file, add VTooltip * Fix some more typing problems * Use composition API for more components * Convert RecipeRating * Convert RecipeNutrition * Convert more components to composition API * Fix globals plugin for type checking * Add missing icon types * Fix vuetify types in Nuxt context * Use composition API for RecipeActionMenu * Convert error.vue to composition API * Convert RecipeContextMenu to composition API * Use more composition API and type checking in recipe/create * Convert AppButtonUpload to composition API * Fix some type checking in RecipeContextMenu * Remove unused components BaseAutoForm and BaseColorPicker * Convert RecipeCategoryTagDialog to composition API * Convert RecipeCardSection to composition API * Convert RecipeCategoryTagSelector to composition API * Properly import vuetify type definitions * Convert BaseButton to composition API * Convert AutoForm to composition API * Remove unused requests API file * Remove static routes from recipe API * Fix more type errors * Convert AppHeader to composition API, fixing some search bar focus problems * Convert RecipeDialogSearch to composition API * Update API types from pydantic models, handle undefined values * Improve more typing problems * Add types to other plugins * Properly type the CRUD API access * Fix typing of static image routes * Fix more typing stuff * Fix some more typing problems * Turn off more rules
107 lines
2.9 KiB
Vue
107 lines
2.9 KiB
Vue
<template>
|
|
<div v-if="valueNotNull || edit">
|
|
<v-card class="mt-2">
|
|
<v-card-title class="pt-2 pb-0">
|
|
{{ $t("recipe.nutrition") }}
|
|
</v-card-title>
|
|
<v-divider class="mx-2 my-1"></v-divider>
|
|
<v-card-text v-if="edit">
|
|
<div v-for="(item, key, index) in value" :key="index">
|
|
<v-text-field
|
|
dense
|
|
:value="value[key]"
|
|
:label="labels[key].label"
|
|
:suffix="labels[key].suffix"
|
|
type="number"
|
|
autocomplete="off"
|
|
@input="updateValue(key, $event)"
|
|
></v-text-field>
|
|
</div>
|
|
</v-card-text>
|
|
<v-list v-if="showViewer" dense class="mt-0 pt-0">
|
|
<v-list-item v-for="(item, key, index) in labels" :key="index" style="min-height: 25px" dense>
|
|
<v-list-item-content>
|
|
<v-list-item-title class="pl-4 caption flex row">
|
|
<div>{{ item.label }}</div>
|
|
<div class="ml-auto mr-1">{{ value[key] }}</div>
|
|
<div>{{ item.suffix }}</div>
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
|
|
import { Nutrition } from "~/types/api-types/recipe";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
value: {
|
|
type: Object as () => Nutrition,
|
|
required: true,
|
|
},
|
|
edit: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
setup(props, context) {
|
|
const { i18n } = useContext();
|
|
const labels = {
|
|
calories: {
|
|
label: i18n.t("recipe.calories"),
|
|
suffix: i18n.t("recipe.calories-suffix"),
|
|
},
|
|
fatContent: {
|
|
label: i18n.t("recipe.fat-content"),
|
|
suffix: i18n.t("recipe.grams"),
|
|
},
|
|
fiberContent: {
|
|
label: i18n.t("recipe.fiber-content"),
|
|
suffix: i18n.t("recipe.grams"),
|
|
},
|
|
proteinContent: {
|
|
label: i18n.t("recipe.protein-content"),
|
|
suffix: i18n.t("recipe.grams"),
|
|
},
|
|
sodiumContent: {
|
|
label: i18n.t("recipe.sodium-content"),
|
|
suffix: i18n.t("recipe.milligrams"),
|
|
},
|
|
sugarContent: {
|
|
label: i18n.t("recipe.sugar-content"),
|
|
suffix: i18n.t("recipe.grams"),
|
|
},
|
|
carbohydrateContent: {
|
|
label: i18n.t("recipe.carbohydrate-content"),
|
|
suffix: i18n.t("recipe.grams"),
|
|
},
|
|
};
|
|
const valueNotNull = computed(() => {
|
|
Object.values(props.value).forEach((valueProperty) => {
|
|
if (valueProperty && valueProperty !== "") return true;
|
|
});
|
|
return false;
|
|
});
|
|
|
|
const showViewer = computed(() => !props.edit && valueNotNull.value);
|
|
|
|
function updateValue(key: number | string, event: Event) {
|
|
context.emit("input", { ...props.value, [key]: event });
|
|
}
|
|
|
|
return {
|
|
labels,
|
|
valueNotNull,
|
|
showViewer,
|
|
updateValue
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|