ingredients

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -53,42 +53,32 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import { parseIngredientText } from "~/composables/recipes";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  components: { RecipeIngredientListItem },
-  props: {
-    value: {
-      type: Array as () => RecipeIngredient[],
-      default: () => [],
-    },
-    disableAmount: {
-      type: Boolean,
-      default: false,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-    isCookMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    function validateTitle(title?: string) {
+interface Props {
+  value?: RecipeIngredient[];
+  disableAmount?: boolean;
+  scale?: number;
+  isCookMode?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  value: () => [],
+  disableAmount: false,
+  scale: 1,
+  isCookMode: false,
+});
+
+function validateTitle(title?: string | null) {
   return !(title === undefined || title === "" || title === null);
-    }
+}
 
-    const state = reactive({
-      checked: props.value.map(() => false),
-      showTitleEditor: computed(() => props.value.map(x => validateTitle(x.title))),
-    });
+const checked = ref(props.value.map(() => false));
+const showTitleEditor = computed(() => props.value.map(x => validateTitle(x.title)));
 
-    const ingredientCopyText = computed(() => {
+const ingredientCopyText = computed(() => {
   const components: string[] = [];
   props.value.forEach((ingredient) => {
     if (ingredient.title) {
@@ -103,21 +93,13 @@ export default defineNuxtComponent({
   });
 
   return components.join("\n");
-    });
+});
 
-    function toggleChecked(index: number) {
+function toggleChecked(index: number) {
   // TODO Find a better way to do this - $set is not available, and
   // direct array modifications are not propagated for some reason
-      state.checked.splice(index, 1, !state.checked[index]);
-    }
-
-    return {
-      ...toRefs(state),
-      ingredientCopyText,
-      toggleChecked,
-    };
-  },
-});
+  checked.value.splice(index, 1, !checked.value[index]);
+}
 </script>
 
 <style>