From f722dddd75f82bbf8bad1d8ddd5c21825c2c18c9 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 21 Oct 2024 23:23:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=89=E3=83=AD=E3=83=AF=E3=83=BC?=
 =?UTF-8?q?=E3=81=AA=E3=81=A9=E3=81=AEOption=E3=81=8C=E5=BD=93=E3=81=9F?=
 =?UTF-8?q?=E3=82=89=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkMenu.item.vue   | 282 +++++++++---------
 1 file changed, 142 insertions(+), 140 deletions(-)

diff --git a/packages/frontend/src/components/MkMenu.item.vue b/packages/frontend/src/components/MkMenu.item.vue
index 0d51cbc2f4..0b7367d5d2 100644
--- a/packages/frontend/src/components/MkMenu.item.vue
+++ b/packages/frontend/src/components/MkMenu.item.vue
@@ -3,143 +3,145 @@ SPDX-FileCopyrightText: syuilo and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
-<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
-<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
-<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
-	<span style="opacity: 0.7;">{{ item.text }}</span>
-</span>
-<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
-	<span><MkEllipsis/></span>
-</span>
-<MkA
-	v-else-if="item.type === 'link'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:to="item.to"
-	@click.passive="close(true)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</MkA>
-<a
-	v-else-if="item.type === 'a'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:href="item.href"
-	:target="item.target"
-	:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
-	:download="item.download"
-	@click.passive="close(true)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</a>
-<button
-	v-else-if="item.type === 'user'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, { [$style.active]: item.active }]"
-	@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
-	<div v-if="item.indicate" :class="$style.item_content">
-		<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'switch'"
-	role="menuitemcheckbox"
-	tabindex="0"
-	:class="['_button', $style.item]"
-	:disabled="unref(item.disabled)"
-	@click.prevent="switchItem(item)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-	<div :class="$style.item_content">
-		<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
-		<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'radio'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-	:disabled="unref(item.disabled)"
-	@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-	@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
-	@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'radioOption'"
-	role="menuitemradio"
-	tabindex="0"
-	:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
-	@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<div :class="$style.icon">
-		<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
-	</div>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-	</div>
-</button>
-<button
-	v-else-if="item.type === 'parent'"
-	role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
-	@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
-	@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
-	@click.prevent="!preferClick ? null : showChildren(item, $event)"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
-		<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
-	</div>
-</button>
-<button
-	v-else role="menuitem"
-	tabindex="0"
-	:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
-	@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
-	@mouseenter.passive="onItemMouseEnter"
-	@mouseleave.passive="onItemMouseLeave"
->
-	<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
-	<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
-	<div :class="$style.item_content">
-		<span :class="$style.item_content_text">{{ item.text }}</span>
-		<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
-	</div>
-</button>
+<template>
+	<div :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
+	<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
+	<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
+		<span style="opacity: 0.7;">{{ item.text }}</span>
+	</span>
+	<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
+		<span><MkEllipsis/></span>
+	</span>
+	<MkA
+		v-else-if="item.type === 'link'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:to="item.to"
+		@click.passive="close(true)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</MkA>
+	<a
+		v-else-if="item.type === 'a'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:href="item.href"
+		:target="item.target"
+		:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
+		:download="item.download"
+		@click.passive="close(true)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</a>
+	<button
+		v-else-if="item.type === 'user'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, { [$style.active]: item.active }]"
+		@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
+		<div v-if="item.indicate" :class="$style.item_content">
+			<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'switch'"
+		role="menuitemcheckbox"
+		tabindex="0"
+		:class="['_button', $style.item]"
+		:disabled="unref(item.disabled)"
+		@click.prevent="switchItem(item)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+		<div :class="$style.item_content">
+			<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
+			<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'radio'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+		:disabled="unref(item.disabled)"
+		@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+		@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
+		@click.prevent="!preferClick ? null : showRadioOptions(item, $event)"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+			<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'radioOption'"
+		role="menuitemradio"
+		tabindex="0"
+		:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
+		@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<div :class="$style.icon">
+			<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
+		</div>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+		</div>
+	</button>
+	<button
+		v-else-if="item.type === 'parent'"
+		role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
+		@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
+		@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
+		@click.prevent="!preferClick ? null : showChildren(item, $event)"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
+			<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
+		</div>
+	</button>
+	<button
+		v-else role="menuitem"
+		tabindex="0"
+		:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
+		@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
+		@mouseenter.passive="onItemMouseEnter"
+		@mouseleave.passive="onItemMouseLeave"
+	>
+		<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
+		<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
+		<div :class="$style.item_content">
+			<span :class="$style.item_content_text">{{ item.text }}</span>
+			<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -210,14 +212,14 @@ function onItemMouseLeave(ev: MouseEvent) {
 	text-align: center;
 }
 
-.big:not(.asDrawer).item {
+.big:not(.asDrawer) .item {
 	padding: 6px 20px;
 	font-size: 0.95em;
 	line-height: 24px;
 }
 
 .asDrawer {
-	&.item {
+	> .item {
 		font-size: 1em;
 		padding: 12px 24px;
 
@@ -232,7 +234,7 @@ function onItemMouseLeave(ev: MouseEvent) {
 		}
 	}
 
-	&.divider {
+	> .divider {
 		margin: 12px 0;
 	}
 }