MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-19 06:43:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

replace dropdown

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NavMenu.vue
View File

@@ -46,7 +46,7 @@
v-for="entry in item.children" v-for="entry in item.children"
:key="entry.index" :key="entry.index"
:index="entry.index" :index="entry.index"
class="pl-8!" class="pl-9!"
:class="{ notify: isEntryNotified(entry) }" :class="{ notify: isEntryNotified(entry) }"
@click="handleSubmenuClick(entry, item.index)"> @click="handleSubmenuClick(entry, item.index)">
<i v-show="entry.icon" :class="entry.icon"></i> <i v-show="entry.icon" :class="entry.icon"></i>
@@ -254,7 +254,6 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { import {
useAdvancedSettingsStore,
useAppearanceSettingsStore, useAppearanceSettingsStore,
useAuthStore, useAuthStore,
useSearchStore, useSearchStore,
@@ -262,7 +261,6 @@
useVRCXUpdaterStore useVRCXUpdaterStore
} from '../stores'; } from '../stores';
import { THEME_CONFIG, links, navDefinitions } from '../shared/constants'; import { THEME_CONFIG, links, navDefinitions } from '../shared/constants';
import { getSentry } from '../plugin';
import { openExternalLink } from '../shared/utils'; import { openExternalLink } from '../shared/utils';
import { useThemePrimaryColor } from '../composables/useElementTheme'; import { useThemePrimaryColor } from '../composables/useElementTheme';

71
src/components/dialogs/NewInstanceDialog.vue
View File

@@ -15,10 +15,12 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.accessType" :model-value="newInstanceDialog.accessType"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.accessType = value; (value) => {
buildInstance(); newInstanceDialog.accessType = value;
}"> buildInstance();
}
">
<ToggleGroupItem value="public">{{ <ToggleGroupItem value="public">{{
t('dialog.new_instance.access_type_public') t('dialog.new_instance.access_type_public')
}}</ToggleGroupItem> }}</ToggleGroupItem>
@@ -48,18 +50,24 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.groupAccessType" :model-value="newInstanceDialog.groupAccessType"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.groupAccessType = value; (value) => {
buildInstance(); newInstanceDialog.groupAccessType = value;
}"> buildInstance();
}
">
<ToggleGroupItem <ToggleGroupItem
value="members" value="members"
:disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')" :disabled="
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-open-create')
"
>{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem >{{ t('dialog.new_instance.group_access_type_members') }}</ToggleGroupItem
> >
<ToggleGroupItem <ToggleGroupItem
value="plus" value="plus"
:disabled="!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')" :disabled="
!hasGroupPermission(newInstanceDialog.groupRef, 'group-instance-plus-create')
"
>{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem >{{ t('dialog.new_instance.group_access_type_plus') }}</ToggleGroupItem
> >
<ToggleGroupItem <ToggleGroupItem
@@ -79,10 +87,12 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.region" :model-value="newInstanceDialog.region"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.region = value; (value) => {
buildInstance(); newInstanceDialog.region = value;
}"> buildInstance();
}
">
<ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem> <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
<ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem> <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
<ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem> <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
@@ -198,10 +208,12 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.accessType" :model-value="newInstanceDialog.accessType"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.accessType = value; (value) => {
buildLegacyInstance(); newInstanceDialog.accessType = value;
}"> buildLegacyInstance();
}
">
<ToggleGroupItem value="public">{{ <ToggleGroupItem value="public">{{
t('dialog.new_instance.access_type_public') t('dialog.new_instance.access_type_public')
}}</ToggleGroupItem> }}</ToggleGroupItem>
@@ -231,10 +243,12 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.groupAccessType" :model-value="newInstanceDialog.groupAccessType"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.groupAccessType = value; (value) => {
buildLegacyInstance(); newInstanceDialog.groupAccessType = value;
}"> buildLegacyInstance();
}
">
<ToggleGroupItem value="members">{{ <ToggleGroupItem value="members">{{
t('dialog.new_instance.group_access_type_members') t('dialog.new_instance.group_access_type_members')
}}</ToggleGroupItem> }}</ToggleGroupItem>
@@ -253,10 +267,12 @@
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="newInstanceDialog.region" :model-value="newInstanceDialog.region"
@update:model-value="(value) => { @update:model-value="
newInstanceDialog.region = value; (value) => {
buildLegacyInstance(); newInstanceDialog.region = value;
}"> buildLegacyInstance();
}
">
<ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem> <ToggleGroupItem value="US West">{{ t('dialog.new_instance.region_usw') }}</ToggleGroupItem>
<ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem> <ToggleGroupItem value="US East">{{ t('dialog.new_instance.region_use') }}</ToggleGroupItem>
<ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem> <ToggleGroupItem value="Europe">{{ t('dialog.new_instance.region_eu') }}</ToggleGroupItem>
@@ -524,8 +540,6 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
import { import {
copyToClipboard, copyToClipboard,
getLaunchURL, getLaunchURL,
@@ -545,6 +559,7 @@
useUserStore useUserStore
} from '../../stores'; } from '../../stores';
import { groupRequest, instanceRequest, worldRequest } from '../../api'; import { groupRequest, instanceRequest, worldRequest } from '../../api';
import { ToggleGroup, ToggleGroupItem } from '../ui/toggle-group';
import { getNextDialogIndex } from '../../shared/utils/base/ui'; import { getNextDialogIndex } from '../../shared/utils/base/ui';
import InviteDialog from './InviteDialog/InviteDialog.vue'; import InviteDialog from './InviteDialog/InviteDialog.vue';

