replace dropdown

This commit is contained in:
pa
2026-01-08 20:19:37 +09:00
committed by Natsumi
parent 914fea6ccf
commit 3d37cebefc
7 changed files with 237 additions and 197 deletions
@@ -1,40 +1,46 @@
<template>
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false">
<div>
<DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
<DropdownMenuTrigger as-child>
<el-button type="default" :icon="Back" size="small" circle></el-button>
</div>
<template #dropdown>
</DropdownMenuTrigger>
<DropdownMenuContent class="favorites-dropdown">
<span style="font-weight: bold; display: block; text-align: center">
{{ t(tooltipContent) }}
</span>
<el-dropdown-menu>
<template v-for="groupAPI in favoriteGroup" :key="groupAPI.name">
<el-dropdown-item
v-if="isLocalFavorite || groupAPI.name !== currentGroup?.name"
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="handleDropdownItemClick(groupAPI)">
{{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
</el-dropdown-item>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
<DropdownMenuSeparator />
<DropdownMenuItem
v-for="groupAPI in favoriteGroupList"
:key="groupAPI.name"
v-if="isLocalFavorite || groupAPI?.name !== currentGroup?.name"
style="display: block; margin: 10px 0"
:disabled="groupAPI.count >= groupAPI.capacity"
@click="handleDropdownItemClick(groupAPI)">
{{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</template>
<script setup>
import { computed, ref } from 'vue';
import { Back } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../../components/ui/dropdown-menu';
import { favoriteRequest } from '../../../api';
const { t } = useI18n();
const props = defineProps({
favoriteGroup: {
type: Object,
type: [Array, Object],
required: true
},
currentGroup: {
@@ -58,8 +64,15 @@
const tooltipContent = computed(() =>
props.isLocalFavorite ? t('view.favorite.copy_tooltip') : t('view.favorite.move_tooltip')
);
const favoriteGroupList = computed(() => {
const rawGroup = props.favoriteGroup;
const source = Array.isArray(rawGroup) ? rawGroup : Array.isArray(rawGroup?.value) ? rawGroup.value : [];
return source.filter((entry) => entry && typeof entry === 'object' && typeof entry.name === 'string');
});
const moveDropdownOpen = ref(false);
function handleDropdownItemClick(groupAPI) {
moveDropdownOpen.value = false;
if (props.isLocalFavorite) {
if (props.type === 'world') {
addFavoriteWorld(groupAPI);