feat: migrate to vue 3 (#2689)

---------

Co-authored-by: Joep <jcbuhre@gmail.com>
Co-authored-by: Omar Hussein <omarmohammad1951@gmail.com>
Co-authored-by: Oleg Lobanov <oleg@lobanov.me>

frontend/src/components/prompts/NewFile.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t("prompts.newFile") }}</h2>
+      <h2>{{ t("prompts.newFile") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t("prompts.newFileMessage") }}</p>
+      <p>{{ t("prompts.newFileMessage") }}</p>
       <input
+        id="focus-prompt"
         class="input input--block"
-        v-focus
         type="text"
         @keyup.enter="submit"
         v-model.trim="name"
@@ -18,63 +18,68 @@
     <div class="card-action">
       <button
         class="button button--flat button--grey"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')"
+        @click="layoutStore.closeHovers"
+        :aria-label="t('buttons.cancel')"
+        :title="t('buttons.cancel')"
       >
-        {{ $t("buttons.cancel") }}
+        {{ t("buttons.cancel") }}
       </button>
       <button
         class="button button--flat"
         @click="submit"
-        :aria-label="$t('buttons.create')"
-        :title="$t('buttons.create')"
+        :aria-label="t('buttons.create')"
+        :title="t('buttons.create')"
       >
-        {{ $t("buttons.create") }}
+        {{ t("buttons.create") }}
       </button>
     </div>
   </div>
 </template>
 
-<script>
-import { mapGetters } from "vuex";
+<script setup lang="ts">
+import { inject, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import { useFileStore } from "@/stores/file";
+import { useLayoutStore } from "@/stores/layout";
+
 import { files as api } from "@/api";
 import url from "@/utils/url";
 
-export default {
-  name: "new-file",
-  data: function () {
-    return {
-      name: "",
-    };
-  },
-  computed: {
-    ...mapGetters(["isFiles", "isListing"]),
-  },
-  methods: {
-    submit: async function (event) {
-      event.preventDefault();
-      if (this.new === "") return;
+const $showError = inject<IToastError>("$showError")!;
 
-      // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + "/" : "/";
+const fileStore = useFileStore();
+const layoutStore = useLayoutStore();
 
-      if (!this.isListing) {
-        uri = url.removeLastDir(uri) + "/";
-      }
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 
-      uri += encodeURIComponent(this.name);
-      uri = uri.replace("//", "/");
+const name = ref<string>("");
 
-      try {
-        await api.post(uri);
-        this.$router.push({ path: uri });
-      } catch (e) {
-        this.$showError(e);
-      }
+const submit = async (event: Event) => {
+  event.preventDefault();
+  if (name.value === "") return;
 
-      this.$store.commit("closeHovers");
-    },
-  },
+  // Build the path of the new directory.
+  let uri = fileStore.isFiles ? route.path + "/" : "/";
+
+  if (!fileStore.isListing) {
+    uri = url.removeLastDir(uri) + "/";
+  }
+
+  uri += encodeURIComponent(name.value);
+  uri = uri.replace("//", "/");
+
+  try {
+    await api.post(uri);
+    router.push({ path: uri });
+  } catch (e) {
+    if (e instanceof Error) {
+      $showError(e);
+    }
+  }
+
+  layoutStore.closeHovers();
 };
 </script>