Nutrition

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -45,62 +45,48 @@
   </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({
+interface Props {
-  props: {
+  edit?: boolean;
-    modelValue: {
+}
-      type: Object as () => Nutrition,
+const props = withDefaults(defineProps<Props>(), {
-      required: true,
+  edit: true,
-    },
+});
-    edit: {
+
-      type: Boolean,
+const modelValue = defineModel<Nutrition>({ required: true });
-      default: true,
+
-    },
+const { labels } = useNutritionLabels();
-  },
+const valueNotNull = computed(() => {
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    const { labels } = useNutritionLabels();
-    const valueNotNull = computed(() => {
   let key: keyof Nutrition;
-      for (key in props.modelValue) {
+  for (key in modelValue.value) {
-        if (props.modelValue[key] !== null) {
+    if (modelValue.value[key] !== null) {
       return true;
     }
   }
   return false;
-    });
+});
 
-    const showViewer = computed(() => !props.edit && valueNotNull.value);
+const showViewer = computed(() => !props.edit && valueNotNull.value);
 
-    function updateValue(key: number | string, event: Event) {
+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
+// Build a new list that only contains nutritional information that has a value
-    const renderedList = computed(() => {
+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>