From 5b4115e21a6822a434a9bfbbd53f22b3ca961239 Mon Sep 17 00:00:00 2001
From: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Sat, 13 Sep 2025 08:33:14 +0900
Subject: refactor(frontend): フロントエンドの型エラー解消（途中まで） (#16539)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): FormLinkをボタンとして使用した際にエラーが出る問題を修正

* refactor(frontend): フロントエンドの型エラー解消

* remove unused ts-expect-error

* migrate

* remove unrelated changes

* fix lint

* more type fixes
---
 packages/frontend/src/components/form/link.vue | 55 +++++++++++++++-----------
 1 file changed, 32 insertions(+), 23 deletions(-)

(limited to 'packages/frontend/src/components/form')

diff --git a/packages/frontend/src/components/form/link.vue b/packages/frontend/src/components/form/link.vue
index e60155f4af..63cf1815c0 100644
--- a/packages/frontend/src/components/form/link.vue
+++ b/packages/frontend/src/components/form/link.vue
@@ -4,31 +4,39 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.inline]: inline }]">
-	<a v-if="external" :class="$style.main" class="_button" :href="to" target="_blank">
+<component
+	:is="to ? 'div' : 'button'"
+	:class="[
+		$style.root,
+		{
+			[$style.inline]: inline,
+			'_button': !to,
+		},
+	]"
+>
+	<component
+		:is="to ? (external ? 'a' : 'MkA') : 'div'"
+		:class="[$style.main, { [$style.active]: active }]"
+		class="_button"
+		v-bind="to ? (external ? { href: to, target: '_blank' } : { to, behavior }) : {}"
+	>
 		<span :class="$style.icon"><slot name="icon"></slot></span>
-		<span :class="$style.text"><slot></slot></span>
+		<div :class="$style.headerText">
+			<div>
+				<MkCondensedLine :minScale="2 / 3"><slot></slot></MkCondensedLine>
+			</div>
+		</div>
 		<span :class="$style.suffix">
 			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-external-link"></i>
+			<i :class="to && external ? 'ti ti-external-link' : 'ti ti-chevron-right'"></i>
 		</span>
-	</a>
-	<MkA v-else :class="[$style.main, { [$style.active]: active }]" class="_button" :to="to" :behavior="behavior">
-		<span :class="$style.icon"><slot name="icon"></slot></span>
-		<span :class="$style.text"><slot></slot></span>
-		<span :class="$style.suffix">
-			<span :class="$style.suffixText"><slot name="suffix"></slot></span>
-			<i class="ti ti-chevron-right"></i>
-		</span>
-	</MkA>
-</div>
+	</component>
+</component>
 </template>
 
 <script lang="ts" setup>
-import { } from 'vue';
-
-const props = defineProps<{
-	to: string;
+defineProps<{
+	to?: string;
 	active?: boolean;
 	external?: boolean;
 	behavior?: null | 'window' | 'browser';
@@ -75,17 +83,18 @@ const props = defineProps<{
 	&:empty {
 		display: none;
 
-		& + .text {
+		& + .headerText {
 			padding-left: 4px;
 		}
 	}
 }
 
-.text {
-	flex-shrink: 1;
-	white-space: normal;
+.headerText {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: start;
+	overflow: hidden;
 	padding-right: 12px;
-	text-align: center;
 }
 
 .suffix {
-- 
cgit v1.2.3-freya