replace el-dropdown

src/views/Settings/components/SimpleSwitch.vue

@@ -34,6 +34,7 @@
     .simple-switch {
         font-size: 12px;
         display: flex;
+        align-items: center;
     }
     .simple-switch > .name {
         width: 225px;

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -4,45 +4,33 @@
             <span class="header">{{ t('view.settings.appearance.appearance.header') }}</span>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.language') }}</span>
-                <el-dropdown trigger="click" size="small" @click.stop>
-                    <el-button size="small">
-                        <span>
-                            {{ getLanguageName(appLanguage) }} <el-icon class="el-icon--right"> <ArrowDown /></el-icon
-                        ></span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item
-                                v-for="language in languageCodes"
-                                :key="language"
-                                :class="{ 'is-active': appLanguage === language }"
-                                @click="changeAppLanguage(language)"
-                                v-text="getLanguageName(language)" />
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                <Select :model-value="appLanguage" @update:modelValue="changeAppLanguage">
+                    <SelectTrigger size="sm">
+                        <SelectValue :placeholder="getLanguageName(appLanguage)" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem v-for="language in languageCodes" :key="language" :value="language">
+                                {{ getLanguageName(language) }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
-                <el-dropdown trigger="click" size="small" @click.stop>
-                    <el-button size="small">
-                        <span
-                            >{{ t(`view.settings.appearance.appearance.theme_mode_${themeMode}`) }}
-                            <el-icon class="el-icon--right"><ArrowDown /></el-icon
-                        ></span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item
-                                v-for="(config, themeKey) in THEME_CONFIG"
-                                :key="themeKey"
-                                @click="saveThemeMode(themeKey)"
-                                :class="{ 'is-active': themeMode === themeKey }">
+                <Select :model-value="themeMode" @update:modelValue="saveThemeMode">
+                    <SelectTrigger size="sm">
+                        <SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem v-for="(config, themeKey) in THEME_CONFIG" :key="themeKey" :value="themeKey">
                                 {{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }}
-                            </el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <div v-if="!isLinux" class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.zoom') }}</span>
@@ -314,7 +302,7 @@
                 :label="t('view.settings.appearance.user_colors.random_colors_from_user_id')"
                 :value="randomUserColours"
                 @change="updateTrustColor('', '', true)"></simple-switch>
-            <div class="options-container-item">
+            <div>
                 <div>
                     <el-color-picker
                         :model-value="trustColor.untrusted"
@@ -384,8 +372,9 @@
 </template>
 
 <script setup>
-    import { ArrowDown, ArrowRight, Notebook } from '@element-plus/icons-vue';
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { computed, onBeforeUnmount, ref } from 'vue';
+    import { ArrowRight, Notebook } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Settings/components/Tabs/NotificationsTab.vue

@@ -230,22 +230,21 @@
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.notifications.notifications.text_to_speech.tts_voice') }}</span>
-                <el-dropdown trigger="click" size="small" @command="(voice) => changeTTSVoice(voice)">
-                    <el-button size="small" :disabled="notificationTTS === 'Never'">
-                        <span
-                            >{{ getTTSVoiceName() }} <el-icon style="margin-left: 5px"><ArrowDown /></el-icon
-                        ></span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item
-                                v-for="(voice, index) in TTSvoices"
-                                :key="index"
-                                :command="index"
-                                v-text="voice.name" />
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                <Select
+                    :model-value="ttsVoiceIndex"
+                    :disabled="notificationTTS === 'Never'"
+                    @update:modelValue="(v) => (ttsVoiceIndex = v)">
+                    <SelectTrigger size="sm">
+                        <SelectValue :placeholder="getTTSVoiceName()" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem v-for="(voice, index) in TTSvoices" :key="index" :value="index">
+                                {{ voice.name }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <simple-switch
                 :label="t('view.settings.notifications.notifications.text_to_speech.use_memo_nicknames')"
@@ -274,14 +273,15 @@
 </template>
 
 <script setup>
-    import { ArrowDown, ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { ChatSquare, Rank, Timer, VideoPlay } from '@element-plus/icons-vue';
     import { computed, ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
     import { useAdvancedSettingsStore, useNotificationsSettingsStore, useVrStore } from '../../../../stores';
-    import { Slider } from '../../../../components/ui/slider';
     import { ToggleGroup, ToggleGroupItem } from '../../../../components/ui/toggle-group';
+    import { Slider } from '../../../../components/ui/slider';
 
     import FeedFiltersDialog from '../../dialogs/FeedFiltersDialog.vue';
     import NotificationPositionDialog from '../../dialogs/NotificationPositionDialog.vue';
@@ -345,6 +345,19 @@
         }
     });
 
+    const ttsVoiceIndex = computed({
+        get: () => {
+            const currentName = getTTSVoiceName();
+            const idx = TTSvoices.value.findIndex((v) => v?.name === currentName);
+            return idx >= 0 ? idx : null;
+        },
+        set: (value) => {
+            if (typeof value === 'number') {
+                changeTTSVoice(value);
+            }
+        }
+    });
+
     function showNotyFeedFiltersDialog() {
         feedFiltersDialogMode.value = 'noty';
     }

src/views/Settings/dialogs/TranslationApiDialog.vue

@@ -7,23 +7,18 @@
         @close="closeDialog">
         <div class="options-container-item">
             <span class="name">{{ t('view.settings.appearance.appearance.bio_language') }}</span>
-            <el-dropdown trigger="click" size="small" style="float: right" @click.stop>
-                <el-button size="small">
-                    <span>
-                        {{ getLanguageName(bioLanguage) || bioLanguage }}
-                        <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                    </span>
-                </el-button>
-                <template #dropdown>
-                    <el-dropdown-menu>
-                        <el-dropdown-item
-                            v-for="language in languageCodes"
-                            :key="language"
-                            @click="setBioLanguage(language)"
-                            v-text="getLanguageName(language)" />
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
+            <Select :model-value="bioLanguage" @update:modelValue="setBioLanguage">
+                <SelectTrigger size="sm" style="float: right">
+                    <SelectValue :placeholder="String(getLanguageName(bioLanguage) || bioLanguage || '')" />
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectItem v-for="language in languageCodes" :key="language" :value="language">
+                            {{ getLanguageName(language) }}
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
         </div>
         <br />
         <el-form label-position="top" label-width="120px" size="small" style="margin-bottom: 12px">
@@ -102,8 +97,8 @@
 </template>
 
 <script setup>
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { reactive, watch } from 'vue';
-    import { ArrowDown } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';

src/views/Settings/dialogs/VRChatConfigDialog.vue

@@ -71,81 +71,69 @@
             <div style="display: inline-block; margin-top: 10px">
                 <span>{{ t('dialog.config_json.camera_resolution') }}</span>
                 <br />
-                <el-dropdown
-                    size="small"
-                    trigger="click"
-                    style="margin-top: 5px"
-                    @command="(command) => setVRChatCameraResolution(command)">
-                    <el-button size="small">
-                        <span>
-                            <span v-text="getVRChatCameraResolution()"></span>
-                            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                        </span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item v-for="row in VRChatCameraResolutions" :key="row.index" :command="row">{{
-                                row.name
-                            }}</el-dropdown-item>
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                <Select
+                    :model-value="vrchatCameraResolutionKey"
+                    @update:modelValue="(v) => (vrchatCameraResolutionKey = v)">
+                    <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectValue :placeholder="getVRChatCameraResolution()" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem
+                                v-for="row in VRChatCameraResolutions"
+                                :key="row.name"
+                                :value="getVRChatResolutionKey(row)">
+                                {{ row.name }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <br />
 
             <div style="display: inline-block; margin-top: 10px">
                 <span>{{ t('dialog.config_json.spout_resolution') }}</span>
                 <br />
-                <el-dropdown
-                    size="small"
-                    trigger="click"
-                    style="margin-top: 5px"
-                    @command="(command) => setVRChatSpoutResolution(command)">
-                    <el-button size="small">
-                        <span>
-                            <span v-text="getVRChatSpoutResolution()"></span>
-                            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                        </span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item
+                <Select
+                    :model-value="vrchatSpoutResolutionKey"
+                    @update:modelValue="(v) => (vrchatSpoutResolutionKey = v)">
+                    <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectValue :placeholder="getVRChatSpoutResolution()" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem
                                 v-for="row in VRChatScreenshotResolutions"
-                                :key="row.index"
-                                :command="row"
-                                >{{ row.name }}</el-dropdown-item
-                            >
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                                :key="row.name"
+                                :value="getVRChatResolutionKey(row)">
+                                {{ row.name }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <br />
 
             <div style="display: inline-block; margin-top: 10px">
                 <span>{{ t('dialog.config_json.screenshot_resolution') }}</span>
                 <br />
-                <el-dropdown
-                    size="small"
-                    trigger="click"
-                    style="margin-top: 5px"
-                    @command="(command) => setVRChatScreenshotResolution(command)">
-                    <el-button size="small">
-                        <span>
-                            <span v-text="getVRChatScreenshotResolution()"></span>
-                            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
-                        </span>
-                    </el-button>
-                    <template #dropdown>
-                        <el-dropdown-menu>
-                            <el-dropdown-item
+                <Select
+                    :model-value="vrchatScreenshotResolutionKey"
+                    @update:modelValue="(v) => (vrchatScreenshotResolutionKey = v)">
+                    <SelectTrigger size="sm" style="margin-top: 5px">
+                        <SelectValue :placeholder="getVRChatScreenshotResolution()" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectItem
                                 v-for="row in VRChatScreenshotResolutions"
-                                :key="row.index"
-                                :command="row"
-                                >{{ row.name }}</el-dropdown-item
-                            >
-                        </el-dropdown-menu>
-                    </template>
-                </el-dropdown>
+                                :key="row.name"
+                                :value="getVRChatResolutionKey(row)">
+                                {{ row.name }}
+                            </SelectItem>
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
             </div>
             <br />
 
@@ -181,7 +169,8 @@
 </template>
 
 <script setup>
-    import { ArrowDown, Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import { Delete, FolderDelete, FolderOpened, Refresh } from '@element-plus/icons-vue';
     import { computed, ref, watch } from 'vue';
     import { ElMessageBox } from 'element-plus';
     import { storeToRefs } from 'pinia';
@@ -199,52 +188,54 @@
 
     const { t } = useI18n();
 
-    const VRChatConfigFile = ref({});
+    const VRChatConfigFile = ref(/** @type {Record<string, any>} */ ({}));
     // it's a object
-    const VRChatConfigList = ref({
-        cache_size: {
-            name: t('dialog.config_json.max_cache_size'),
-            default: '30',
-            type: 'number',
-            min: 30
-        },
-        cache_expiry_delay: {
-            name: t('dialog.config_json.cache_expiry_delay'),
-            default: '30',
-            type: 'number',
-            min: 30
-        },
-        cache_directory: {
-            name: t('dialog.config_json.cache_directory'),
-            default: '%AppData%\\..\\LocalLow\\VRChat\\VRChat',
-            folderBrowser: true
-        },
-        picture_output_folder: {
-            name: t('dialog.config_json.picture_directory'),
-            // my pictures folder
-            default: `%UserProfile%\\Pictures\\VRChat`,
-            folderBrowser: true
-        },
-        // dynamic_bone_max_affected_transform_count: {
-        //     name: 'Dynamic Bones Limit Max Transforms (0 disable all transforms)',
-        //     default: '32',
-        //     type: 'number',
-        //     min: 0
-        // },
-        // dynamic_bone_max_collider_check_count: {
-        //     name: 'Dynamic Bones Limit Max Collider Collisions (0 disable all colliders)',
-        //     default: '8',
-        //     type: 'number',
-        //     min: 0
-        // },
-        fpv_steadycam_fov: {
-            name: t('dialog.config_json.fpv_steadycam_fov'),
-            default: '50',
-            type: 'number',
-            min: 30,
-            max: 110
-        }
-    });
+    const VRChatConfigList = ref(
+        /** @type {Record<string, any>} */ ({
+            cache_size: {
+                name: t('dialog.config_json.max_cache_size'),
+                default: '30',
+                type: 'number',
+                min: 30
+            },
+            cache_expiry_delay: {
+                name: t('dialog.config_json.cache_expiry_delay'),
+                default: '30',
+                type: 'number',
+                min: 30
+            },
+            cache_directory: {
+                name: t('dialog.config_json.cache_directory'),
+                default: '%AppData%\\..\\LocalLow\\VRChat\\VRChat',
+                folderBrowser: true
+            },
+            picture_output_folder: {
+                name: t('dialog.config_json.picture_directory'),
+                // my pictures folder
+                default: `%UserProfile%\\Pictures\\VRChat`,
+                folderBrowser: true
+            },
+            // dynamic_bone_max_affected_transform_count: {
+            //     name: 'Dynamic Bones Limit Max Transforms (0 disable all transforms)',
+            //     default: '32',
+            //     type: 'number',
+            //     min: 0
+            // },
+            // dynamic_bone_max_collider_check_count: {
+            //     name: 'Dynamic Bones Limit Max Collider Collisions (0 disable all colliders)',
+            //     default: '8',
+            //     type: 'number',
+            //     min: 0
+            // },
+            fpv_steadycam_fov: {
+                name: t('dialog.config_json.fpv_steadycam_fov'),
+                default: '50',
+                type: 'number',
+                min: 30,
+                max: 110
+            }
+        })
+    );
 
     const loading = ref(false);
 
@@ -263,6 +254,68 @@
         return VRChatConfigFile.value.cache_size || VRChatTotalCacheSize.value;
     });
 
+    const VRCHAT_RESOLUTION_DEFAULT_KEY = '__default__';
+
+    function getVRChatResolutionKey(row) {
+        const width = Number(row?.width);
+        const height = Number(row?.height);
+        if (width > 0 && height > 0) {
+            return `${width}x${height}`;
+        }
+        return VRCHAT_RESOLUTION_DEFAULT_KEY;
+    }
+
+    const vrchatCameraResolutionKey = computed({
+        get: () => {
+            const width = Number(VRChatConfigFile.value.camera_res_width);
+            const height = Number(VRChatConfigFile.value.camera_res_height);
+            if (width > 0 && height > 0) {
+                return `${width}x${height}`;
+            }
+            return VRCHAT_RESOLUTION_DEFAULT_KEY;
+        },
+        set: (value) => {
+            const row = VRChatCameraResolutions.find((r) => getVRChatResolutionKey(r) === value);
+            if (row) {
+                setVRChatCameraResolution(row);
+            }
+        }
+    });
+
+    const vrchatSpoutResolutionKey = computed({
+        get: () => {
+            const width = Number(VRChatConfigFile.value.camera_spout_res_width);
+            const height = Number(VRChatConfigFile.value.camera_spout_res_height);
+            if (width > 0 && height > 0) {
+                return `${width}x${height}`;
+            }
+            return VRCHAT_RESOLUTION_DEFAULT_KEY;
+        },
+        set: (value) => {
+            const row = VRChatScreenshotResolutions.find((r) => getVRChatResolutionKey(r) === value);
+            if (row) {
+                setVRChatSpoutResolution(row);
+            }
+        }
+    });
+
+    const vrchatScreenshotResolutionKey = computed({
+        get: () => {
+            const width = Number(VRChatConfigFile.value.screenshot_res_width);
+            const height = Number(VRChatConfigFile.value.screenshot_res_height);
+            if (width > 0 && height > 0) {
+                return `${width}x${height}`;
+            }
+            return VRCHAT_RESOLUTION_DEFAULT_KEY;
+        },
+        set: (value) => {
+            const row = VRChatScreenshotResolutions.find((r) => getVRChatResolutionKey(r) === value);
+            if (row) {
+                setVRChatScreenshotResolution(row);
+            }
+        }
+    });
+
     function showDeleteAllVRChatCacheConfirm() {
         ElMessageBox.confirm(`Continue? Delete all VRChat cache`, 'Confirm', {
             confirmButtonText: 'Confirm',
@@ -354,8 +407,11 @@
                 delete VRChatConfigFile.value[item];
             } else if (typeof VRChatConfigFile.value[item] === 'boolean' && VRChatConfigFile.value[item] === false) {
                 delete VRChatConfigFile.value[item];
-            } else if (typeof VRChatConfigFile.value[item] === 'string' && !isNaN(VRChatConfigFile.value[item])) {
-                VRChatConfigFile.value[item] = parseInt(VRChatConfigFile.value[item], 10);
+            } else if (typeof VRChatConfigFile.value[item] === 'string') {
+                const parsed = parseInt(VRChatConfigFile.value[item], 10);
+                if (!Number.isNaN(parsed)) {
+                    VRChatConfigFile.value[item] = parsed;
+                }
             }
         }
         WriteVRChatConfigFile();