replace some el-select

src/components/dialogs/UserDialog/LanguageDialog.vue

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

src/components/dialogs/UserDialog/SocialStatusDialog.vue

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

src/views/Favorites/FavoritesAvatar.vue

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

src/views/Favorites/FavoritesFriend.vue

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

src/views/Favorites/FavoritesWorld.vue

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

src/views/Settings/dialogs/TranslationApiDialog.vue

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

src/views/Tools/dialogs/ScreenshotMetadataDialog.vue

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