diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2025-09-13 08:33:14 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-09-13 08:33:14 +0900 |
| commit | 5b4115e21a6822a434a9bfbbd53f22b3ca961239 (patch) | |
| tree | eaac22e870a95feccc47ccc2693b794d0ccd299f /packages/frontend/src/components/form | |
| parent | Update CHANGELOG.md (diff) | |
| download | misskey-5b4115e21a6822a434a9bfbbd53f22b3ca961239.tar.gz misskey-5b4115e21a6822a434a9bfbbd53f22b3ca961239.tar.bz2 misskey-5b4115e21a6822a434a9bfbbd53f22b3ca961239.zip | |
refactor(frontend): フロントエンドの型エラー解消（途中まで） (#16539)
* fix(frontend): FormLinkをボタンとして使用した際にエラーが出る問題を修正
* refactor(frontend): フロントエンドの型エラー解消
* remove unused ts-expect-error
* migrate
* remove unrelated changes
* fix lint
* more type fixes
Diffstat (limited to 'packages/frontend/src/components/form')
| -rw-r--r-- | packages/frontend/src/components/form/link.vue | 55 |
1 files changed, 32 insertions, 23 deletions
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 { |