replace some el-select

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

View File

@@ -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);

View File

@@ -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);

View File

@@ -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) {

View File

@@ -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',

View File

@@ -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;