feat: Migrate to Nuxt 3 framework (#5184)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue

@@ -1,54 +1,88 @@
 <template>
   <div class="text-center">
-    <v-dialog v-model="dialog" width="800">
-      <template #activator="{ on, attrs }">
-        <BaseButton v-bind="attrs" v-on="on" @click="inputText = inputTextProp">
+    <v-dialog
+      v-model="dialog"
+      width="800"
+    >
+      <template #activator="{ props }">
+        <BaseButton
+          v-bind="props"
+          @click="inputText = inputTextProp"
+        >
           {{ $t("new-recipe.bulk-add") }}
         </BaseButton>
       </template>
 
       <v-card>
-        <v-app-bar dense dark color="primary" class="mb-2">
-          <v-icon large left>
+        <v-app-bar
+          density="compact"
+          dark
+          color="primary"
+          class="mb-2 position-relative left-0 top-0 w-100"
+        >
+          <v-icon
+            size="large"
+            start
+          >
             {{ $globals.icons.createAlt }}
           </v-icon>
-          <v-toolbar-title class="headline"> {{ $t("new-recipe.bulk-add") }}</v-toolbar-title>
-          <v-spacer></v-spacer>
+          <v-toolbar-title class="headline">
+            {{ $t("new-recipe.bulk-add") }}
+          </v-toolbar-title>
+          <v-spacer />
         </v-app-bar>
 
         <v-card-text>
           <v-textarea
             v-model="inputText"
-            outlined
+            variant="outlined"
             rows="12"
             hide-details
             :placeholder="$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')"
-          >
-          </v-textarea>
+          />
 
-          <v-divider></v-divider>
-          <template v-for="(util, idx) in utilities">
-            <v-list-item :key="util.id" dense class="py-1">
+          <v-divider />
+          <template
+            v-for="(util) in utilities"
+            :key="util.id"
+          >
+            <v-list-item
+              density="compact"
+              class="py-1"
+            >
               <v-list-item-title>
                 <v-list-item-subtitle class="wrap-word">
                   {{ util.description }}
                 </v-list-item-subtitle>
               </v-list-item-title>
-              <BaseButton small color="info" @click="util.action">
-                <template #icon> {{ $globals.icons.robot }}</template>
+              <BaseButton
+                size="small"
+                color="info"
+                @click="util.action"
+              >
+                <template #icon>
+                  {{ $globals.icons.robot }}
+                </template>
                 {{ $t("general.run") }}
               </BaseButton>
             </v-list-item>
-            <v-divider :key="`divider-${idx}`" class="mx-2"></v-divider>
+            <v-divider class="mx-2" />
           </template>
         </v-card-text>
 
-        <v-divider></v-divider>
+        <v-divider />
 
         <v-card-actions>
-          <BaseButton cancel @click="dialog = false"> </BaseButton>
-          <v-spacer></v-spacer>
-          <BaseButton save color="success" @click="save"> </BaseButton>
+          <BaseButton
+            cancel
+            @click="dialog = false"
+          />
+          <v-spacer />
+          <BaseButton
+            save
+            color="success"
+            @click="save"
+          />
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -56,8 +90,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent, useContext } from "@nuxtjs/composition-api";
-export default defineComponent({
+export default defineNuxtComponent({
   props: {
     inputTextProp: {
       type: String,
@@ -65,6 +98,7 @@ export default defineComponent({
       default: "",
     },
   },
+  emits: ["bulk-data"],
   setup(props, context) {
     const state = reactive({
       dialog: false,
@@ -72,12 +106,12 @@ export default defineComponent({
     });
 
     function splitText() {
-      return state.inputText.split("\n").filter((line) => !(line === "\n" || !line));
+      return state.inputText.split("\n").filter(line => !(line === "\n" || !line));
     }
 
     function removeFirstCharacter() {
       state.inputText = splitText()
-        .map((line) => line.substring(1))
+        .map(line => line.substring(1))
         .join("\n");
     }
 
@@ -108,22 +142,22 @@ export default defineComponent({
       state.dialog = false;
     }
 
-    const { i18n } = useContext();
+    const i18n = useI18n();
 
     const utilities = [
       {
         id: "trim-whitespace",
-        description: i18n.tc("new-recipe.trim-whitespace-description"),
+        description: i18n.t("new-recipe.trim-whitespace-description"),
         action: trimAllLines,
       },
       {
         id: "trim-prefix",
-        description: i18n.tc("new-recipe.trim-prefix-description"),
+        description: i18n.t("new-recipe.trim-prefix-description"),
         action: removeFirstCharacter,
       },
       {
         id: "split-by-numbered-line",
-        description: i18n.tc("new-recipe.split-by-numbered-line-description"),
+        description: i18n.t("new-recipe.split-by-numbered-line-description"),
         action: splitByNumberedLine,
       },
     ];