該当箇所をto属性つきBaseButtonに変更

traPtitech · Aug 23, 2024 · 9c50790 · 9c50790
1 parent ae4fc8c
commit 9c50790
Show file tree

Hide file tree

Showing 16 changed files with 113 additions and 203 deletions.
diff --git a/src/components/Contest/ContestTeams.vue b/src/components/Contest/ContestTeams.vue
@@ -3,7 +3,6 @@ import BaseButton from '/@/components/UI/BaseButton.vue'
 
 import FormInput from '/@/components/UI/FormInput.vue'
 import ContestTeamItem from '/@/components/Contest/ContestTeamItem.vue'
-import { RouterLink } from 'vue-router'
 import { ContestTeam } from '/@/lib/apis'
 import { computed, ref } from 'vue'
 import { searchListCaseInsensitive } from '/@/lib/search'
@@ -30,14 +29,12 @@ const filteredContestTeams = computed(() =>
           icon="magnify"
         />
       </div>
-      <div>
-        <router-link
-          :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
-          :class="$style.link"
-        >
-          <base-button type="primary" icon="mdi:plus">New</base-button>
-        </router-link>
-      </div>
+      <base-button
+        :to="{ name: 'ContestTeamNew', params: { contestId: contestId } }"
+        type="primary"
+        icon="mdi:plus"
+        >New</base-button
+      >
     </div>
     <ul :class="$style.teamList">
       <li v-for="contestTeam in filteredContestTeams" :key="contestTeam.id">
@@ -60,10 +57,6 @@ const filteredContestTeams = computed(() =>
 .searchForm {
   flex-grow: 1;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .teamList {
   list-style: none;
   padding: 0.5rem 0;

diff --git a/src/components/User/UserProfileDesktop.vue b/src/components/User/UserProfileDesktop.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
@@ -22,9 +21,9 @@ defineProps<Props>()
       </div>
       <div :class="$style.accounts">
         <user-accounts :accounts="user.accounts" />
-        <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-          <base-button icon="mdi:account">Edit</base-button>
-        </router-link>
+        <base-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+          >Edit</base-button
+        >
       </div>
     </div>
   </div>
@@ -56,8 +55,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>
diff --git a/src/components/User/UserProfileMobile.vue b/src/components/User/UserProfileMobile.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterLink } from 'vue-router'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import UserAccounts from '/@/components/User/UserAccounts.vue'
@@ -23,9 +22,9 @@ defineProps<Props>()
     </div>
     <div :class="$style.accounts">
       <user-accounts :accounts="user.accounts" />
-      <router-link :to="{ name: 'UserAccounts' }" :class="$style.link">
-        <base-button icon="mdi:account">Edit</base-button>
-      </router-link>
+      <base-button :to="{ name: 'UserAccounts' }" icon="mdi:account"
+        >Edit</base-button
+      >
     </div>
   </div>
 </template>
@@ -57,8 +56,4 @@ defineProps<Props>()
   gap: 2rem;
   margin-top: 1rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 </style>
diff --git a/src/pages/Contest.vue b/src/pages/Contest.vue
@@ -4,7 +4,6 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 
 import apis, { ContestDetail, ContestTeam } from '/@/lib/apis'
-import { RouterLink } from 'vue-router'
 import { getDisplayDuration } from '/@/lib/date'
 import Icon from '/@/components/UI/Icon.vue'
 import useParam from '/@/lib/param'
@@ -31,12 +30,12 @@ const contestTeams: ContestTeam[] = (
         detail="コンテストの詳細です。"
         :class="$style.header"
       />
-      <router-link
+      <base-button
         :to="{ name: 'ContestEdit', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="primary"
+        icon="mdi:pencil"
+        >Edit</base-button
       >
-        <base-button type="primary" icon="mdi:pencil">Edit</base-button>
-      </router-link>
     </div>
     <div>
       <section :class="$style.section">
@@ -73,15 +72,14 @@ const contestTeams: ContestTeam[] = (
       </section>
     </div>
 
-    <router-link :to="{ name: 'Contests' }" :class="$style.link">
-      <base-button
-        :class="$style.backButton"
-        type="secondary"
-        icon="mdi:arrow-left"
-      >
-        Back
-      </base-button>
-    </router-link>
+    <base-button
+      :to="{ name: 'Contests' }"
+      :class="$style.backButton"
+      type="secondary"
+      icon="mdi:arrow-left"
+    >
+      Back
+    </base-button>
   </page-container>
 </template>
 
@@ -94,10 +92,6 @@ const contestTeams: ContestTeam[] = (
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .section {
   margin-bottom: 2rem;
 }

diff --git a/src/pages/ContestEdit.vue b/src/pages/ContestEdit.vue
@@ -4,7 +4,7 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import apis, { EditContestRequest } from '/@/lib/apis'
 import type { ContestDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -131,18 +131,13 @@ const deleteContest = async () => {
     <delete-form target="コンテスト" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <base-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</base-button
       >
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -176,10 +171,6 @@ const deleteContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

diff --git a/src/pages/ContestNew.vue b/src/pages/ContestNew.vue
@@ -3,7 +3,7 @@ import ContentHeader from '/@/components/Layout/ContentHeader.vue'
 import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import apis, { CreateContestRequest } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { computed, reactive, ref } from 'vue'
 import LabeledForm from '/@/components/Form/LabeledForm.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
@@ -114,15 +114,13 @@ const createContest = async () => {
       </labeled-form>
     </form>
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Contests' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <base-button
+        :to="{ name: 'Contests' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</base-button
+      >
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -147,10 +145,6 @@ const createContest = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

diff --git a/src/pages/ContestTeamEdit.vue b/src/pages/ContestTeamEdit.vue
@@ -4,7 +4,7 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import apis, { ContestTeamDetail, EditContestTeamRequest } from '/@/lib/apis'
 import type { ContestDetail, User } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -136,12 +136,12 @@ const deleteContestTeam = async () => {
     <delete-form target="コンテストチーム" @delete="open" />
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <base-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</base-button
       >
-        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -175,10 +175,6 @@ const deleteContestTeam = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

diff --git a/src/pages/ContestTeamNew.vue b/src/pages/ContestTeamNew.vue
@@ -4,7 +4,7 @@ import PageContainer from '/@/components/Layout/PageContainer.vue'
 import BaseButton from '/@/components/UI/BaseButton.vue'
 import apis from '/@/lib/apis'
 import type { AddContestTeamRequest, ContestDetail, User } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import useParam from '/@/lib/param'
 import MemberInput from '/@/components/UI/MemberInput.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
@@ -109,12 +109,12 @@ const createContestTeam = async () => {
     </form>
 
     <div :class="$style.buttonContainer">
-      <router-link
+      <base-button
         :to="{ name: 'Contest', params: { contestId: contestId } }"
-        :class="$style.link"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</base-button
       >
-        <base-button type="secondary" icon="mdi:arrow-left">Back</base-button>
-      </router-link>
       <base-button
         :is-disabled="!canSubmit"
         type="primary"
@@ -139,10 +139,6 @@ const createContestTeam = async () => {
 .labeledForm {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .buttonContainer {
   display: flex;
   justify-content: space-between;

diff --git a/src/pages/Contests.vue b/src/pages/Contests.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { RouterLink } from 'vue-router'
 
 import { useContestStore } from '/@/store/contest'
 
@@ -37,9 +36,12 @@ const filteredContests = computed(() =>
         />
       </div>
       <div>
-        <router-link :to="{ name: 'ContestNew' }" :class="$style.link">
-          <base-button type="primary" icon="mdi:trophy">New</base-button>
-        </router-link>
+        <base-button
+          :to="{ name: 'ContestNew' }"
+          type="primary"
+          icon="mdi:trophy"
+          >New</base-button
+        >
       </div>
     </div>
     <ul :class="$style.contestList">
@@ -66,11 +68,6 @@ const filteredContests = computed(() =>
   flex-grow: 1;
 }
 
-.link {
-  text-decoration: none;
-  color: inherit;
-}
-
 .contestList {
   list-style: none;
   li {

diff --git a/src/pages/Event.vue b/src/pages/Event.vue
@@ -5,7 +5,7 @@ import BaseButton from '/@/components/UI/BaseButton.vue'
 import EventHostItem from '/@/components/Event/EventHostItem.vue'
 
 import apis, { EditEventRequest, EventDetail } from '/@/lib/apis'
-import { RouterLink, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { getDisplayDuration } from '/@/lib/date'
 import useParam from '/@/lib/param'
 import { ref } from 'vue'
@@ -115,15 +115,13 @@ const updateEvent = async () => {
     </div>
 
     <div :class="$style.buttonContainer">
-      <router-link :to="{ name: 'Events' }" :class="$style.link">
-        <base-button
-          :class="$style.backButton"
-          type="secondary"
-          icon="mdi:arrow-left"
-        >
-          Back
-        </base-button>
-      </router-link>
+      <base-button
+        :to="{ name: 'Events' }"
+        :class="$style.backButton"
+        type="secondary"
+        icon="mdi:arrow-left"
+        >Back</base-button
+      >
       <base-button
         :is-disabled="isSending"
         type="primary"
@@ -145,10 +143,6 @@ const updateEvent = async () => {
 .header {
   margin-bottom: 2rem;
 }
-.link {
-  text-decoration: none;
-  color: inherit;
-}
 .section {
   margin-bottom: 2rem;
 }