mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-26 02:03:49 +02:00
replace some el-select
This commit is contained in:
@@ -2,13 +2,29 @@
|
||||
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
|
||||
<div class="favorites-toolbar">
|
||||
<div>
|
||||
<el-select v-model="sortFav" class="favorites-toolbar__select">
|
||||
<template #prefix>
|
||||
<i class="ri-sort-asc"></i>
|
||||
</template>
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
|
||||
</el-select>
|
||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||
<SelectTrigger size="sm" class="favorites-toolbar__select">
|
||||
<span class="flex items-center gap-2">
|
||||
<i class="ri-sort-asc"></i>
|
||||
<SelectValue
|
||||
:placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
|
||||
</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 class="favorites-toolbar__right">
|
||||
<el-input
|
||||
@@ -486,6 +502,14 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '../../components/ui/select';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -617,14 +641,12 @@
|
||||
const hasUserSelectedAvatarGroup = ref(false);
|
||||
const remoteAvatarGroupsResolved = ref(false);
|
||||
|
||||
const sortFav = computed({
|
||||
get() {
|
||||
return sortFavorites.value;
|
||||
},
|
||||
set() {
|
||||
function handleSortFavoritesChange(value) {
|
||||
const next = Boolean(value);
|
||||
if (next !== sortFavorites.value) {
|
||||
setSortFavorites();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const hasAvatarSelection = computed(() => selectedFavoriteAvatars.value.length > 0);
|
||||
const hasSearchInput = computed(() => avatarFavoriteSearch.value.trim().length > 0);
|
||||
|
||||
@@ -2,13 +2,29 @@
|
||||
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
|
||||
<div class="favorites-toolbar">
|
||||
<div>
|
||||
<el-select v-model="sortFav" class="favorites-toolbar__select">
|
||||
<template #prefix>
|
||||
<i class="ri-sort-asc"></i>
|
||||
</template>
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
|
||||
</el-select>
|
||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||
<SelectTrigger size="sm" class="favorites-toolbar__select">
|
||||
<span class="flex items-center gap-2">
|
||||
<i class="ri-sort-asc"></i>
|
||||
<SelectValue
|
||||
:placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
|
||||
</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 class="favorites-toolbar__right">
|
||||
<el-input
|
||||
@@ -276,6 +292,14 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '../../components/ui/select';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -369,14 +393,12 @@
|
||||
const activeGroupMenu = ref(null);
|
||||
const friendToolbarMenuOpen = ref(false);
|
||||
|
||||
const sortFav = computed({
|
||||
get() {
|
||||
return sortFavorites.value;
|
||||
},
|
||||
set() {
|
||||
function handleSortFavoritesChange(value) {
|
||||
const next = Boolean(value);
|
||||
if (next !== sortFavorites.value) {
|
||||
setSortFavorites();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const hasFriendSelection = computed(() => selectedFavoriteFriends.value.length > 0);
|
||||
const hasSearchInput = computed(() => friendFavoriteSearch.value.trim().length > 0);
|
||||
|
||||
@@ -2,13 +2,29 @@
|
||||
<div class="favorites-page x-container" v-loading="isFavoriteLoading">
|
||||
<div class="favorites-toolbar">
|
||||
<div>
|
||||
<el-select v-model="sortFav" class="favorites-toolbar__select">
|
||||
<template #prefix>
|
||||
<i class="ri-sort-asc"></i>
|
||||
</template>
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
|
||||
<el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
|
||||
</el-select>
|
||||
<Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
|
||||
<SelectTrigger size="sm" class="favorites-toolbar__select">
|
||||
<span class="flex items-center gap-2">
|
||||
<i class="ri-sort-asc"></i>
|
||||
<SelectValue
|
||||
:placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
|
||||
</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 class="favorites-toolbar__right">
|
||||
<el-input
|
||||
@@ -403,6 +419,14 @@
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from '../../components/ui/select';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -654,14 +678,12 @@
|
||||
return sliceLocalWorldFavorites.value(activeLocalGroupName.value);
|
||||
});
|
||||
|
||||
const sortFav = computed({
|
||||
get() {
|
||||
return sortFavorites.value;
|
||||
},
|
||||
set() {
|
||||
function handleSortFavoritesChange(value) {
|
||||
const next = Boolean(value);
|
||||
if (next !== sortFavorites.value) {
|
||||
setSortFavorites();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const isAllWorldsSelected = computed(() => {
|
||||
if (!activeRemoteGroup.value || !currentRemoteFavorites.value.length) {
|
||||
|
||||
@@ -23,10 +23,21 @@
|
||||
<br />
|
||||
<el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
|
||||
<el-form-item :label="t('dialog.translation_api.mode')">
|
||||
<el-select v-model="form.translationApiType" style="width: 100%">
|
||||
<el-option value="google" :label="t('dialog.translation_api.mode_google')" />
|
||||
<el-option value="openai" :label="t('dialog.translation_api.mode_openai')" />
|
||||
</el-select>
|
||||
<Select :model-value="form.translationApiType" @update:modelValue="handleTranslationApiTypeChange">
|
||||
<SelectTrigger size="sm" style="width: 100%">
|
||||
<SelectValue :placeholder="t('dialog.translation_api.mode')" />
|
||||
</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>
|
||||
|
||||
@@ -139,6 +150,10 @@
|
||||
|
||||
const emit = defineEmits(['update:isTranslationApiDialogVisible']);
|
||||
|
||||
function handleTranslationApiTypeChange(value) {
|
||||
form.translationApiType = String(value);
|
||||
}
|
||||
|
||||
const form = reactive({
|
||||
translationApiType: 'google',
|
||||
translationApiEndpoint: 'https://api.openai.com/v1/chat/completions',
|
||||
|
||||
@@ -51,25 +51,28 @@
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<!-- Search bar input -->
|
||||
<el-input
|
||||
v-model="screenshotMetadataDialog.search"
|
||||
placeholder="Search"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@input="screenshotMetadataSearch" />
|
||||
<!-- Search type dropdown -->
|
||||
<el-select
|
||||
v-model="screenshotMetadataDialog.searchType"
|
||||
placeholder="Search Type"
|
||||
style="width: 150px; margin-left: 10px"
|
||||
@change="screenshotMetadataSearch">
|
||||
<el-option
|
||||
v-for="type in screenshotMetadataDialog.searchTypes"
|
||||
:key="type"
|
||||
:label="type"
|
||||
:value="type" />
|
||||
</el-select>
|
||||
<div class="flex items-center">
|
||||
<!-- Search bar input -->
|
||||
<el-input
|
||||
v-model="screenshotMetadataDialog.search"
|
||||
placeholder="Search"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@input="screenshotMetadataSearch" />
|
||||
<!-- Search type dropdown -->
|
||||
<Select :model-value="screenshotMetadataDialog.searchType" @update:modelValue="handleSearchTypeChange">
|
||||
<SelectTrigger size="sm" style="width: 150px; margin-left: 10px">
|
||||
<SelectValue placeholder="Search Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectItem v-for="type in screenshotMetadataDialog.searchTypes" :key="type" :value="type">
|
||||
{{ type }}
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<!-- Search index/total label -->
|
||||
<template v-if="screenshotMetadataDialog.searchIndex !== null">
|
||||
<span style="white-space: pre-wrap; font-size: 12px; margin-left: 10px">{{
|
||||
@@ -155,6 +158,7 @@
|
||||
|
||||
<script setup>
|
||||
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 { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
@@ -372,6 +376,11 @@
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function handleSearchTypeChange(value) {
|
||||
screenshotMetadataDialog.searchType = value;
|
||||
screenshotMetadataSearch();
|
||||
}
|
||||
|
||||
function screenshotMetadataCarouselChange(index) {
|
||||
const D = screenshotMetadataDialog;
|
||||
const searchIndex = D.searchIndex;
|
||||
|
||||
Reference in New Issue
Block a user