Nutrition

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -45,29 +45,25 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useNutritionLabels } from "~/composables/recipes";
 import type { Nutrition } from "~/lib/api/types/recipe";
 import type { NutritionLabelType } from "~/composables/recipes/use-recipe-nutrition";
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Object as () => Nutrition,
-      required: true,
-    },
-    edit: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
+interface Props {
+  edit?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  edit: true,
+});
+
+const modelValue = defineModel<Nutrition>({ required: true });
+
 const { labels } = useNutritionLabels();
 const valueNotNull = computed(() => {
   let key: keyof Nutrition;
-      for (key in props.modelValue) {
-        if (props.modelValue[key] !== null) {
+  for (key in modelValue.value) {
+    if (modelValue.value[key] !== null) {
       return true;
     }
   }
@@ -77,31 +73,21 @@ export default defineNuxtComponent({
 const showViewer = computed(() => !props.edit && valueNotNull.value);
 
 function updateValue(key: number | string, event: Event) {
-      context.emit("update:modelValue", { ...props.modelValue, [key]: event });
+  modelValue.value = { ...modelValue.value, [key]: event };
 }
 
 // Build a new list that only contains nutritional information that has a value
 const renderedList = computed(() => {
   return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => {
-        if (props.modelValue[key]?.trim()) {
+    if (modelValue.value[key]?.trim()) {
       item[key] = {
         ...label,
-            value: props.modelValue[key],
+        value: modelValue.value[key],
       };
     }
     return item;
   }, {});
 });
-
-    return {
-      labels,
-      valueNotNull,
-      showViewer,
-      updateValue,
-      renderedList,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped></style>