fix: ドロワーなどのOptionが当たらない問題を修正
This commit is contained in:
kakkokari-gtyih
parent
4f5d58cea1
commit
f722dddd75
|
|
@ -3,143 +3,145 @@ SPDX-FileCopyrightText: syuilo and misskey-project
|
||||||
SPDX-License-Identifier: AGPL-3.0-only
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
|
<template>
|
||||||
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
|
<div :class="{ [$style.asDrawer]: asDrawer, [$style.big]: big, [$style.center]: center }">
|
||||||
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
|
<div v-if="item.type === 'divider'" role="separator" tabindex="-1" :class="$style.divider"></div>
|
||||||
<span style="opacity: 0.7;">{{ item.text }}</span>
|
<span v-else-if="item.type === 'label'" role="menuitem" tabindex="-1" :class="[$style.label, $style.item]">
|
||||||
</span>
|
<span style="opacity: 0.7;">{{ item.text }}</span>
|
||||||
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
|
</span>
|
||||||
<span><MkEllipsis/></span>
|
<span v-else-if="item.type === 'pending'" role="menuitem" tabindex="0" :class="[$style.pending, $style.item]">
|
||||||
</span>
|
<span><MkEllipsis/></span>
|
||||||
<MkA
|
</span>
|
||||||
v-else-if="item.type === 'link'"
|
<MkA
|
||||||
role="menuitem"
|
v-else-if="item.type === 'link'"
|
||||||
tabindex="0"
|
role="menuitem"
|
||||||
:class="['_button', $style.item]"
|
tabindex="0"
|
||||||
:to="item.to"
|
:class="['_button', $style.item]"
|
||||||
@click.passive="close(true)"
|
:to="item.to"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.passive="close(true)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@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"/>
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
||||||
<div :class="$style.item_content">
|
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
||||||
<span :class="$style.item_content_text">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
||||||
</div>
|
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||||
</MkA>
|
</div>
|
||||||
<a
|
</MkA>
|
||||||
v-else-if="item.type === 'a'"
|
<a
|
||||||
role="menuitem"
|
v-else-if="item.type === 'a'"
|
||||||
tabindex="0"
|
role="menuitem"
|
||||||
:class="['_button', $style.item]"
|
tabindex="0"
|
||||||
:href="item.href"
|
:class="['_button', $style.item]"
|
||||||
:target="item.target"
|
:href="item.href"
|
||||||
:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
|
:target="item.target"
|
||||||
:download="item.download"
|
:rel="item.target === '_blank' ? 'noopener noreferrer' : undefined"
|
||||||
@click.passive="close(true)"
|
:download="item.download"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.passive="close(true)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@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">
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
||||||
<span :class="$style.item_content_text">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
||||||
</div>
|
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||||
</a>
|
</div>
|
||||||
<button
|
</a>
|
||||||
v-else-if="item.type === 'user'"
|
<button
|
||||||
role="menuitem"
|
v-else-if="item.type === 'user'"
|
||||||
tabindex="0"
|
role="menuitem"
|
||||||
:class="['_button', $style.item, { [$style.active]: item.active }]"
|
tabindex="0"
|
||||||
@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
|
:class="['_button', $style.item, { [$style.active]: item.active }]"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.prevent="item.active ? close(false) : clicked(item.action, $event)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@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">
|
<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
|
||||||
<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
<div v-if="item.indicate" :class="$style.item_content">
|
||||||
</div>
|
<span :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</button>
|
||||||
v-else-if="item.type === 'switch'"
|
<button
|
||||||
role="menuitemcheckbox"
|
v-else-if="item.type === 'switch'"
|
||||||
tabindex="0"
|
role="menuitemcheckbox"
|
||||||
:class="['_button', $style.item]"
|
tabindex="0"
|
||||||
:disabled="unref(item.disabled)"
|
:class="['_button', $style.item]"
|
||||||
@click.prevent="switchItem(item)"
|
:disabled="unref(item.disabled)"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.prevent="switchItem(item)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@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)"/>
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
||||||
<div :class="$style.item_content">
|
<MkSwitchButton v-else :class="$style.switchButton" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
|
||||||
<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
|
<span :class="[$style.item_content_text, { [$style.switchText]: !item.icon }]">{{ item.text }}</span>
|
||||||
</div>
|
<MkSwitchButton v-if="item.icon" :class="[$style.switchButton, $style.caret]" :checked="item.ref" :disabled="item.disabled" @toggle="switchItem(item)"/>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</button>
|
||||||
v-else-if="item.type === 'radio'"
|
<button
|
||||||
role="menuitem"
|
v-else-if="item.type === 'radio'"
|
||||||
tabindex="0"
|
role="menuitem"
|
||||||
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
tabindex="0"
|
||||||
:disabled="unref(item.disabled)"
|
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
||||||
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
|
:disabled="unref(item.disabled)"
|
||||||
@keydown.enter.prevent="preferClick ? null : showRadioOptions(item, $event)"
|
@mouseenter.prevent="preferClick ? null : showRadioOptions(item, $event)"
|
||||||
@click.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">
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
|
||||||
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
||||||
</div>
|
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</button>
|
||||||
v-else-if="item.type === 'radioOption'"
|
<button
|
||||||
role="menuitemradio"
|
v-else-if="item.type === 'radioOption'"
|
||||||
tabindex="0"
|
role="menuitemradio"
|
||||||
:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
|
tabindex="0"
|
||||||
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
|
:class="['_button', $style.item, $style.radio, { [$style.active]: unref(item.active) }]"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.prevent="unref(item.active) ? null : clicked(item.action, $event, false)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@mouseenter.passive="onItemMouseEnter"
|
||||||
>
|
@mouseleave.passive="onItemMouseLeave"
|
||||||
<div :class="$style.icon">
|
>
|
||||||
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
|
<div :class="$style.icon">
|
||||||
</div>
|
<span :class="[$style.radioIcon, { [$style.radioChecked]: unref(item.active) }]"></span>
|
||||||
<div :class="$style.item_content">
|
</div>
|
||||||
<span :class="$style.item_content_text">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
</div>
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</button>
|
||||||
v-else-if="item.type === 'parent'"
|
<button
|
||||||
role="menuitem"
|
v-else-if="item.type === 'parent'"
|
||||||
tabindex="0"
|
role="menuitem"
|
||||||
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
tabindex="0"
|
||||||
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
|
:class="['_button', $style.item, $style.parent, { [$style.active]: childShowingItem === item }]"
|
||||||
@keydown.enter.prevent="preferClick ? null : showChildren(item, $event)"
|
@mouseenter.prevent="preferClick ? null : showChildren(item, $event)"
|
||||||
@click.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">
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]" style="pointer-events: none;"></i>
|
||||||
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
<span :class="$style.item_content_text" style="pointer-events: none;">{{ item.text }}</span>
|
||||||
</div>
|
<span :class="$style.caret" style="pointer-events: none;"><i class="ti ti-chevron-right ti-fw"></i></span>
|
||||||
</button>
|
</div>
|
||||||
<button
|
</button>
|
||||||
v-else role="menuitem"
|
<button
|
||||||
tabindex="0"
|
v-else role="menuitem"
|
||||||
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
|
tabindex="0"
|
||||||
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
|
:class="['_button', $style.item, { [$style.danger]: item.danger, [$style.active]: unref(item.active) }]"
|
||||||
@mouseenter.passive="onItemMouseEnter"
|
@click.prevent="unref(item.active) ? close(false) : clicked(item.action, $event)"
|
||||||
@mouseleave.passive="onItemMouseLeave"
|
@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"/>
|
<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
|
||||||
<div :class="$style.item_content">
|
<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
|
||||||
<span :class="$style.item_content_text">{{ item.text }}</span>
|
<div :class="$style.item_content">
|
||||||
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
<span :class="$style.item_content_text">{{ item.text }}</span>
|
||||||
</div>
|
<span v-if="item.indicate" :class="$style.indicator" class="_blink"><i class="_indicatorCircle"></i></span>
|
||||||
</button>
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
@ -210,14 +212,14 @@ function onItemMouseLeave(ev: MouseEvent) {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.big:not(.asDrawer).item {
|
.big:not(.asDrawer) .item {
|
||||||
padding: 6px 20px;
|
padding: 6px 20px;
|
||||||
font-size: 0.95em;
|
font-size: 0.95em;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.asDrawer {
|
.asDrawer {
|
||||||
&.item {
|
> .item {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
padding: 12px 24px;
|
padding: 12px 24px;
|
||||||
|
|
||||||
|
|
@ -232,7 +234,7 @@ function onItemMouseLeave(ev: MouseEvent) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.divider {
|
> .divider {
|
||||||
margin: 12px 0;
|
margin: 12px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue