Alias Manager

frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { whenever } from "@vueuse/core";
 import { validators } from "~/composables/use-validators";
 import type { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
@@ -42,56 +42,47 @@ export interface GenericAlias {
   name: string;
 }
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
-    data: {
-      type: Object as () => IngredientFood | IngredientUnit,
-      required: true,
-    },
-  },
-  emits: ["submit", "update:modelValue", "cancel"],
-  setup(props, context) {
-    // V-Model Support
-    const dialog = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
+interface Props {
+  data: IngredientFood | IngredientUnit;
+}
 
-    function createAlias() {
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  submit: [aliases: GenericAlias[]];
+  cancel: [];
+}>();
+
+// V-Model Support
+const dialog = defineModel<boolean>({ default: false });
+
+function createAlias() {
   aliases.value.push({
     name: "",
   });
-    }
+}
 
-    function deleteAlias(index: number) {
+function deleteAlias(index: number) {
   aliases.value.splice(index, 1);
-    }
+}
 
-    const aliases = ref<GenericAlias[]>(props.data.aliases || []);
-    function initAliases() {
+const aliases = ref<GenericAlias[]>(props.data.aliases || []);
+function initAliases() {
   aliases.value = [...props.data.aliases || []];
   if (!aliases.value.length) {
     createAlias();
   }
-    }
+}
 
-    initAliases();
-    whenever(
-      () => props.modelValue,
+initAliases();
+whenever(
+  () => dialog.value,
   () => {
     initAliases();
   },
-    );
+);
 
-    function saveAliases() {
+function saveAliases() {
   const seenAliasNames: string[] = [];
   const keepAliases: GenericAlias[] = [];
   aliases.value.forEach((alias) => {
@@ -111,17 +102,6 @@ export default defineNuxtComponent({
   });
 
   aliases.value = keepAliases;
-      context.emit("submit", keepAliases);
-    }
-
-    return {
-      aliases,
-      createAlias,
-      dialog,
-      deleteAlias,
-      saveAliases,
-      validators,
-    };
-  },
-});
+  emit("submit", keepAliases);
+}
 </script>

frontend/pages/group/data/units.vue

@@ -93,7 +93,7 @@
     <!-- Alias Sub-Dialog -->
     <RecipeDataAliasManagerDialog
       v-if="editTarget"
-      :value="aliasManagerDialog"
+      v-model="aliasManagerDialog"
       :data="editTarget"
       can-submit
       @submit="updateUnitAlias"