usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
kakkokari-gtyih 2025-09-12 20:05:15 +09:00
parent c174c5c144
commit 8182425b33
1 changed files with 39 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
packages/frontend/src/components/form/link.vue
View File

@ -4,31 +4,42 @@ 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 v-if="$slots.caption" :class="$style.headerTextSub">
<MkCondensedLine :minScale="2 / 3"><slot name="caption"></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;
to?: string;
active?: boolean;
external?: boolean;
behavior?: null | 'window' | 'browser';
@ -75,17 +86,23 @@ 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;
}
.headerTextSub {
color: var(--fgTransparentWeak);
font-size: .85em;
}
.suffix {