refactor(frontend): フロントエンドの型エラー解消(途中まで) (#16539)

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

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

* remove unused ts-expect-error

* migrate

* remove unrelated changes

* fix lint

* more type fixes
This commit is contained in:
かっこかり
2025-09-13 08:33:14 +09:00
committed by GitHub
parent c174c5c144
commit 5b4115e21a
56 changed files with 316 additions and 236 deletions

View File

@@ -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 {