RouteButton component

spraakbanken · Jan 3, 2024 · 3290a88 · 3290a88
1 parent 5bef8d2
commit 3290a88
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@ As this project is a user-facing application, the places in the semantic version
 
 - Request `resource-info` once for all resources
 - `UrlButton` component replaces `a > ActionButton`
+- `RouteButton` component replaces `router-link > ActionButton`
 - `ActionButton` uses `<button>` and is tabbable
 
 ### Removed

diff --git a/src/components/RouteButton.vue b/src/components/RouteButton.vue
@@ -0,0 +1,16 @@
+<script setup>
+import ActionButton from "./ActionButton.vue";
+
+defineProps({
+  to: { type: [String, Object], required: true },
+  disabled: Boolean,
+});
+</script>
+
+<template>
+  <router-link v-slot="{ navigate }" :to="to" custom>
+    <ActionButton :disabled="disabled" v-bind="$attrs" @click="navigate">
+      <slot />
+    </ActionButton>
+  </router-link>
+</template>
diff --git a/src/corpus/CorpusDelete.vue b/src/corpus/CorpusDelete.vue
@@ -2,6 +2,7 @@
 import { useRouter } from "vue-router";
 import useCorpusIdParam from "./corpusIdParam.composable";
 import ActionButton from "@/components/ActionButton.vue";
+import RouteButton from "@/components/RouteButton.vue";
 import Section from "@/components/Section.vue";
 import PendingContent from "@/spin/PendingContent.vue";
 import useCorpus from "./corpus.composable";
@@ -27,9 +28,9 @@ async function doDelete() {
           {{ $t("corpus.delete") }}
         </ActionButton>
 
-        <router-link :to="`/corpus/${corpusId}`">
-          <ActionButton>{{ $t("cancel") }}</ActionButton>
-        </router-link>
+        <RouteButton :to="`/corpus/${corpusId}`">{{
+          $t("cancel")
+        }}</RouteButton>
       </div>
     </Section>
   </PendingContent>

diff --git a/src/corpus/Overview.vue b/src/corpus/Overview.vue
@@ -8,27 +8,27 @@
       <Panel :title="$t('configuration')" class="mb-4">
         <Config />
         <template #controls>
-          <router-link :to="`/corpus/${corpusId}/config`">
-            <ActionButton :class="{ 'button-primary': isNeedingConfig }">
-              <icon :icon="['fas', 'pen']" class="mr-1" />
-              {{ $t("edit") }}
-            </ActionButton>
-          </router-link>
+          <RouteButton
+            :to="`/corpus/${corpusId}/config`"
+            :class="{ 'button-primary': isNeedingConfig }"
+          >
+            <icon :icon="['fas', 'pen']" class="mr-1" />
+            {{ $t("edit") }}
+          </RouteButton>
         </template>
       </Panel>
 
       <Panel :title="$t('metadata')" class="mb-4">
         <Metadata />
         <template #controls>
-          <router-link
+          <RouteButton
             v-if="!isNeedingConfig"
             :to="`/corpus/${corpusId}/metadata`"
+            :class="{ 'button-primary': isNeedingMeta }"
           >
-            <ActionButton :class="{ 'button-primary': isNeedingMeta }">
-              <icon :icon="['fas', 'pen']" class="mr-1" />
-              {{ $t("edit") }}
-            </ActionButton>
-          </router-link>
+            <icon :icon="['fas', 'pen']" class="mr-1" />
+            {{ $t("edit") }}
+          </RouteButton>
           <ActionButton v-else disabled>
             <icon :icon="['fas', 'pen']" class="mr-1" />
             {{ $t("edit") }}
@@ -61,6 +61,7 @@ import { useCorpusState } from "./corpusState.composable";
 import Metadata from "./config/Metadata.vue";
 import Panel from "@/components/Panel.vue";
 import ActionButton from "@/components/ActionButton.vue";
+import RouteButton from "@/components/RouteButton.vue";
 import Config from "./config/Config.vue";
 import Sources from "./sources/Sources.vue";
 import JobStatus from "./job/JobStatus.vue";

diff --git a/src/corpus/config/CorpusConfiguration.vue b/src/corpus/config/CorpusConfiguration.vue
@@ -84,12 +84,10 @@
     </FormKit>
     <div class="flex justify-center">
       <PendingContent :on="`corpus/${corpusId}`">
-        <router-link :to="`/corpus/${corpusId}/delete`">
-          <ActionButton class="button-danger">
-            <icon :icon="['far', 'trash-can']" class="mr-1" />
-            {{ $t("corpus.delete") }}
-          </ActionButton>
-        </router-link>
+        <RouteButton :to="`/corpus/${corpusId}/delete`" class="button-danger">
+          <icon :icon="['far', 'trash-can']" class="mr-1" />
+          {{ $t("corpus.delete") }}
+        </RouteButton>
       </PendingContent>
     </div>
   </div>
@@ -100,7 +98,7 @@ import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import useCorpusIdParam from "@/corpus/corpusIdParam.composable";
-import ActionButton from "@/components/ActionButton.vue";
+import RouteButton from "@/components/RouteButton.vue";
 import Section from "@/components/Section.vue";
 import PendingContent from "@/spin/PendingContent.vue";
 import useConfig from "./config.composable";

diff --git a/src/home/Home.vue b/src/home/Home.vue
@@ -7,6 +7,7 @@ import ActionButton from "@/components/ActionButton.vue";
 import UrlButton from "@/components/UrlButton.vue";
 import HomeIllustration from "./HomeIllustration.vue";
 import HomeNews from "./HomeNews.vue";
+import RouteButton from "@/components/RouteButton.vue";
 
 const { isAuthenticated, canUserWrite, payload } = useAuth();
 const logoutUrl = getLogoutUrl();
@@ -41,12 +42,10 @@ const logoutUrl = getLogoutUrl();
             </div>
 
             <div v-if="!isAuthenticated">
-              <router-link to="/signup">
-                <ActionButton class="button-success">
-                  <icon :icon="['fas', 'user-plus']" />
-                  {{ $t("signup") }}
-                </ActionButton>
-              </router-link>
+              <RouteButton to="/signup" class="button-success">
+                <icon :icon="['fas', 'user-plus']" />
+                {{ $t("signup") }}
+              </RouteButton>
               <div class="my-1 text-sm opacity-70">
                 {{ $t("signup.help") }}
               </div>
@@ -58,11 +57,9 @@ const logoutUrl = getLogoutUrl();
             >
               <div>{{ $t("welcome", { name: payload.name }) }}</div>
 
-              <router-link to="/corpus">
-                <ActionButton class="button-primary">
-                  {{ $t("mydata") }}
-                </ActionButton>
-              </router-link>
+              <RouteButton to="/corpus" class="button-primary">
+                {{ $t("mydata") }}
+              </RouteButton>
 
               <UrlButton :href="logoutUrl">
                 <icon :icon="['fas', 'person-running']" />