Update button click behavior

Refined the behavior of website and repo opening in new cards along with the report issue action. A click now opens in the same tab, while an auxiliary click (middle click or CTRL+click) opens the link in a new tab.

Author: BeauTheBeau

src/App.vue

@@ -4,13 +4,13 @@
       <v-toolbar app>
         <v-toolbar-title>Construct Fund</v-toolbar-title>
         <v-spacer></v-spacer>
-        <v-btn text @click="reportIssue()">
+        <v-btn text @click="reportIssue('_self')" @auxclick="reportIssue('_blank')">
           <v-icon right>mdi-open-in-new</v-icon>
           Report issue
         </v-btn>
       </v-toolbar>
       <div class="parent">
-        <Card v-for="(item, i) in content" key="i" :content="item" />
+        <Card v-for="(item) in content" key="i" :content="item"/>
       </div>
     </v-main>
   </v-app>
@@ -20,10 +20,10 @@
 import Card from "@/components/Card.vue";
 import content from "@/assets/content.json";
 
-function reportIssue() {
+function reportIssue(target) {
   window.open(
-    "https://github.com/ConstructFund/constructfund.github.io/issues/"
-  );
+      "https://github.com/ConstructFund/constructfund.github.io/issues/",
+      target);
 }
 </script>
 

src/components/Card.vue

@@ -8,7 +8,10 @@
       <h2 class="title">{{ content.name }}</h2>
       <v-spacer></v-spacer>
       <div v-if="content.hasWebsite">
-        <v-btn @click="openWebsite" variant="text"> Open Website </v-btn>
+        <v-btn
+            @click="openWebsite('_self')"
+            @auxclick="openWebsite('_blank')"
+            variant="text"> Open Website </v-btn>
         <v-icon right>mdi-open-in-new</v-icon>
       </div>
     </v-toolbar>
@@ -30,7 +33,7 @@
       </v-sheet>
 
       <v-sheet v-if="content.hasWebsite" width="100%" class="button">
-        <v-btn @click="openWebsite" variant="text" style="width: 100%">
+        <v-btn @click="openWebsite('_self')" @auxclick="openWebsite('_blank')" variant="text" style="width: 100%">
           Open Website
         </v-btn>
       </v-sheet>
@@ -46,7 +49,7 @@
         </v-chip>
       </div>
       <div style="display: flex; flex-wrap: nowrap" v-if="content.hasRepo">
-        <v-btn @click="openRepo">Open Repo</v-btn>
+        <v-btn @click="openRepo('_self')" @auxclick="openRepo('_blank')">Open Repo</v-btn>
         <v-icon>mdi-github</v-icon>
       </div>
     </v-card-actions>
@@ -74,12 +77,12 @@ const chipColor = computed(() => {
 
 const isMobile = useMediaQuery("(max-width: 700px)");
 
-function openWebsite() {
-  window.open(props.content.url);
+function openWebsite(target) {
+  window.open(props.content.url, target);
 }
 
-function openRepo() {
-  window.open(props.content.repo);
+function openRepo(target) {
+  window.open(props.content.repo, target);
 }
 </script>