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

replace some el-select

Browse Source
This commit is contained in:
pa
2026-01-08 23:13:51 +09:00
committed by Natsumi
parent 4eabeb11e0
commit 548866f2f8
7 changed files with 222 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/dialogs/UserDialog/LanguageDialog.vue
View File

@@ -30,31 +30,39 @@
</button> </button>
</Badge> </Badge>
</div> </div>
<el-select <Select
:model-value="selectedLanguageToAdd"
:disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)" :disabled="languageDialog.loading || (currentUser.$languages && currentUser.$languages.length === 3)"
:placeholder="t('dialog.language.select_language')" @update:modelValue="handleAddUserLanguage">
style="margin-top: 14px" <SelectTrigger size="sm" style="margin-top: 14px">
@change="addUserLanguage"> <SelectValue :placeholder="t('dialog.language.select_language')" />
<el-option </SelectTrigger>
v-for="item in languageDialog.languages" <SelectContent>
:key="item.key" <SelectGroup>
:value="item.key" <SelectItem
:label="item.value"> v-for="item in languageDialog.languages"
<span :key="item.key"
class="flags" :value="item.key"
:class="languageClass(item.key)" :text-value="item.value">
style="display: inline-block; margin-right: 5px"></span> <span
{{ item.value }} ({{ item.key.toUpperCase() }}) class="flags"
</el-option> :class="languageClass(item.key)"
</el-select> style="display: inline-block; margin-right: 5px"></span>
{{ item.value }} ({{ item.key.toUpperCase() }})
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div> </div>
</el-dialog> </el-dialog>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '../../ui/select';
import { Badge } from '../../ui/badge'; import { Badge } from '../../ui/badge';
import { languageClass } from '../../../shared/utils'; import { languageClass } from '../../../shared/utils';
import { useUserStore } from '../../../stores'; import { useUserStore } from '../../../stores';
@@ -64,6 +72,13 @@
const { languageDialog, currentUser } = storeToRefs(useUserStore()); const { languageDialog, currentUser } = storeToRefs(useUserStore());
const selectedLanguageToAdd = ref('');
function handleAddUserLanguage(language) {
addUserLanguage(language);
selectedLanguageToAdd.value = '';
}
function removeUserLanguage(language) { function removeUserLanguage(language) {
if (language !== String(language)) { if (language !== String(language)) {
return; return;

63
src/components/dialogs/UserDialog/SocialStatusDialog.vue
View File

@@ -6,30 +6,40 @@
append-to-body append-to-body
width="400px"> width="400px">
<div v-loading="socialStatusDialog.loading"> <div v-loading="socialStatusDialog.loading">
<el-select v-model="socialStatusDialog.status" style="margin-top: 10px"> <Select :model-value="socialStatusDialog.status" @update:modelValue="handleSocialStatusChange">
<template #prefix> <SelectTrigger size="sm" style="margin-top: 10px; width: 100%">
<i v-if="socialStatusDialog.status === 'join me'" class="x-user-status joinme"></i> <span class="flex items-center gap-2">
<i v-else-if="socialStatusDialog.status === 'active'" class="x-user-status online"></i> <i v-if="socialStatusDialog.status === 'join me'" class="x-user-status joinme"></i>
<i v-else-if="socialStatusDialog.status === 'ask me'" class="x-user-status askme"></i> <i v-else-if="socialStatusDialog.status === 'active'" class="x-user-status online"></i>
<i v-else-if="socialStatusDialog.status === 'busy'" class="x-user-status busy"></i> <i v-else-if="socialStatusDialog.status === 'ask me'" class="x-user-status askme"></i>
<i v-else-if="socialStatusDialog.status === 'offline'" class="x-user-status offline"></i> <i v-else-if="socialStatusDialog.status === 'busy'" class="x-user-status busy"></i>
</template> <i v-else-if="socialStatusDialog.status === 'offline'" class="x-user-status offline"></i>
<el-option :label="t('dialog.user.status.join_me')" value="join me"> <SelectValue :placeholder="t('dialog.social_status.status_placeholder')" />
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }} </span>
</el-option> </SelectTrigger>
<el-option :label="t('dialog.user.status.online')" value="active"> <SelectContent>
<i class="x-user-status online"></i> {{ t('dialog.user.status.online') }} <SelectGroup>
</el-option> <SelectItem value="join me" :text-value="t('dialog.user.status.join_me')">
<el-option :label="t('dialog.user.status.ask_me')" value="ask me"> <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
<i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }} </SelectItem>
</el-option> <SelectItem value="active" :text-value="t('dialog.user.status.online')">
<el-option :label="t('dialog.user.status.busy')" value="busy"> <i class="x-user-status online"></i> {{ t('dialog.user.status.online') }}
<i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }} </SelectItem>
</el-option> <SelectItem value="ask me" :text-value="t('dialog.user.status.ask_me')">
<el-option v-if="currentUser.$isModerator" :label="t('dialog.user.status.offline')" value="offline"> <i class="x-user-status askme"></i> {{ t('dialog.user.status.ask_me') }}
<i class="x-user-status offline"></i> {{ t('dialog.user.status.offline') }} </SelectItem>
</el-option> <SelectItem value="busy" :text-value="t('dialog.user.status.busy')">
</el-select> <i class="x-user-status busy"></i> {{ t('dialog.user.status.busy') }}
</SelectItem>
<SelectItem
v-if="currentUser.$isModerator"
value="offline"
:text-value="t('dialog.user.status.offline')">
<i class="x-user-status offline"></i> {{ t('dialog.user.status.offline') }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
<el-input <el-input
v-model="socialStatusDialog.statusDescription" v-model="socialStatusDialog.statusDescription"
@@ -75,6 +85,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
@@ -104,6 +115,10 @@
const historyItems = computed(() => props.socialStatusHistoryTable?.data ?? []); const historyItems = computed(() => props.socialStatusHistoryTable?.data ?? []);
const latestHistoryItem = computed(() => historyItems.value[0] ?? null); const latestHistoryItem = computed(() => historyItems.value[0] ?? null);
function handleSocialStatusChange(value) {
props.socialStatusDialog.status = String(value);
}
function setSocialStatusFromHistory(val) { function setSocialStatusFromHistory(val) {
if (val === null) { if (val === null) {
return; return;

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

@@ -2,13 +2,29 @@
<div class="favorites-page x-container" v-loading="isFavoriteLoading"> <div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-toolbar"> <div class="favorites-toolbar">
<div> <div>
<el-select v-model="sortFav" class="favorites-toolbar__select"> <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
<template #prefix> <SelectTrigger size="sm" class="favorites-toolbar__select">
<i class="ri-sort-asc"></i> <span class="flex items-center gap-2">
</template> <i class="ri-sort-asc"></i>
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" /> <SelectValue
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" /> :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
</el-select> </span>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
:value="false"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
</SelectItem>
<SelectItem
:value="true"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div> </div>
<div class="favorites-toolbar__right"> <div class="favorites-toolbar__right">
<el-input <el-input
@@ -486,6 +502,14 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -617,14 +641,12 @@
const hasUserSelectedAvatarGroup = ref(false); const hasUserSelectedAvatarGroup = ref(false);
const remoteAvatarGroupsResolved = ref(false); const remoteAvatarGroupsResolved = ref(false);
const sortFav = computed({ function handleSortFavoritesChange(value) {
get() { const next = Boolean(value);
return sortFavorites.value; if (next !== sortFavorites.value) {
},
set() {
setSortFavorites(); setSortFavorites();
} }
}); }
const hasAvatarSelection = computed(() => selectedFavoriteAvatars.value.length > 0); const hasAvatarSelection = computed(() => selectedFavoriteAvatars.value.length > 0);
const hasSearchInput = computed(() => avatarFavoriteSearch.value.trim().length > 0); const hasSearchInput = computed(() => avatarFavoriteSearch.value.trim().length > 0);

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

@@ -2,13 +2,29 @@
<div class="favorites-page x-container" v-loading="isFavoriteLoading"> <div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-toolbar"> <div class="favorites-toolbar">
<div> <div>
<el-select v-model="sortFav" class="favorites-toolbar__select"> <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
<template #prefix> <SelectTrigger size="sm" class="favorites-toolbar__select">
<i class="ri-sort-asc"></i> <span class="flex items-center gap-2">
</template> <i class="ri-sort-asc"></i>
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" /> <SelectValue
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" /> :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
</el-select> </span>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
:value="false"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
</SelectItem>
<SelectItem
:value="true"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div> </div>
<div class="favorites-toolbar__right"> <div class="favorites-toolbar__right">
<el-input <el-input
@@ -276,6 +292,14 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -369,14 +393,12 @@
const activeGroupMenu = ref(null); const activeGroupMenu = ref(null);
const friendToolbarMenuOpen = ref(false); const friendToolbarMenuOpen = ref(false);
const sortFav = computed({ function handleSortFavoritesChange(value) {
get() { const next = Boolean(value);
return sortFavorites.value; if (next !== sortFavorites.value) {
},
set() {
setSortFavorites(); setSortFavorites();
} }
}); }
const hasFriendSelection = computed(() => selectedFavoriteFriends.value.length > 0); const hasFriendSelection = computed(() => selectedFavoriteFriends.value.length > 0);
const hasSearchInput = computed(() => friendFavoriteSearch.value.trim().length > 0); const hasSearchInput = computed(() => friendFavoriteSearch.value.trim().length > 0);

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

@@ -2,13 +2,29 @@
<div class="favorites-page x-container" v-loading="isFavoriteLoading"> <div class="favorites-page x-container" v-loading="isFavoriteLoading">
<div class="favorites-toolbar"> <div class="favorites-toolbar">
<div> <div>
<el-select v-model="sortFav" class="favorites-toolbar__select"> <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
<template #prefix> <SelectTrigger size="sm" class="favorites-toolbar__select">
<i class="ri-sort-asc"></i> <span class="flex items-center gap-2">
</template> <i class="ri-sort-asc"></i>
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" /> <SelectValue
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" /> :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
</el-select> </span>
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem
:value="false"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
</SelectItem>
<SelectItem
:value="true"
:text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
{{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div> </div>
<div class="favorites-toolbar__right"> <div class="favorites-toolbar__right">
<el-input <el-input
@@ -403,6 +419,14 @@
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue
} from '../../components/ui/select';
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@@ -654,14 +678,12 @@
return sliceLocalWorldFavorites.value(activeLocalGroupName.value); return sliceLocalWorldFavorites.value(activeLocalGroupName.value);
}); });
const sortFav = computed({ function handleSortFavoritesChange(value) {
get() { const next = Boolean(value);
return sortFavorites.value; if (next !== sortFavorites.value) {
},
set() {
setSortFavorites(); setSortFavorites();
} }
}); }
const isAllWorldsSelected = computed(() => { const isAllWorldsSelected = computed(() => {
if (!activeRemoteGroup.value || !currentRemoteFavorites.value.length) { if (!activeRemoteGroup.value || !currentRemoteFavorites.value.length) {

23
src/views/Settings/dialogs/TranslationApiDialog.vue
View File

@@ -23,10 +23,21 @@
<br /> <br />
<el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px"> <el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
<el-form-item :label="t('dialog.translation_api.mode')"> <el-form-item :label="t('dialog.translation_api.mode')">
<el-select v-model="form.translationApiType" style="width: 100%"> <Select :model-value="form.translationApiType" @update:modelValue="handleTranslationApiTypeChange">
<el-option value="google" :label="t('dialog.translation_api.mode_google')" /> <SelectTrigger size="sm" style="width: 100%">
<el-option value="openai" :label="t('dialog.translation_api.mode_openai')" /> <SelectValue :placeholder="t('dialog.translation_api.mode')" />
</el-select> </SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="google" :text-value="t('dialog.translation_api.mode_google')">
{{ t('dialog.translation_api.mode_google') }}
</SelectItem>
<SelectItem value="openai" :text-value="t('dialog.translation_api.mode_openai')">
{{ t('dialog.translation_api.mode_openai') }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -139,6 +150,10 @@
const emit = defineEmits(['update:isTranslationApiDialogVisible']); const emit = defineEmits(['update:isTranslationApiDialogVisible']);
function handleTranslationApiTypeChange(value) {
form.translationApiType = String(value);
}
const form = reactive({ const form = reactive({
translationApiType: 'google', translationApiType: 'google',
translationApiEndpoint: 'https://api.openai.com/v1/chat/completions', translationApiEndpoint: 'https://api.openai.com/v1/chat/completions',

47
src/views/Tools/dialogs/ScreenshotMetadataDialog.vue
View File

@@ -51,25 +51,28 @@
<br /> <br />
<br /> <br />
<!-- Search bar input --> <div class="flex items-center">
<el-input <!-- Search bar input -->
v-model="screenshotMetadataDialog.search" <el-input
placeholder="Search" v-model="screenshotMetadataDialog.search"
clearable placeholder="Search"
style="width: 200px" clearable
@input="screenshotMetadataSearch" /> style="width: 200px"
<!-- Search type dropdown --> @input="screenshotMetadataSearch" />
<el-select <!-- Search type dropdown -->
v-model="screenshotMetadataDialog.searchType" <Select :model-value="screenshotMetadataDialog.searchType" @update:modelValue="handleSearchTypeChange">
placeholder="Search Type" <SelectTrigger size="sm" style="width: 150px; margin-left: 10px">
style="width: 150px; margin-left: 10px" <SelectValue placeholder="Search Type" />
@change="screenshotMetadataSearch"> </SelectTrigger>
<el-option <SelectContent>
v-for="type in screenshotMetadataDialog.searchTypes" <SelectGroup>
:key="type" <SelectItem v-for="type in screenshotMetadataDialog.searchTypes" :key="type" :value="type">
:label="type" {{ type }}
:value="type" /> </SelectItem>
</el-select> </SelectGroup>
</SelectContent>
</Select>
</div>
<!-- Search index/total label --> <!-- Search index/total label -->
<template v-if="screenshotMetadataDialog.searchIndex !== null"> <template v-if="screenshotMetadataDialog.searchIndex !== null">
<span style="white-space: pre-wrap; font-size: 12px; margin-left: 10px">{{ <span style="white-space: pre-wrap; font-size: 12px; margin-left: 10px">{{
@@ -155,6 +158,7 @@
<script setup> <script setup>
import { CopyDocument, Delete, Folder, FolderOpened, Picture, Upload } from '@element-plus/icons-vue'; import { CopyDocument, Delete, Folder, FolderOpened, Picture, Upload } from '@element-plus/icons-vue';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { reactive, ref, watch } from 'vue'; import { reactive, ref, watch } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner'; import { toast } from 'vue-sonner';
@@ -372,6 +376,11 @@
}, 500); }, 500);
} }
function handleSearchTypeChange(value) {
screenshotMetadataDialog.searchType = value;
screenshotMetadataSearch();
}
function screenshotMetadataCarouselChange(index) { function screenshotMetadataCarouselChange(index) {
const D = screenshotMetadataDialog; const D = screenshotMetadataDialog;
const searchIndex = D.searchIndex; const searchIndex = D.searchIndex;