88
src/views/Favorites/FavoritesAvatar.vue
View File

@@ -17,45 +17,44 @@
class="favorites-toolbar__search" class="favorites-toolbar__search"
:placeholder="t('view.favorite.avatars.search')" :placeholder="t('view.favorite.avatars.search')"
@input="searchAvatarFavorites" /> @input="searchAvatarFavorites" />
<el-dropdown ref="avatarToolbarMenuRef" trigger="click" :hide-on-click="false"> <DropdownMenu v-model:open="avatarToolbarMenuOpen">
<el-button :icon="MoreFilled" size="small" circle /> <DropdownMenuTrigger as-child>
<template #dropdown> <el-button :icon="MoreFilled" size="small" circle />
<el-dropdown-menu class="favorites-dropdown"> </DropdownMenuTrigger>
<li class="favorites-dropdown__control" @click.stop> <DropdownMenuContent class="favorites-dropdown">
<div class="favorites-dropdown__control-header"> <li class="favorites-dropdown__control" @click.stop>
<span>Scale</span> <div class="favorites-dropdown__control-header">
<span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span> <span>Scale</span>
</div> <span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
<Slider </div>
v-model="avatarCardScaleValue" <Slider
class="favorites-dropdown__slider" v-model="avatarCardScaleValue"
:min="avatarCardScaleSlider.min" class="favorites-dropdown__slider"
:max="avatarCardScaleSlider.max" :min="avatarCardScaleSlider.min"
:step="avatarCardScaleSlider.step" /> :max="avatarCardScaleSlider.max"
</li> :step="avatarCardScaleSlider.step" />
<li class="favorites-dropdown__control" @click.stop> </li>
<div class="favorites-dropdown__control-header"> <li class="favorites-dropdown__control" @click.stop>
<span>Spacing</span> <div class="favorites-dropdown__control-header">
<span class="favorites-dropdown__control-value"> <span>Spacing</span>
{{ avatarCardSpacingPercent }}% <span class="favorites-dropdown__control-value"> {{ avatarCardSpacingPercent }}% </span>
</span> </div>
</div> <Slider
<Slider v-model="avatarCardSpacingValue"
v-model="avatarCardSpacingValue" class="favorites-dropdown__slider"
class="favorites-dropdown__slider" :min="avatarCardSpacingSlider.min"
:min="avatarCardSpacingSlider.min" :max="avatarCardSpacingSlider.max"
:max="avatarCardSpacingSlider.max" :step="avatarCardSpacingSlider.step" />
:step="avatarCardSpacingSlider.step" /> </li>
</li> <DropdownMenuSeparator />
<el-dropdown-item @click="handleAvatarImportClick"> <DropdownMenuItem @click="handleAvatarImportClick">
{{ t('view.favorite.import') }} {{ t('view.favorite.import') }}
</el-dropdown-item> </DropdownMenuItem>
<el-dropdown-item divided @click="handleAvatarExportClick"> <DropdownMenuItem @click="handleAvatarExportClick">
{{ t('view.favorite.export') }} {{ t('view.favorite.export') }}
</el-dropdown-item> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</div> </div>
</div> </div>
<el-splitter class="favorites-splitter" @resize-end="handleAvatarSplitterResize"> <el-splitter class="favorites-splitter" @resize-end="handleAvatarSplitterResize">
@@ -487,6 +486,13 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores'; import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { avatarRequest, favoriteRequest } from '../../api'; import { avatarRequest, favoriteRequest } from '../../api';
@@ -597,7 +603,7 @@
const avatarEditMode = ref(false); const avatarEditMode = ref(false);
const selectedGroup = ref(null); const selectedGroup = ref(null);
const activeGroupMenu = ref(null); const activeGroupMenu = ref(null);
const avatarToolbarMenuRef = ref(); const avatarToolbarMenuOpen = ref(false);
const isCreatingLocalGroup = ref(false); const isCreatingLocalGroup = ref(false);
const newLocalGroupName = ref(''); const newLocalGroupName = ref('');
const newLocalGroupInput = ref(null); const newLocalGroupInput = ref(null);
@@ -632,7 +638,7 @@
const historyGroupMenuKey = 'history'; const historyGroupMenuKey = 'history';
const closeAvatarToolbarMenu = () => { const closeAvatarToolbarMenu = () => {
avatarToolbarMenuRef.value?.handleClose?.(); avatarToolbarMenuOpen.value = false;
}; };
function handleAvatarImportClick() { function handleAvatarImportClick() {

90
src/views/Favorites/FavoritesFriend.vue
View File

@@ -17,47 +17,44 @@
class="favorites-toolbar__search" class="favorites-toolbar__search"
:placeholder="t('view.favorite.worlds.search')" :placeholder="t('view.favorite.worlds.search')"
@input="searchFriendFavorites" /> @input="searchFriendFavorites" />
<el-dropdown ref="friendToolbarMenuRef" trigger="click" :hide-on-click="false"> <DropdownMenu v-model:open="friendToolbarMenuOpen">
<el-button :icon="MoreFilled" size="small" circle @click.stop /> <DropdownMenuTrigger as-child>
<template #dropdown> <el-button :icon="MoreFilled" size="small" circle />
<el-dropdown-menu class="favorites-dropdown"> </DropdownMenuTrigger>
<li class="favorites-dropdown__control" @click.stop> <DropdownMenuContent class="favorites-dropdown">
<div class="favorites-dropdown__control-header"> <li class="favorites-dropdown__control" @click.stop>
<span>Scale</span> <div class="favorites-dropdown__control-header">
<span class="favorites-dropdown__control-value"> <span>Scale</span>
{{ friendCardScalePercent }}% <span class="favorites-dropdown__control-value"> {{ friendCardScalePercent }}% </span>
</span> </div>
</div> <Slider
<Slider v-model="friendCardScaleValue"
v-model="friendCardScaleValue" class="favorites-dropdown__slider"
class="favorites-dropdown__slider" :min="friendCardScaleSlider.min"
:min="friendCardScaleSlider.min" :max="friendCardScaleSlider.max"
:max="friendCardScaleSlider.max" :step="friendCardScaleSlider.step" />
:step="friendCardScaleSlider.step" /> </li>
</li> <li class="favorites-dropdown__control" @click.stop>
<li class="favorites-dropdown__control" @click.stop> <div class="favorites-dropdown__control-header">
<div class="favorites-dropdown__control-header"> <span>Spacing</span>
<span>Spacing</span> <span class="favorites-dropdown__control-value"> {{ friendCardSpacingPercent }}% </span>
<span class="favorites-dropdown__control-value"> </div>
{{ friendCardSpacingPercent }}% <Slider
</span> v-model="friendCardSpacingValue"
</div> class="favorites-dropdown__slider"
<Slider :min="friendCardSpacingSlider.min"
v-model="friendCardSpacingValue" :max="friendCardSpacingSlider.max"
class="favorites-dropdown__slider" :step="friendCardSpacingSlider.step" />
:min="friendCardSpacingSlider.min" </li>
:max="friendCardSpacingSlider.max" <DropdownMenuSeparator />
:step="friendCardSpacingSlider.step" /> <DropdownMenuItem @click="handleFriendImportClick">
</li> {{ t('view.favorite.import') }}
<el-dropdown-item @click="handleFriendImportClick"> </DropdownMenuItem>
{{ t('view.favorite.import') }} <DropdownMenuItem @click="handleFriendExportClick">
</el-dropdown-item> {{ t('view.favorite.export') }}
<el-dropdown-item divided @click="handleFriendExportClick"> </DropdownMenuItem>
{{ t('view.favorite.export') }} </DropdownMenuContent>
</el-dropdown-item> </DropdownMenu>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
</div> </div>
<el-splitter class="favorites-splitter" @resize-end="handleFriendSplitterResize"> <el-splitter class="favorites-splitter" @resize-end="handleFriendSplitterResize">
@@ -279,6 +276,13 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores'; import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
import { Badge } from '../../components/ui/badge'; import { Badge } from '../../components/ui/badge';
@@ -363,7 +367,7 @@
const friendEditMode = ref(false); const friendEditMode = ref(false);
const selectedGroup = ref(null); const selectedGroup = ref(null);
const activeGroupMenu = ref(null); const activeGroupMenu = ref(null);
const friendToolbarMenuRef = ref(); const friendToolbarMenuOpen = ref(false);
const sortFav = computed({ const sortFav = computed({
get() { get() {
@@ -380,7 +384,7 @@
const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote'); const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote');
const closeFriendToolbarMenu = () => { const closeFriendToolbarMenu = () => {
friendToolbarMenuRef.value?.handleClose?.(); friendToolbarMenuOpen.value = false;
}; };
function handleFriendImportClick() { function handleFriendImportClick() {

90
src/views/Favorites/FavoritesWorld.vue
View File

@@ -17,47 +17,44 @@
class="favorites-toolbar__search" class="favorites-toolbar__search"
:placeholder="t('view.favorite.worlds.search')" :placeholder="t('view.favorite.worlds.search')"
@input="searchWorldFavorites" /> @input="searchWorldFavorites" />
<el-dropdown ref="worldToolbarMenuRef" trigger="click" :hide-on-click="false"> <DropdownMenu v-model:open="worldToolbarMenuOpen">
<el-button :icon="MoreFilled" size="small" circle /> <DropdownMenuTrigger as-child>
<template #dropdown> <el-button :icon="MoreFilled" size="small" circle />
<el-dropdown-menu class="favorites-dropdown"> </DropdownMenuTrigger>
<li class="favorites-dropdown__control" @click.stop> <DropdownMenuContent class="favorites-dropdown">
<div class="favorites-dropdown__control-header"> <li class="favorites-dropdown__control" @click.stop>
<span>Scale</span> <div class="favorites-dropdown__control-header">
<span class="favorites-dropdown__control-value"> <span>Scale</span>
{{ worldCardScalePercent }}% <span class="favorites-dropdown__control-value"> {{ worldCardScalePercent }}% </span>
</span> </div>
</div> <Slider
<Slider v-model="worldCardScaleValue"
v-model="worldCardScaleValue" class="favorites-dropdown__slider"
class="favorites-dropdown__slider" :min="worldCardScaleSlider.min"
:min="worldCardScaleSlider.min" :max="worldCardScaleSlider.max"
:max="worldCardScaleSlider.max" :step="worldCardScaleSlider.step" />
:step="worldCardScaleSlider.step" /> </li>
</li> <li class="favorites-dropdown__control" @click.stop>
<li class="favorites-dropdown__control" @click.stop> <div class="favorites-dropdown__control-header">
<div class="favorites-dropdown__control-header"> <span>Spacing</span>
<span>Spacing</span> <span class="favorites-dropdown__control-value"> {{ worldCardSpacingPercent }}% </span>
<span class="favorites-dropdown__control-value"> </div>
{{ worldCardSpacingPercent }}% <Slider
</span> v-model="worldCardSpacingValue"
</div> class="favorites-dropdown__slider"
<Slider :min="worldCardSpacingSlider.min"
v-model="worldCardSpacingValue" :max="worldCardSpacingSlider.max"
class="favorites-dropdown__slider" :step="worldCardSpacingSlider.step" />
:min="worldCardSpacingSlider.min" </li>
:max="worldCardSpacingSlider.max" <DropdownMenuSeparator />
:step="worldCardSpacingSlider.step" /> <DropdownMenuItem @click="handleWorldImportClick">
</li> {{ t('view.favorite.import') }}
<el-dropdown-item @click="handleWorldImportClick"> </DropdownMenuItem>
{{ t('view.favorite.import') }} <DropdownMenuItem @click="handleWorldExportClick">
</el-dropdown-item> {{ t('view.favorite.export') }}
<el-dropdown-item divided @click="handleWorldExportClick"> </DropdownMenuItem>
{{ t('view.favorite.export') }} </DropdownMenuContent>
</el-dropdown-item> </DropdownMenu>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
</div> </div>
<el-splitter class="favorites-splitter" @resize-end="handleWorldSplitterResize"> <el-splitter class="favorites-splitter" @resize-end="handleWorldSplitterResize">
@@ -406,6 +403,13 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../components/ui/dropdown-menu';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover'; import { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores'; import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
import { favoriteRequest, worldRequest } from '../../api'; import { favoriteRequest, worldRequest } from '../../api';
@@ -522,7 +526,7 @@
const worldEditMode = ref(false); const worldEditMode = ref(false);
const activeGroupMenu = ref(null); const activeGroupMenu = ref(null);
const localFavoritesScrollbarRef = ref(null); const localFavoritesScrollbarRef = ref(null);
const worldToolbarMenuRef = ref(); const worldToolbarMenuOpen = ref(false);
const localFavoritesLoadingMore = ref(false); const localFavoritesLoadingMore = ref(false);
const hasWorldSelection = computed(() => selectedFavoriteWorlds.value.length > 0); const hasWorldSelection = computed(() => selectedFavoriteWorlds.value.length > 0);
const hasSearchInput = computed(() => worldFavoriteSearch.value.trim().length > 0); const hasSearchInput = computed(() => worldFavoriteSearch.value.trim().length > 0);
@@ -533,7 +537,7 @@
const localGroupMenuKey = (key) => `local:${key}`; const localGroupMenuKey = (key) => `local:${key}`;
const closeWorldToolbarMenu = () => { const closeWorldToolbarMenu = () => {
worldToolbarMenuRef.value?.handleClose?.(); worldToolbarMenuOpen.value = false;
}; };
function handleWorldImportClick() { function handleWorldImportClick() {

51
src/views/Favorites/components/FavoritesMoveDropdown.vue
View File

@@ -1,40 +1,46 @@
<template> <template>
<el-dropdown trigger="hover" size="small" style="margin-left: 5px" :persistent="false"> <DropdownMenu v-model:open="moveDropdownOpen" style="margin-left: 5px">
<div> <DropdownMenuTrigger as-child>
<el-button type="default" :icon="Back" size="small" circle></el-button> <el-button type="default" :icon="Back" size="small" circle></el-button>
</div> </DropdownMenuTrigger>
<template #dropdown> <DropdownMenuContent class="favorites-dropdown">
<span style="font-weight: bold; display: block; text-align: center"> <span style="font-weight: bold; display: block; text-align: center">
{{ t(tooltipContent) }} {{ t(tooltipContent) }}
</span> </span>
<el-dropdown-menu> <DropdownMenuSeparator />
<template v-for="groupAPI in favoriteGroup" :key="groupAPI.name"> <DropdownMenuItem
<el-dropdown-item v-for="groupAPI in favoriteGroupList"
v-if="isLocalFavorite || groupAPI.name !== currentGroup?.name" :key="groupAPI.name"
style="display: block; margin: 10px 0" v-if="isLocalFavorite || groupAPI?.name !== currentGroup?.name"
:disabled="groupAPI.count >= groupAPI.capacity" style="display: block; margin: 10px 0"
@click="handleDropdownItemClick(groupAPI)"> :disabled="groupAPI.count >= groupAPI.capacity"
{{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }}) @click="handleDropdownItemClick(groupAPI)">
</el-dropdown-item> {{ groupAPI.displayName }} ({{ groupAPI.count }} / {{ groupAPI.capacity }})
</template> </DropdownMenuItem>
</el-dropdown-menu> </DropdownMenuContent>
</template> </DropdownMenu>
</el-dropdown>
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue';
import { Back } from '@element-plus/icons-vue'; import { Back } from '@element-plus/icons-vue';
import { computed } from 'vue';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger
} from '../../../components/ui/dropdown-menu';
import { favoriteRequest } from '../../../api'; import { favoriteRequest } from '../../../api';
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps({ const props = defineProps({
favoriteGroup: { favoriteGroup: {
type: Object, type: [Array, Object],
required: true required: true
}, },
currentGroup: { currentGroup: {
@@ -58,8 +64,15 @@
const tooltipContent = computed(() => const tooltipContent = computed(() =>
props.isLocalFavorite ? t('view.favorite.copy_tooltip') : t('view.favorite.move_tooltip') 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) { function handleDropdownItemClick(groupAPI) {
moveDropdownOpen.value = false;
if (props.isLocalFavorite) { if (props.isLocalFavorite) {
if (props.type === 'world') { if (props.type === 'world') {
addFavoriteWorld(groupAPI); addFavoriteWorld(groupAPI);

40
src/views/Settings/components/WristOverlaySettings.vue
View File

@@ -73,26 +73,26 @@
</div> </div>
<div class="options-container-item"> <div class="options-container-item">
<span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span> <span class="name">{{ t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on') }}</span>
<ToggleGroup <ToggleGroup
type="single" type="single"
required required
variant="outline" variant="outline"
size="sm" size="sm"
:model-value="overlayHand" :model-value="overlayHand"
@update:model-value=" @update:model-value="
setOverlayHand($event); setOverlayHand($event);
saveOpenVROption(); saveOpenVROption();
"> ">
<ToggleGroupItem value="1">{{ <ToggleGroupItem value="1">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left') t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_left')
}}</ToggleGroupItem> }}</ToggleGroupItem>
<ToggleGroupItem value="2">{{ <ToggleGroupItem value="2">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right') t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_right')
}}</ToggleGroupItem> }}</ToggleGroupItem>
<ToggleGroupItem value="0">{{ <ToggleGroupItem value="0">{{
t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both') t('view.settings.wrist_overlay.steamvr_wrist_overlay.display_overlay_on_both')
}}</ToggleGroupItem> }}</ToggleGroupItem>
</ToggleGroup> </ToggleGroup>
</div> </div>
<simple-switch <simple-switch
:label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')" :label="t('view.settings.wrist_overlay.steamvr_wrist_overlay.grey_background')"