style: Partially autoformat Vue source files (#326)

* style: Add/remove spaces where applicable

* style: Add missing newlines

* style: Fix indentation

* style: Add newlines between CSS classes

12 files changed, 52 insertions, 42 deletions

diff --git a/src-vue/src/components/LanguageSelector.vue b/src-vue/src/components/LanguageSelector.vue
index a99ef0e5..9bb1d97a 100644
--- a/src-vue/src/components/LanguageSelector.vue
+++ b/src-vue/src/components/LanguageSelector.vue
@@ -44,7 +44,7 @@ export default defineComponent({
             },
         ]
     }),
-    mounted: async function() {
+    mounted: async function () {
         const lang: string = await persistentStore.get('lang') as string;
         this.value = lang;
     },
diff --git a/src-vue/src/components/ModsMenu.vue b/src-vue/src/components/ModsMenu.vue
index de247984..03eea787 100644
--- a/src-vue/src/components/ModsMenu.vue
+++ b/src-vue/src/components/ModsMenu.vue
@@ -19,7 +19,7 @@
             <el-input v-model="$store.state.search.searchValue" :placeholder="$t('mods.menu.search')" clearable />
             <el-select
                 v-if="!showingLocalMods"
-                v-model="$store.state.search.sortValue" 
+                v-model="$store.state.search.sortValue"
                 :placeholder="$t('mods.menu.sort_mods')"
             >
                 <el-option
@@ -63,7 +63,7 @@ export default defineComponent({
         this.$store.state.search.sortValue = this.sortValues[3].value;
     },
     computed: {
-        sortValues(): {label: string, value: string}[] {
+        sortValues(): { label: string, value: string }[] {
             return Object.keys(SortOptions).map((key: string) => ({
                 value: key,
                 label: this.$t('mods.menu.sort.' + Object.values(SortOptions)[Object.keys(SortOptions).indexOf(key)])
@@ -85,7 +85,7 @@ export default defineComponent({
     margin: 8px 0 16px 5px;
 }
 
-.fc_mods__menu h5:not(:first-child){
+.fc_mods__menu h5:not(:first-child) {
     margin-top: 32px;
 }
 
diff --git a/src-vue/src/components/PlayButton.vue b/src-vue/src/components/PlayButton.vue
index 208b4703..83a23ae5 100644
--- a/src-vue/src/components/PlayButton.vue
+++ b/src-vue/src/components/PlayButton.vue
@@ -21,7 +21,7 @@ export default defineComponent({
                 return this.$t("play.button.northstar_is_running");
             }
 
-            switch(this.$store.state.northstar_state) {
+            switch (this.$store.state.northstar_state) {
                 case NorthstarState.GAME_NOT_FOUND:
                     return this.$t("play.button.select_game_dir");
                 case NorthstarState.INSTALL:
@@ -42,7 +42,7 @@ export default defineComponent({
         northstarIsRunning(): boolean {
             return this.$store.state.northstar_is_running;
         },
-        options(): {key: string, value: string}[] {
+        options(): { key: string, value: string }[] {
             return Object.keys(ReleaseCanal).map(function (v) {
                 return {
                     key: v,
@@ -50,7 +50,7 @@ export default defineComponent({
                 }
             });
         },
-        selectOptions(): {label: string, options: {value: ReleaseCanal, label: string}[]}[] {
+        selectOptions(): { label: string, options: { value: ReleaseCanal, label: string }[] }[] {
             return [
                 {
                     label: 'Beta',
@@ -125,6 +125,7 @@ button {
     font-size: 15px;
     margin-right: 0;
 }
+
 .fc_launch__button:focus {
     background-color: var(--el-color-primary);
     border-color: var(--el-color-primary);
diff --git a/src-vue/src/components/PullRequestsSelector.vue b/src-vue/src/components/PullRequestsSelector.vue
index 585b3e6a..4bc8f9f5 100644
--- a/src-vue/src/components/PullRequestsSelector.vue
+++ b/src-vue/src/components/PullRequestsSelector.vue
@@ -37,7 +37,7 @@
             <el-collapse-item name="2" @keydown.space="modsSearchSpace">
                 <template #title>
                     Mods PRs
-                    <el-input class="pr_search_input" v-model="modsSearch" placeholder="Filter pull requests" @click.stop="() =>  false"></el-input>
+                    <el-input class="pr_search_input" v-model="modsSearch" placeholder="Filter pull requests" @click.stop="() => false"></el-input>
                 </template>
                 <div style="margin: 15px">
                     <el-alert title="Warning" type="warning" :closable="false" show-icon>
diff --git a/src-vue/src/components/ThunderstoreModCard.vue b/src-vue/src/components/ThunderstoreModCard.vue
index fec95f14..a0e8c481 100644
--- a/src-vue/src/components/ThunderstoreModCard.vue
+++ b/src-vue/src/components/ThunderstoreModCard.vue
@@ -18,7 +18,7 @@
                     <Star />
                 </el-icon>
             </span>
-            <br/>
+            <br />
 
             <div class="name hide-text-overflow">{{ mod.name }}</div>
             <div class="author hide-text-overflow">{{ $t('mods.card.by') }} {{ mod.owner }}</div>
@@ -53,7 +53,7 @@
                             <el-dropdown-item @click="openURL(mod.package_url)">
                                 {{ $t('mods.card.more_info') }}
                             </el-dropdown-item>
-                            <el-dropdown-item  @click="deleteMod(mod)">
+                            <el-dropdown-item @click="deleteMod(mod)">
                                 {{ $t('mods.card.remove') }}
                             </el-dropdown-item>
                         </el-dropdown-menu>
@@ -65,13 +65,13 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from "vue";
-import {ThunderstoreMod} from "../../../src-tauri/bindings/ThunderstoreMod";
-import {ThunderstoreModVersion} from "../../../src-tauri/bindings/ThunderstoreModVersion";
-import {invoke, shell} from "@tauri-apps/api";
-import {ThunderstoreModStatus} from "../utils/thunderstore/ThunderstoreModStatus";
-import {NorthstarMod} from "../../../src-tauri/bindings/NorthstarMod";
-import {GameInstall} from "../utils/GameInstall";
+import { defineComponent } from "vue";
+import { ThunderstoreMod } from "../../../src-tauri/bindings/ThunderstoreMod";
+import { ThunderstoreModVersion } from "../../../src-tauri/bindings/ThunderstoreModVersion";
+import { invoke, shell } from "@tauri-apps/api";
+import { ThunderstoreModStatus } from "../utils/thunderstore/ThunderstoreModStatus";
+import { NorthstarMod } from "../../../src-tauri/bindings/NorthstarMod";
+import { GameInstall } from "../utils/GameInstall";
 import { NorthstarState } from "../utils/NorthstarState";
 import { ElMessageBox } from "element-plus";
 import { showErrorNotification, showNotification } from "../utils/ui";
@@ -89,7 +89,7 @@ export default defineComponent({
         isBeingUpdated: false
     }),
     computed: {
-        latestVersion (): ThunderstoreModVersion {
+        latestVersion(): ThunderstoreModVersion {
             return this.mod.versions[0];
         },
 
@@ -191,7 +191,7 @@ export default defineComponent({
          * (e.g. "taskinoz-WallrunningTitans-1.0.0" to
          * "taskinoz-WallrunningTitans").
          */
-        getThunderstoreDependencyStringPrefix (dependency: string): string {
+        getThunderstoreDependencyStringPrefix(dependency: string): string {
             const dependencyStringMembers = dependency.split('-');
             return `${dependencyStringMembers[0]}-${dependencyStringMembers[1]}`;
         },
@@ -216,7 +216,7 @@ export default defineComponent({
 
                     await invoke<string>("delete_thunderstore_mod", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name })
                         .then((message) => {
-                            showNotification(this.$t('mods.card.remove_success', {modName: mod.name}), message);
+                            showNotification(this.$t('mods.card.remove_success', { modName: mod.name }), message);
                         })
                         .catch((error) => {
                             showErrorNotification(error);
@@ -230,7 +230,7 @@ export default defineComponent({
                 })
         },
 
-        async installMod (mod: ThunderstoreMod) {
+        async installMod(mod: ThunderstoreMod) {
             let game_install = {
                 game_path: this.$store.state.game_path,
                 install_type: this.$store.state.install_type
@@ -244,7 +244,7 @@ export default defineComponent({
             }
 
             await invoke<string>("install_mod_caller", { gameInstall: game_install, thunderstoreModString: this.latestVersion.full_name }).then((message) => {
-                showNotification(this.$t('mods.card.install_success', {modName: mod.name}), message);
+                showNotification(this.$t('mods.card.install_success', { modName: mod.name }), message);
             })
                 .catch((error) => {
                     showErrorNotification(error);
diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
index e68beded..7ab50903 100644
--- a/src-vue/src/views/ChangelogView.vue
+++ b/src-vue/src/views/ChangelogView.vue
@@ -11,10 +11,10 @@
                     :timestamp="formatDate(release.published_at)"
                     placement="top"
                 >
-                <el-card>
-                    <h4>{{ release.name }}</h4>
-                    <p v-html="formatRelease(release.body)"></p>
-                </el-card>
+                    <el-card>
+                        <h4>{{ release.name }}</h4>
+                        <p v-html="formatRelease(release.body)"></p>
+                    </el-card>
                 </el-timeline-item>
             </el-timeline>
         </el-scrollbar>
@@ -48,7 +48,7 @@ export default defineComponent({
             // PR's links formatting
             content = content.replaceAll(/\[(\S*)\#(\S+)\]\(([^)]+)\)/g, `<a target="_blank" href="$3">$1#$2</a>`);
 
-            return marked.parse(content, {breaks: true});
+            return marked.parse(content, { breaks: true });
         },
         // Formats an ISO-formatted date into a human-readable string.
         formatDate(timestamp: string): string {
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index 77d43afc..ab3d2ba6 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -109,10 +109,10 @@ export default defineComponent({
     },
     data() {
         return {
-            mod_to_install_field_string : "",
-            release_notes_text : "",
-            first_tag: { label: '', value: {name: ''} },
-            second_tag: { label: '', value: {name: ''} },
+            mod_to_install_field_string: "",
+            release_notes_text: "",
+            first_tag: { label: '', value: { name: '' } },
+            second_tag: { label: '', value: { name: '' } },
             ns_release_tags: [] as TagWrapper[],
             selected_project: "FlightCore",
             project: [
@@ -201,7 +201,7 @@ export default defineComponent({
                 });
         },
         async getTags() {
-            await invoke<TagWrapper[]>("get_list_of_tags", {project: this.selected_project})
+            await invoke<TagWrapper[]>("get_list_of_tags", { project: this.selected_project })
                 .then((message) => {
                     this.ns_release_tags = message;
                     showNotification("Done", "Fetched tags");
@@ -211,7 +211,7 @@ export default defineComponent({
                 });
         },
         async compareTags() {
-            await invoke<string>("compare_tags", {project: this.selected_project, firstTag: this.firstTag.value, secondTag: this.secondTag.value})
+            await invoke<string>("compare_tags", { project: this.selected_project, firstTag: this.firstTag.value, secondTag: this.secondTag.value })
                 .then((message) => {
                     this.release_notes_text = message;
                     showNotification("Done", "Generated release notes");
diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index 76f4f328..ff97c320 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -90,7 +90,8 @@ export default defineComponent({
     margin-top: 3px;
 }
 
-.fc_northstar__version, .fc_changelog__link {
+.fc_northstar__version,
+.fc_changelog__link {
     display: inline-block;
 }
 
diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
index c11518d0..9b3543d4 100644
--- a/src-vue/src/views/RepairView.vue
+++ b/src-vue/src/views/RepairView.vue
@@ -126,7 +126,7 @@ export default defineComponent({
         // Lang value is propagated to repair view after it's mounted, so we need to watch
         // its value, and update window title accordingly.
         lang(newv: string) {
-            appWindow.setTitle( this.$t('settings.repair.window.title') );
+            appWindow.setTitle(this.$t('settings.repair.window.title'));
         }
     }
 });
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index a8c539e8..2f2f5019 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -179,7 +179,8 @@ h3:first-of-type {
     font-weight: unset;
 }
 
-.el-input, .el-select {
+.el-input,
+.el-select {
     width: 50%;
 }
 
diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index ad0e2fa6..00e1ff43 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -101,7 +101,7 @@ export default defineComponent({
             await invoke("delete_northstar_mod", { gameInstall: game_install, nsmodName: mod.name })
                 .then((message) => {
                     // Just a visual indicator that it worked
-                    showNotification(this.$t('mods.local.success_deleting', {modName: mod.name}));
+                    showNotification(this.$t('mods.local.success_deleting', { modName: mod.name }));
                 })
                 .catch((error) => {
                     showErrorNotification(error);
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 5a7270df..410af5f3 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -54,7 +54,7 @@ import { ThunderstoreModVersion } from "../../../../src-tauri/bindings/Thunderst
 

 export default defineComponent({

     name: "ThunderstoreModsView",

-    components: {ThunderstoreModCard},

+    components: { ThunderstoreModCard },

     async mounted() {

         this.$store.commit('fetchThunderstoreMods');

     },

@@ -100,7 +100,7 @@ export default defineComponent({
 

             // Sort mods regarding user selected algorithm.

             let compare: (a: ThunderstoreMod, b: ThunderstoreMod) => number;

-            switch(this.modSorting) {

+            switch (this.modSorting) {

                 case SortOptions.NAME_ASC:

                     compare = (a: ThunderstoreMod, b: ThunderstoreMod) => a.name.localeCompare(b.name);

                     break;

@@ -116,10 +116,10 @@ export default defineComponent({
                 case SortOptions.MOST_DOWNLOADED:

                     compare = (a: ThunderstoreMod, b: ThunderstoreMod) => {

                         const aTotal = a.versions.reduce((prev, next) => {

-                            return {downloads: prev.downloads + next.downloads} as ThunderstoreModVersion;

+                            return { downloads: prev.downloads + next.downloads } as ThunderstoreModVersion;

                         }).downloads;

                         const bTotal = b.versions.reduce((prev, next) => {

-                            return {downloads: prev.downloads + next.downloads} as ThunderstoreModVersion;

+                            return { downloads: prev.downloads + next.downloads } as ThunderstoreModVersion;

                         }).downloads;

                         return -1 * (aTotal - bTotal);

                     };

@@ -142,7 +142,7 @@ export default defineComponent({
 

             const startIndex = this.currentPageIndex * perPageValue;

             const endIndexCandidate = startIndex + perPageValue;

-            const endIndex =  endIndexCandidate > this.modsList.length ? this.modsList.length : endIndexCandidate;

+            const endIndex = endIndexCandidate > this.modsList.length ? this.modsList.length : endIndexCandidate;

             return this.modsList.slice(startIndex, endIndex);

         },

         shouldDisplayPagination(): boolean {

@@ -229,36 +229,43 @@ export default defineComponent({
 

     width: calc(var(--thunderstore-mod-card-width) * var(--thunderstore-mod-card-columns-count) + var(--thunderstore-mod-card-margin) * 2 * var(--thunderstore-mod-card-columns-count));

 }

+

 @media (min-width: 628px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 2;

     }

 }

+

 @media (min-width: 836px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 3;

     }

 }

+

 @media (min-width: 1006px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 4;

     }

 }

+

 @media (min-width: 1196px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 5;

     }

 }

+

 @media (min-width: 1386px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 6;

     }

 }

+

 @media (min-width: 1576px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 7;

     }

 }

+

 @media (min-width: 1766px) {

     .card-container {

         --thunderstore-mod-card-columns-count: 8;